Knockout JS Tutorial: Creare Youtube Playlist Aplicación


Biblioteca undestanding Knockout Javascript con Applicazione diseño ONU Creatore di lista de reproducción youtube

QUESTO E document Stato Creato por mostrare ONU disegno di Applicazione lista de reproducción completa utilizzando le Librerie javascript Knockout.




Youtube e Il Più grande sito di vídeo condivisione. Ma la SUA interfaccia utente non ê Molto facile da noiSei. Non ha Nemmeno un'opzione di Ripetizione per i vídeo e la Gestione delle lista de reproducción Non E Semplice. Così avevo Creato Una Gestione sito youtube Usando lista de reproducción js KnockOut. Ê possibile controllare Do 'Youtube-Viewer.com'.

Le Funzionalità Che implementamos Ho Sono:

  • Ê possibile AGGIUNGERE ONU vídeo di YouTube per la lista de reproducción inserendo l'URL e cliccando sul Tasto "Aggiungi video"
  • Ê possibile rimuovere Tutti i cliccando vídeo Do Rimuovi tutto Pulsante
  • E Attivare possibile Repetir Encendido o apagado Facendo clic sul Pulsante repita
  • Tutte le modifiche che fai lista de reproducción verranno Salvate nep biscotti e Ogni volta che si visita di nuovo, Allora inizieranno costituire il punto di ultima Lasciato

