html5-video - 需要在视频结尾而不是开头的海报

Question

视频结束后，我目前拥有的将显示我的海报。但是，它也会显示在视频的开头（设置为自动播放）。我不想在视频的开头，只是在结尾。这就是我所拥有的。

<div id="wrapper">
<video id="example_vid" class="video-js vjs-default-skin" 
    controls preload="auto" poster="images/poster_test.png" 
width="780" height="439"
autoplay
data-setup='{"example_option": true}'>
<source src="videos/subaru.mp4" type='video/mp4' />  
<source src="videos/subaru.webm" type='video/webm' />
<source src="videos/subaru.ogv" type='video/ogg' />

</video>
</div>

…</p>

<script> 
 var vid = videojs("example_vid"); 
 vid.on("ended", function(){ 
 vid.posterImage.show(); 
 vid.currentTime(0); 
 }) 
</script>

Answer 1

尝试这个。它对我有用。

<script>
var vid = document.getElementById("myVideo"); 
vid.addEventListener('ended', function(){
    vid.poster = "images/poster_test.png";
    vid.src = "";
    vid.controls = false;
}); 
</script>

Answer 2

我没有对此进行测试，但我会尝试 1）从视频元素中取出海报属性，然后 2）通过脚本设置它结束。像这样

<script> 
 var vid = videojs("example_vid"); 
 vid.on("ended", function(){
   vid.poster("images/poster_test.png");
   vid.currentTime(0); 
 }) 
</script>