Question

我正在使用Video.JS但最终不得不废弃它并使用纯HTML视频嵌入标记。有人可以帮助我使用JavaScript，当视频停止播放时，它会返回开始海报。我让它在Video.JS中工作，但无法找到标准HTML的正确代码。

这是当前的代码，我清除了JavaScript，因为它无论如何都没有用。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <video id="testimonials" width="448" height="336" controls preload="auto" poster="https://dl.dropboxusercontent.com/u/236154657/video-splash-image4.png"
data-setup='{"example_option":true}'>
    <source src="https://dl.dropboxusercontent.com/u/236154657/WK%20Life%20Coaching%20Video%2012.13.mp4" type='video/mp4'>
    </video>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">

  </script> 
  </body>
</html>

Answer 1

我能够找到的最简单的方法是重置ended事件上的视频源，使其返回到开头。处理它的另一种方法是在你换掉视频的时候有一个带有海报图像的div，但这更简单......

<script>
var vid=document.getElementById('testimonials');
vid.addEventListener("ended", resetVideo, false);

function resetVideo() {
    // resets the video element by resetting the source
    this.src = this.src
}
</script>

Answer 2

我对上述评论的反应：onended事件仅在视频播放器耗尽其内容后才会触发，然后变为黑色。所以在视频结尾和海报之间，我们看到一个黑色的闪烁。

为了防止闪烁，我只是将视频运行到接近尾声，然后调用.load()将播放器停放在海报上：

<video ontimeupdate="video_time_update(this)"
       poster="/ourMovie.png">
    <source src="/ourMovie.mp4" type="video/mp4">
</video>

...

function video_time_update(video) {
    if (video.currentTime > 3.3) {
        video.load();  /* parks the video back to its poster */
    }
}

请注意，我们知道我们的视频时长为3.4秒，我们不介意错过最后几帧。 video_time_update()是懒惰的，并不会要求每次打勾。

请注意，那些投放时间不详的视频的人可能需要this.duration而不是3.3。

Answer 3

请浏览以下链接并提供相关信息： Redirect html5 video after play

<script src="text/javascript">
// Do not name the function "play()"
function playVideo(){
var video = document.getElementById('video');
video.play();
video.addEventListener('ended',function(){
    window.location = 'http://www.google.com';
});
}
</script>
<video controls id="video" width="770" height="882" onclick="playVideo()">
<source src="video/Motion.mp4" type="video/mp4" />
</video>

希望这有帮助。

Answer 4

低于其工作率100％

<script type="text/javascript">
        function skip(value) {
            var video = document.getElementById("Video1");
            video.addEventListener("ended", resetVideo, false);
            video.currentTime = 0;
            video.currentTime += value;
            video.play();

    function resetVideo() {
        video.load();
    }
    }
    </script>

HTML5视频嵌入在播放结束时返回海报

4 个答案: