Come distruggere con successo un MediaElementPlayer e creare una nuova

Question

Ecco lo scenario:

ho una pagina che contiene un elemento video che è impostato con un video. La fonte di questo video potrebbe essere un video HTML5 con più origini (e fallback Flash) o un video di YouTube. Sotto questo è un numero di immagini che servono come miniature video, facendo clic su uno si dovrebbe caricare il video appropriato, distruggendo il MediaElementPlayer esistente e creando uno nuovo sullo stesso elemento video.

Questo crea il giocatore iniziale al caricamento della pagina:

$('video').mediaelementplayer({ alwaysShowControls: true }); 

E questo è destinato a cambiare il giocatore quando una delle immagini si fa clic:

$('video').mediaelementplayer({ 
    alwaysShowControls: true, 
    success: function(media, dom, player) { 
     console.log('success!'); 
    }, 
    error: function() { 
     console.log('error!'); 
    } 
}); 

Ma non funziona. La funzione success non viene mai inserita (nessuno dei due è error) e non sembra che accada nulla.

Credo che la biblioteca pensa ancora che il giocatore originale esiste o qualcosa del genere, e hanno provato un certo numero di cose da provare e dirgli che questo non è il caso, ad esempio:

mejs.meIndex = 0 
mejs.players = [] 

A nessuno effetto, e l'impostazione:

window.mejs = null; 
window.MediaElementPlayer = null; 
window.MediaElement = null; 

Proprio rompe le cose :)

può qualcuno là fuori aiutare? Sono sicuro che mi manca qualcosa di semplice qui, quindi sarei molto grato se qualcuno potesse indicare cosa! Grazie in anticipo.

Answer 1

ho intenzione di rispondere alla mia domanda qui per chiunque altro che potrebbe avere lo stesso problema e inciampare in questa voce.

Si scopre che ciò che voglio fare non è supportato dal mio MediaElementJS al momento della stesura di questo.

La mia soluzione era creare due giocatori e usarne uno per i video HTML5/Flash e l'altro per i video di YouTube, mostrando e nascondendo quello appropriato come richiesto.

Answer 2

Ho avuto lo stesso problema e ho finito per memorizzare il tag video originale html prima di inizializzare il video usando mediaelementplayer(). Quando voglio cambiare il video che ho jQuery ("padre") empty() l'elemento principale del video distruggere gli elementi mediaelementjs creati, quindi ripristinare l'html video originale e reinizializzare utilizzando:.

$("#video").mediaelementplayer({ 
    pauseOtherPlayers: false 
}); 

ho morso hacky ma fa il lavoro. Sono interessato a sapere se hai trovato un modo migliore per farlo?

Answer 3

Penso che il modo migliore per cambiare il video corrente riprodotto sia MediaElementJS non è quello di distruggerlo e ricrearlo di nuovo, ma di utilizzare l'attributo "src" del video incorporato per cambiare la fonte.

L'utilizzo dell'API MediaElementJS per accedere a questo attributo "src" è il modo migliore per gestire i problemi cross-browser tra i sorgenti (per esempio per i video di YouTube o per il fallback Flash). Qui è il modo in cui l'ho fatto:

player.pause(); 
player.setSrc(myNewSourceURL); 
player.load(); 

Inoltre ho trasformato questo codice in un plugin MediaElementJS, sarà un sacco di cose belle intorno come la gestione playlist, successivo e pulsanti prev, e un pannello di playlist. È possibile trovare the pullRequest on github.

Ecco un esempio di codice per costruire una playlist:

new MediaElementPlayer('#myvideo', { 
    features : ['prev','playpause','next', 'progress'], 
    success : function(mediaElement, domObject){ 
     domObject.player.loadPlaylist([ 
      {src: "http://domain.com/video/video1.mp4"}, 
      {src: "http://domain.com/video/video2.mp4"}, 
      {src: "http://domain.com/video/video3.mp4"}, 
     ]); 
    } 
}); 

Poi, quando una miniatura si fa clic:

var index = 2; // calculate the item index in the playlist 
player.setItem(index); 

Answer 4

È possibile utilizzare il metodo remove() di medialementjs, impostare il tipo e l'attributo src dell'elemento video e quindi reinizializzare mediaelementjs se il tipo di video è stato modificato.

potrebbe somigliare a questo:

function setSource(url, type) { 
    var vid = $('#video').first(); 
    if (vid.attr('type') != type) { 
     vid.get(0).player.remove(); 
     vid.attr('type', type).attr('src', url); 
     vid.mediaelementplayer({ 
      success: function(media, dom, player) { 
       player.play(); 
      } 
     }) 

    } 
} 

Se non solo abbiamo mp4 e YouTube è possibile aggiungere ulteriore logica solo reinizializzare quando necessario. Funziona perfettamente per me.

Answer 5

Se è necessario cambiare diversi tipi di video src, è necessario distruggere il lettore e crearne uno nuovo.

di distruggere il giocatore:

try(){ 
    player.pause(); 
    player.remove(ture); 
} catch(err) { 
    console.log(err); 
}