在html5视频的开头和结尾放置不同的海报

Question

我可以使用poster="beginning.jpg"在视频开头实现海报，但如何在视频结尾处放置不同的图片？示例图像类似于ending.jpg

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

这里是jsfiddle

Answer 1

使用ended，play个事件，.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

首先在视频中添加ID。

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