mettere diversi poster all'inizio e alla fine del video html5 - javascript, jquery, html5

Posso implementare un poster all'inizio di un video usando poster="beginning.jpg", ma come mettere un'immagine diversa alla fine del video? l'immagine di esempio è come ending.jpg

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

qui è jsfiddle

risposte:

Innanzitutto aggiungi un ID al video.

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

Uso ended, play eventi, .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/