MediaElement.js Cambiar fuente de video onclick

Question

En MediaElement.js estoy tratando de hacer un reproductor de video "multi". Más o menos voy a hacer que las miniaturas cambien el origen del video según en qué haga clic el usuario.

he hecho con éxito para la fuente HTML5 usando

<img src="http://mydomain.com/mysouceimage.jpg" style="width:100px; height:75px;" onclick="document.getElementsByTagName('video')[0].src = '/media/build/BTBW.m4v';" />

<img src="http://mydomain.com/mysouceimage-2.jpg" style="width:100px; height:75px;" onclick="document.getElementsByTagName('video')[0].src = '/media/build/myVideo-2.m4v';" />

pero esto sólo funciona para el reproductor HTML5 y no el flash caer de nuevo. Estoy usando la etiqueta de video básica y dejando que mediaelement.js haga el trabajo alternativo. Pensé que cambiar la fuente como en el ejemplo anterior funcionaría pero no es así.

Quiero que el video se detenga y cambiar al siguiente cuando se selecciona la siguiente imagen y viceversa con el respaldo del reproductor Flash.

Hay una forma fácil de hacerlo. No he visto demasiada documentación sobre cómo cambiar de forma dinámica los videos con las cosas de Mediaelement.js.

Cualquier sugerencia sería muy apreciada.

Answer 1

No puede simplemente cambiar la fuente del archivo de video. Tienes que eliminar el div de mejs, crear un nuevo video html5 y luego volver a llamar a mediaelement. Repitiendo este proceso, está generando un nuevo flashback con cada video, según sea necesario.

Answer 2

Si está utilizando el reproductor con la API, puede usar el método "setSrc".

Ejemplo:

<script> 
var player = new MediaElementPlayer('video', { 
    defaultVideoWidth: 960, 
    defaultVideoHeight: 410, 
    features: ['playpause', 'progress', 'current', 'duration', 'volume', 'fullscreen'], 
    success: function (mediaElement, domObject) {} 
}); 

// ... sometime later 

player.setSrc('urlToVid.mov'); 
player.play(); 
</script> 

Answer 3

que trabajó para mí para cargar el objeto de comunicación después de que el src había sido cambiado .. así:

var player = new MediaElementPlayer('#vid'/*, Options */);   

$('#the_url').on('keypress',function(e){  
    if (e.which == 13) { 
     player.pause(); 
     player.setSrc($('#the_url').val());   
     player.media.load(); 
    } 
}); 

Answer 4

Dado que esto ha tenido mucho tiempo para mí para averiguarlo, publicaré lo que he encontrado aquí. Utilicé el complemento MediaElementJS Wordpress. Para cambiar la fuente, se puede obtener una referencia al reproductor de medios elemento de la siguiente manera:

$('#wp_mep_1')[0].player.media 

La razón para hacer esto es porque en WordPress el plug-in no le otorga una variable para llamar a funciones como .load() o .play() en. Entonces, finalmente descubrí que era así como se podía obtener una referencia al reproductor insertado por el complemento.

Así que para cambiar el src:

var player = $('#wp_mep_1')[0].player.media; 
if(player.setSrc) 
    player.setSrc('xyz.mp4'); 

Answer 5

Viejo poste - pensé que podría añadir mi resolución

Nota: llamar load() también se auto-reproducir el vídeo. Este código también asume que su entrada ya tiene un valor, y es un elemento secundario de la etiqueta de anclaje que se hizo clic.

$('#idThatSwitches').click(function (e) { 
    // get youTubeId 
    var youTubeId = $(this).find('input[type="hidden"]').val(); 

    // switch out player's video source and reload 
    var player = $('#idOfYourPlayer')[0].player.media; 
    player.setSrc('http://youtube.com/watch?v=' + youTubeId); 
    player.load(); 
}); 

Answer 6

Voy a hacer mi turno para resucitar una vieja pregunta también.

No estoy seguro de si algo ha cambiado en el complemento MediaElement, pero ninguna de las soluciones anteriores funcionó para mí al 100%, algunas funcionaron parcialmente y algunas no funcionaron en absoluto. Algunos de los problemas que enfrenté fueron que solo podía cargar video en un elemento si no había un video anterior cargado y en reproducción, esto no era bueno para mí, ya que estaba destinado a ser utilizado como selector de lista de reproducción. El otro problema fue por cualquier razón que el video no se cargara completamente y simplemente se detuviera unos segundos.

Lo que sigue me funciona a partir de octubre de 15.

<a href="http://www.youtube.com/watch?v=VIDEO-ID" onclick=" 
    playerObject.pause(); 
    playerObject.setSrc(this.href); 
    playerObject.media.load(); 
    playerObject.load(); 
    return false 
"> 
<img src="yourimg"> 
</a> 

me gusta usar un taje para ayudarme con el formato de los objetos se puede hacer clic como este, también conserva abierta en las nuevas funciones de la ventana/pestaña.