cómo destruir con éxito una MediaElementPlayer y crear uno nuevo

Question

Este es el escenario:

tengo una página que contiene un elemento video que está configurado con un video. La fuente de este video puede ser video HTML5 con múltiples fuentes (y respaldo de Flash) o un video de YouTube. Debajo hay varias imágenes que sirven como miniaturas de video, al hacer clic en una de ellas debe cargar el video correspondiente, al destruir MediaElementPlayer existente y crear una nueva en el mismo elemento video.

Esto crea el jugador inicial al cargar la página:

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

Y esto tiene la intención de cambiar el reproductor cuando se hace clic en una de las imágenes:

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

Pero no funciona. La función success nunca se ingresa (tampoco lo es error) y no parece ocurrir nada.

supongo que la biblioteca aún cree que existe o algo que el primer jugador, y han intentado varias cosas para tratar de decirle que este no es el caso, por ejemplo:

mejs.meIndex = 0 
mejs.players = [] 

Para ningún efecto y ajuste:

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

Sólo rompe cosas :)

puede alguien por ahí ayudar? Estoy seguro de que me falta algo simple aquí, así que estaría muy agradecido si alguien pudiera señalar qué. Gracias por adelantado.

Answer 1

Voy a responder a mi propia pregunta aquí por cualquier otra persona que podría tener el mismo problema y tropezar con esta entrada.

Resulta que lo que quiero hacer no es compatible con mi MediaElementJS en el momento de escribir esto.

Mi solución fue crear dos jugadores y usar uno para videos HTML5/Flash y el otro para videos de YouTube, mostrando y ocultando el apropiado según sea necesario.

Answer 2

Tuve el mismo problema y terminé almacenando la etiqueta de video original html antes de inicializar el video usando mediaelementplayer(). Cuando quiero cambiar el vídeo que jQuery ("padre") vacía() del elemento padre del video destruir los elementos mediaelementjs crearon, a continuación, restaurar el html video original y reinicializar usando:.

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

Me poco hacky pero hace el trabajo. ¿Me interesa saber si ha encontrado una mejor manera de hacerlo?

Answer 3

Creo que la mejor manera de cambiar el video actual que se reproduce es que MediaElementJS no es para destruirlo y volver a crearlo, sino para usar el atributo incorporado de "src" de video para cambiar la fuente.

El uso de la API MediaElementJS para acceder a este atributo "src" es la mejor manera de gestionar problemas de fuente cruzada entre navegadores (para el video de YouTube, por ejemplo, o la recuperación de Flash). Aquí está la manera que lo he hecho:

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

También he hecho de este código en un plugin MediaElementJS, hará un montón de cosas buenas alrededor como la gestión de lista de reproducción, botones Siguiente y Anterior, y un panel de lista de reproducción. Puede encontrar the pullRequest on github.

Aquí es un ejemplo de código para construir una lista de reproducción:

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"}, 
     ]); 
    } 
}); 

Entonces, cuando se hace clic en una miniatura:

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

Answer 4

Puede usar el método remove() de medialementjs, establecer el tipo y el atributo src de su elemento video y luego reinicializar mediaelementjs si el tipo de video ha cambiado.

Podría ser algo como esto:

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(); 
      } 
     }) 

    } 
} 

Si no lo hace sólo tienen mp4 y YouTube Puede agregar lógica adicional para reinicializar solamente cuando sea necesario. Funciona perfecto para mi

Answer 5

Si necesita cambiar diferentes tipos de video, necesita destruir el reproductor y crear uno nuevo.

para destruir el jugador:

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