Putting verschiedene Poster am Anfang und Ende von html5 Video

Question

Ich kann ein Plakat am Anfang eines Videos mit poster="beginning.jpg" implementieren, aber wie ein anderes Bild am Ende des Videos zu setzen? Beispielbild ist wie ending.jpg

<video controls width="100%" poster="beginning.jpg" > 
    <source src="video.mp4" /> 
</video> 

hier ist jsfiddle

Answer 1

Verwenden ended, play Ereignisse, .load()

<video width="100%" controls poster="/image/src/"> 
    <source src="/video/src/" type="video/mp4" /> 
</video> 
<script> 
    var video = document.querySelector("video"); 
    video.onplay = function() { 
    this.setAttribute("poster", "") // remove `poster` image 
    video.onended = function(e) { 
    this.setAttribute("poster", "/new/image/src") // set new `poster` image 
    // call `.load()` 
    this.load(); 
    } 
</script> 

jsfiddle https://jsfiddle.net/ey4tfp30/4/

Answer 2

zunächst eine Id zu dem Video hinzufügen.

var video = document.getElementById('video'); 
var posterURL = 'end.jpg'; 

// Preload the end poster when the video starts to play 
video.addEventListener('play', function() { 
    var image = new Image(); 
    image.src = posterURL; 
}); 

// Set and display the end poster 
video.addEventListener('ended', function() { 
    video.poster = posterURL; 
    video.load(); 
});