Avevo USATO Knock Out Librerie JS por crearlo. Knockout e Una libreria JavaScript Che consente di Creazione e ricche Interfacce di Visualizzazione e utente Redattore con reattive ONU Modello di Dati sottostante pulito. Ogni volta che ci Sono Sezioni di interfaccia utente Che si aggiornano dinamicamente (for example, Cambiando Una seconda delle Azioni dell'Utente o when Un cambio di sorgente Dati esterni), KO PUÒ aiutare ONU implementare Più Semplice e maintainably.

Capire Knockout JS

Knockout JS si basa sul legame di tra l'interfaccia utente e il ViewModel.

ViewModel E La Struttura Dati Che Conterra i Dati e Tutti i Dati Sono Direttamente binded per l'interfaccia utente.

No dovete preoccuparvi di Visualizzazione Di Una variabile Si e Direttamente binded ai Dati en vista del Modello.

Esempio

Supponiamo E this Che Modello ONU vista


Funzione AppViewModel () {
this.firstName = ko.observable ("Bert");
this.lastName = ko.observable ("Bertington");
this.fullName = ko.computed (function () {
ritorno this.firstName () + "" + this.lastName ();
}, This);

}
// Attiva knockout.js
ko.applyBindings (nuovo AppViewModel ());

Ed E binded per l'interfaccia utente

Nome:

Apellido:

Nome completo:

Ecco il AppViewModel e La Nostra Struttura dei Dati e Contiene te campi: Nome, cognome e fullName. QUESTE Sono Direttamente binded per l'interfaccia utente.

IU ha debido campi di entrada e la prima E binded ONU firstName e La seconda E rilegata ONU lastName. Si noti Che Una instancia de Parte del Valore della ingresso e etiqueta rilegata ai campi. Il etiqueta Prossimo Che di UI Vienne rilegato e forte. Si noti Che la Instancia de Parte di testo del Forte E binded al campo FullName.

Ora Ogni volta che si change nulla en uno dei debido Allora entrada campi di KO valuterà la fullName e visualizzarlo. Quindi QUESTO E UN pulito Molto Approccio en cui ABBIAMO Modelli di Dati e ABBIAMO UI con Sono rilegata Insieme.

DataModel lista de reproducción di mia

Ho Creato ONU ViewModel por storing i Dati e le FUNZIONI.

  • Ho classe Una Creato Vídeo: un Semplice Costruttore di classe JavaScript si memorizza Che i Dettagli di vídeo ONU
  • E ViewModel Che ha Una serie di video. Ho Agregado debido vídeo por inizializzare l'vídeo Matriz. Poi il ViewModel Contiene Altri campi por mantenere lo Stato attuale del giocatore, ven il Nome del Corrente video, Modalità di Ripetizione Corrente, etc.

Creazione di Video Un di classe

Funzione Video (nome, desc, urlof) {
var this = SE;
self.index = ko.observable (1);
self.name = ko.observable (nome);
self.desc = ko.observable (decrescente);
self.urlof = ko.observable (urlof);
self.playing = ko.observable ("0");
indice var = urlof.indexOf ("v =");
imgsrc var = "http://i.ytimg.com/vi/"+urlof.substring(index+2)+"/default.jpg";
self.isrc = ko.observable (imgsrc);
}

Creazione di ONU ViewModel

Funzione ViewModel () {

var this = SE;

this.videoName = ko.observable ("");

this.videoUrl = ko.observable ("");

this.repeat = ko.observable ("repeatoff.png");

this.loaded = ko.observable ("0");

self.videos = ko.observableArray ([

nuovo video ("Blue", "Descripción del di blu", "http://www.youtube.com/watch?v=h2S3RvIHwGs"),

vídeo nuovo ("Orange", "Descripción del di arancia", "http://www.youtube.com/watch?v=4u6RK87e0rQ")

]);

Encuadernación vídeo matrice la col tavolo por visualizzare OGNI dettaglio di vídeo

Poi ABBIAMO binded Matriz de vídeo il un tavolo delle Nazioni Unite. La Tabella creerà Automaticamente righe por ciascuno del vídeo Nella MATRICE Una causa del legame. Poi i etiqueta interni Sono binded al Nome, Descripción ecc campo dell'oggetto vídeo por visualizzare i dettagli Oggetto di OGNI.



Qui i foreach: vídeo Vienne utilizzato por legare la matrice per la tavolo. Un tr Creato Vienne por OGNI Elemento della matrice. All'interno Che ABBIAMO binded l'ISRC fonte immagine al img del tag src di attributo. ABBIAMO binded Nome del campo dell'oggetto Vídeo per il Naciones Unidas del tag testo di attributo e il campo disc di vista del Modello di testo attributo p etiqueta.

Aggiunta vídeo di Nazioni Unite per la matrice vídeo

Ho Creato ONU ingresso por ottenere il URL del video por AGGIUNGERE vídeo ONU.

Il Valore di QUESTO E ingresso Direttamente binded al campo videoURL di ViewModel e this campo verra utilizzato por invocare l'API di YouTube por ottenere i dettagli del vídeo en cui si fa clic sul Pulsante Aggiungi video.

Ho Agregado ONU Pulsante Che se cliccata AGGIUNGERE il vídeo alla matrice.

This immagine ha il Suo attributo clic binded ONU addVideo Funzione Una. Ogni volta che si fa clic sul Pulsante la Funzione addVideo Sarà Chiamato.

self.addVideo = function () {

var vidurl = this.videoUrl ();

indice var = vidurl.indexOf ("v ="); vidurl="http://gdata.youtube.com/feeds/api/videos/"+vidurl.substring(index+2)+"?v=2&alt=jsonc&callback=?";

$ GetJSON (vidurl, Funzione (Dati) {

var indice = data.data.player ["default"] indexOf ("y función.");

var url = data.data.player ["default"] substring (0, l'indice).;

self.videos.push (nuovo Video (data.data.title, data.data.description, url));

});

this.videoName ("");

this.videoUrl ("");

}

La Funzione addVideo sta prendendo il videoURL () del Modello di vista e chiamando il API di YouTube por ottenere i dettagli del video. Spingendo Poi sta i dettagli vídeo Ricevuti matrice Nella alla bien.

RIMOZIONE di video di Un matrice Dalla vídeo

Ho date Un Con legame vídeo OGNI por rimuovere il vídeo Dalla Lista.


Elimina |

Qui la clic attributo del Naciones Unidas etiqueta E Direttamente legato Una ANU Funzione removeVideo. Ogni volta che si fa clic la Funzione di Seguito Verra Chiamata.

self.removeVideo = function (Video) {

si (Video.playing ()! = "1")

{

self.videos.remove (Video);

}

altro

{

SI (self.videos (). == longitud 1)

{

self.videos.remove (self.videos () [0]);

ytplayer.stopVideo ();

}

altro

{

self.playNextVideo ();

self.videos.remove (Video);

}

}

}

Le FUNZIONI Che Controlla sí il video non e Il vídeo en Riproduzione Allora rimuove il vídeo direclt dall'elenco. E se il E vídeo il Corrente palying, Allora rimuove il vídeo e riproduce il vídeo successivo nell'elenco e se non ci Sono Altri Video nell'elenco DOPO la RIMOZIONE di Esso, Allora interrompe il giocatore.


RIMOZIONE di Tutti i vídeo Dalla matrice

Ho aggiunto ONU Pulsante por rimuovere Tutti i vídeo en volta sola Una.

L'attributo clic del Tasto E alla binded removeAll Funzione sotto.

self.removeAll = function () {

Lunghezza var = self.videos () di Lunghezza.;

for (var i = 0; i

{

self.videos.remove (self.videos () [0]);

ytplayer.stopVideo ();

}

}

La Funzione rimuove ciascuno dei vídeo dall'elenco e poi si ferma il giocatore.



Riproduzione di video di Dalla Un vídeo matrice

Ho aggiunto ONU enlace con el vídeo OGNI Che una volta cliccato giocherà Quel video.

Gioca |

Elimina |

Qui la clic attributo del Naciones Unidas etiqueta E alla binded playVideo Funzione sotto.

self.playVideo = function (Video) {

indice var = Video.urlof () indexOf ("v =".);

. var vidId = Video.urlof () substring (indice + 2);

ytplayer.loadVideoById (vidId, 0, "grande");

Lunghezza var = self.videos () di Lunghezza.;

for (var i = 0; i

{

self.videos () [i] .playing ("0");

}

Video.playing ("1");

}


La Funzione ottiene l'indice e l'URL del vídeo Richiesto da Riprodurre dal unen Dati. Poi utilizza l'API di YouTube por Riprodurre il video. E poi lo Stato di Change Riproduzione dell'Ultimo vídeo riprodotto ONU 0 e Cambia lo Stato di Riproduzione del attualmente vídeo en Riproduzione 1.


Successivo vídeo Riproduci vídeo matrice Dalla

Ho Creato ONU playNextVideo Funzione Che attraversa l'vídeo variedad e Trova il Che vídeo ja Lo stato di Gioco attuale vienen 1. Poi si va al Prossimo Elemento dell'array e lo invia venir entrada per la Funzione playVideo precedentemente descritta por riprodurlo.

self.playNextVideo = function () {

Lunghezza var = self.videos () di Lunghezza.;

var indice de vídeo = -1;

for (var i = 0; i

{

SI (self.videos () [i] .playing () == "1")

{

indice de vídeo = i;

}

}

si (indice de vídeo> = 0)

self.playVideo (self.videos () [(indice de vídeo + 1) di Lunghezza%]);

}



Guarda il precedente vídeo matrice Dalla

Ho Creato ONU playPreviousVideo Funzione Che attraversa l'vídeo variedad e Trova il Che vídeo ja Lo stato di Gioco attuale vienen 1. Poi si va alla voce precedente Nella matrice e lo invia venir entrada per la Funzione playVideo precedentemente descritta por riprodurlo.

self.playPreviousVideo = function () {

Lunghezza var = self.videos () di Lunghezza.;

var indice de vídeo = -1;

for (var i = 0; i

{

SI (self.videos () [i] .playing () == "1")

{

indice de vídeo = i;

}

}

si (indice de vídeo> 0)

self.playVideo (self.videos () [indice de vídeo-1]);

else if (indice de vídeo == 0)

self.playVideo (self.videos () [longitud-1]);

}


Impostazione della Modalità di Ripetizione

Ho aggiunto ONU Pulsante por impostare la Modalità di Ripetizione e spegnimento. Inizialmente si TROVA Nello Stato apagado. QUANDO l'utente si clicca su di Esso quindi Sarà SCEGLIERE TRA en el correo fuera de Miembros. EE.UU. immagini "repeaton.png" e "repeatoff.png" vienen por Fonti visualizzare lo stato.



Qui l'attributo src dell'Immagine, E Strettamente legato al campo di Ripetizione del ViewModel Che sia Contiene l'immagine di Repetir Encendido o Repeat Off. L'attributo clic E alla binded setRepeatMode Funzione sotto.

self.setRepeatMode = function () {

si (this.repeat () == "repeatoff.png")

{

this.repeat ("repeaton.png");

}

else if (this.repeat () == "repeaton.png")

{

this.repeat ("repeatoff.png");

}

}


La Funzione Controlla il Valore Corrente Nel campo di Ripetizione di ViewModel. Se è "repatoff.png" Allora passa UN "repeaton.png" e viceversa.


Controllo dello Stato di giocatore change to vídeo o ripeterlo

This e Una Funzione temporizador di javascript Che VERIFICA Lo stato Lettore vídeo DOPO Intervallo di 3 Secondi. Controlla Che il video di E finito o no. Quindi Esso Controlla il Valore del Campo di Ripetizione ViewModel por ottenere la Modalità di Ripetizione. Se la Modalità di Ripetizione E Attiva, Gioca di nuovo lo vídeo Stesso e se la Modalità di Ripetizione E spento Allora chiama la Funzione palyNextVideo Che ho descritto sopra.

La Funzione di also carica Lo stato attuale della lista de reproducción en la galleta de la ONU. La setCookie Funzione bien alla Ì.

setInterval (function () {

si (ytplayer.getPlayerState () == 0)

{

si (self.repeat () == "repeaton.png")

{

ytplayer.playVideo ();

}

altro

{

self.playNextVideo ();

}

}

setcookie ("Dati", ko.toJSON (self.videos ()));

}, 3000);

Lo spostamento Fino vídeo Di Nella ONU matrice vídeo

Ho aggiunto ONU enlace con el vídeo OGNI Che una volta il cliccato si muoverà vídeo Nella lista de reproducción.

Gioca |

Elimina |

Subir |

Qui l'attributo clic del Naciones Unidas etiqueta E Binded UN moveUp sotto qui Funzione

self.moveUp = function (Video) {

Lunghezza var = self.videos () di Lunghezza.;

var indice de vídeo = 0;

for (var i = 0; i

{

SI (self.videos () [i] == Video)

{

indice de vídeo = i;

}

}

si (indice de vídeo> 0)

{

previousName var = self.videos () [indice de vídeo-1] .name ();

var previousUrl = self.videos () [indice de vídeo-1] .urlof ();

var previousIsrc = self.videos () [indice de vídeo-1] .isrc ();

var previousDesc = self.videos () [indice de vídeo-1] .desc ();

var previousPlaying = self.videos () [indice de vídeo-1] .playing ();

self.videos () [indice de vídeo-1] .name (self.videos () [indice de vídeo] .name ());

self.videos () [indice de vídeo-1] .urlof (self.videos () [indice de vídeo] .urlof ());

self.videos () [indice de vídeo-1] .isrc (self.videos () [indice de vídeo] .isrc ());

self.videos () [indice de vídeo-1] .desc (self.videos () [indice de vídeo] .desc ());

self.videos () [indice de vídeo-1] .playing (self.videos () [indice de vídeo] .playing ());

self.videos () [indice de vídeo] .name (previousName);

self.videos () [indice de vídeo] .urlof (previousUrl);

self.videos () [] indice de vídeo .isrc (previousIsrc);

self.videos () [indice de vídeo] .desc (previousDesc);

self.videos () [indice de vídeo] .playing (previousPlaying);

}

}

La Funzione scorre l'vídeo variedad e Trova l'indice del Ricevuto vídeo dal legame.

Poi si Controlla sí il video non È già all'inizio della matrice. Poi Scambia Tutti i campi dell'elemento precedente vídeo con this vídeo Elemento in modo Che si muove lista de reproducción Nella.


Vídeo spostamento di ONU basso en matrice Nella vídeo

Ho aggiunto ONU enlace con el vídeo OGNI Che una volta cliccato si muoverà verso il basso il vídeo Nella lista de reproducción.

Gioca |

Elimina |

Subir |

Abbassare

Qui la clic attributo del Naciones Unidas etiqueta E alla Binded moveDown Funzione sotto

self.moveDown = function (Video) {

Lunghezza var = self.videos () di Lunghezza.;

var indice de vídeo = 0;

for (var i = 0; i

{

SI (self.videos () [i] == Video)

{

indice de vídeo = i;

}

}

si (indice de vídeo

{

var nextName = self.videos () [indice de vídeo + 1] .name ();

var nextUrl = self.videos () [indice de vídeo + 1] .urlof ();

var nextIsrc = self.videos () [indice de vídeo + 1] .isrc ();

var nextDesc = self.videos () [indice de vídeo + 1] .desc ();

var nextPlaying = self.videos () [indice de vídeo + 1] .playing ();

self.videos () [indice de video + 1] .name (self.videos () [indice de vídeo] .name ());

self.videos () [indice de vídeo + 1] .urlof (self.videos () [indice de vídeo] .urlof ());

self.videos () [indice de vídeo + 1] .isrc (self.videos () [indice de vídeo] .isrc ());

self.videos () [indice de vídeo + 1] .desc (self.videos () [indice de vídeo] .desc ());

self.videos () [indice de vídeo + 1] .playing (self.videos () [indice de vídeo] .playing ());

self.videos () [indice de vídeo] .name (nextName);

self.videos () [indice de vídeo] .urlof (nextUrl);

self.videos () [] indice de vídeo .isrc (nextIsrc);

self.videos () [indice de vídeo] .desc (nextDesc);

self.videos () [indice de vídeo] .playing (nextPlaying);

}

}

La Funzione scorre l'vídeo variedad e Trova l'indice del Ricevuto vídeo dal legame.

Poi si Controlla sí il video non È già alla matrice della bien. Poi Scambia Tutti i campi dell'elemento vídeo successivo con this vídeo Elemento in modo Che si muove verso il basso Nella lista de reproducción.

Documento Pronto Funzione

La Funzione Vienne richiamata Automaticamente Alla fine del caricamento della pagina.

Esso Controlla sí i galletas ha Dati di lista de reproducción precedentemente MODIFICATO. Se ha poi Caricati i Dati alla vídeo matrice in modo Che l'utente PUÒ iniziare paloma ha Lasciato Durante la SUA ultima visita.

$ (Document) .ready (function () {

var data = JSON.parse (GetCookie ("Dati"));

si (Dati! = Dati nula &&! = "")

{

self.videos.removeAll ();

Lunghezza var = data.length;

for (var i = 0; i <= Lunghezza; i ++) {

self.videos.push (video nuovo (Dati [i] .name, Dati i Dati [i] .desc, [i] .urlof));

};

}

});

}

Encuadernación Modello per l'interfaccia utente

ko.applyBindings (nuovo ViewModel ());


Impostazione e ricevendo IL Cookies

SetCookie Funzione (c_name, Valore)

{

exdays var = 1.000;

var EXDATE = new Date ();

exdate.setDate (exdate.getDate () + 1.000);

c_value var = escape (Valore) + ((exdays == null) "": ";? scade =" + exdate.toUTCString ());

document.cookie = c_name + "=" + c_value;

}

Funzione GetCookie (c_name)

{

var c_value = document.cookie;

c_start var = c_value.indexOf ("" + c_name + "=");

si (c_start == -1)

{

c_start = c_value.indexOf (c_name + "=");

}

si (c_start == -1)

{

c_value = null;

}

altro

{

c_start = c_value.indexOf ("=", c_start) + 1;

c_end var = c_value.indexOf (";", c_start);

si (c_end == -1)

{

c_end = c_value.length;

}

c_value = unescape (c_value.substring (c_start, c_end));

}

c_value ritorno;

}

Lista de reproducción Hacedor

  • Youtube Playlist Creador | Youtube repita
    ONU Modo Più Semplice por Creare lista de reproducción di Youtube Replayliste.com E in movimento. La lista de reproducción Sarà salvato Automaticamente Nella sessione e riaprirà da paloma lo scorso Lasciato il sito. Essa ha Anche la possibilita di ripetere video di YouTube

(0)
(0)

Commenti - 0

Non ci sono commenti

Aggiungi un commento

smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile
Caratteri rimanenti: 3000
captcha