Mediaelement.js: ¿cómo cambio la imagen del póster?

Question

Estoy tratando de cambiar las fuentes de video a través de JS. Eso funciona principalmente.

var basename = "video/whatever"; 
$("#myvideo")[0].setSrc([ 
    {type: "video/mp4", src: basename + ".mp4"}, 
    {type: "video/webm", src: basename + ".webm"}, 
    {type: "video/ogg", src: basename + ".ogv"} 
]); 

Así primer problema: cuando cambio las fuentes del botón de pausa muestra en lugar de juego y el botón grande juego de superposición no se muestra, a pesar de que está en pausa. He intentado enviar varias combinaciones de stop() y pausa() y setCurrentTime (0) antes y después de la llamada a setSrc pero sin suerte.

Problema más importante: no he encontrado una manera de cambiar la imagen de póster del video. Esperaba ver un método en la API para cambiarlo, ya que quiero que también se actualice para los retrocesos de Flash/Silverlight. Intenté simplemente cambiar el atributo poster en el elemento video, pero parece que no lo hace.

Answer 1

Sé que esto es una pregunta bastante antiguo pero pensé que iba a publicar la respuesta que trabajó para mí.

var basename = "video/whatever"; 
// Where videoPlayer is the video element. 
if(!videoPlayer.paused) { 
    videoPlayer.pause(); 
} 
setTimeout(function(){ 
    // Set poster image 
    $('.mejs-poster').empty().append('<img src="'+ basename + '.jpg"/>').show(); 

    // Set video source 
    videoPlayer.setSrc([ 
     {type: "video/mp4", src: basename + ".mp4"}, 
     {type: "video/webm", src: basename + ".webm"}, 
     {type: "video/ogg", src: basename + ".ogv"} 
    ]); 
}, 0); 

Aquí hay una buena explicación de lo que el setTimeout está haciendo: https://stackoverflow.com/a/779785/1425269.

Es posible que también necesite un poco de CSS para la imagen del póster, dependiendo del tema que esté utilizando.

.mejs-poster img { 
    padding: 0; 
    border: 0; 
    width: 100%; 
    height: auto; 
} 

Answer 2

Hmm, ya que esto todavía está abierto, sugiero tomar un enfoque diferente por completo.

• Configurar objetos de vídeo html 4 cada uno con los atributos que necesita
• el uso de JavaScript para cambiar los cuales uno es visible y reproducirlo

Espero que ayude!

Answer 3

Adopte un enfoque completamente diferente.

Enfoque 1:

<video controls="controls" id="Player" height="200" width="600"> 
<source src="video.mp4"> 
<object id="Player" height=200" width="600" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"> 
<!-- Windows Media Player Backup For IE --> 
<param name="Showcontrols" value="True"> 
<param name="URL" value="video.mp4"> 
<param name="AllowShuffle" value="Yes"> 
<param name="autoStart" value="True"> 
<param name="Volume" value="100"> 
<param name="EnableContextMenu" value="False"> 
<!-- For browsers that do not support HTML5 Video --> 
<embed src="video.mp4" autoplay="autoplay" controls="controls" height="200" width="600" id="Player"> 
</object> 
</video> 

(La etiqueta <object> es para decir, desde video HTML 5 no siempre represente correctamente, o, a veces no permite cambiar de fuente de vídeo de otro modo)

• Cambiar el código fuente en todos los navegadores (excepto IE, que no permite cambiar src de <video>, etc.) es acceder a document.getElementById("player").src="newvideo.mp4"

• Para Internet Explorer el código es: Player.url = "newvideo.mp4"

• El único navegador que puede proporcionar problemas adicionales es Safari.

Enfoque 2: (puede ser utilizado con jQuery también!)

• Coloque el video dentro de una etiqueta o <span id="myvideo2"><div id="myvideo2"> propia. Asegúrese de proporcionar una identificación, por ejemplo, "Myvideo2"
• Cambiar el innerHTML usando document.getElementById("myvideo2").innerHTML= /*Escaped Javascript for the HTML code for the video with new source"*/
• En caso de trabajar en todos los navegadores