HTML5视频嵌入：播放结束后返回海报

Question

HTML5视频嵌入：播放结束后返回海报

7

我曾使用过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>

- Thesis

@Katana314 哈哈，我删掉了它，因为我之前有三个不同的变体与Video.JS相关，并且其中一些代码本来就很糟糕。我已经花了几个小时搜索这5行代码。我不需要你的讲座。你是我在这里遇到的第一个只会发表态度和自负而不是提供帮助的人。谢谢。我会等待其他人的帮助。 - Thesis

@ThesisDesign 你找到解决方案了吗？ - Llewellyn Collins

4个回答

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。

- Phlip

1

video.load() 是我正在寻找的技巧。 - Sonny

只有在您的视频部门开启冻结最后一帧的视频技巧之前，您才应该仅使用此功能。技术是义不容辞的。 - Phlip

0

以下是它的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>

- Datorproblem

0

请查看下面的链接，其中包含相关信息：播放 HTML5 视频后重定向。

<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>

希望这能有所帮助。

- Jatin

谢谢@Jatin，我几个小时前就找到了这篇文章，但它涉及到更复杂的请求，需要在主视频之前和之后循环另一个视频。我只是想要一个简单的返回静态海报。不过还是感谢你的回复。 - Thesis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Offbeatmammal · Accepted Answer

我能找到的最简单的方法是在“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>