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

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

javascript html video

Javascript HTML5视频嵌入播放结束时返回海报,javascript,html,video,Javascript,Html,Video,我使用的是Video.JS，但最终不得不放弃它，使用纯HTML视频嵌入标记。有人能帮我使用JavaScript吗？当视频停止播放时，JavaScript将返回开始海报。我让它在Video.JS中工作，但找不到标准HTML的正确代码这是当前的代码，我清除了JavaScript，因为它无论如何都不工作 <!DOCTYPE html> <html> <head> </head> <body> <video id="

我使用的是Video.JS，但最终不得不放弃它，使用纯HTML视频嵌入标记。有人能帮我使用JavaScript吗？当视频停止播放时，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>

请使用相关信息浏览以下链接：


//不要将函数命名为“play（）”
函数playVideo（）{
var video=document.getElementById（'video'）；
video.play（）；
video.addEventListener（'end'，function（）{
window.location=http://www.google.com';
});
}

希望这能有所帮助。

我能找到的最简单的方法是在

结束

事件上重置视频源，使其返回开始。另一种处理方法是使用一个带有海报图像的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>


var vid=document.getElementById（‘证明’）；
vid.addEventListener（“结束”，重置视频，错误）；
函数resetVideo（）{
//通过重置源来重置视频元素
this.src=this.src
}

A根据我的上述评论：

oneded

事件只有在视频播放器耗尽其内容并变黑后才会触发。所以在视频的结尾和海报之间，我们看到一个黑色的闪烁

为了防止闪烁，我只需将视频运行到接近尾声的位置，然后调用

.load（）

将播放器放回海报上：

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

请注意，我们知道视频长度为3.4秒，我们不介意错过最后几帧

video\u time\u update（）

是惰性的，并且不会对每个刻度都调用

请注意，那些提供未知持续时间视频的人可能需要

这个。持续时间而不是3.3，在那里。
低于其工作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>


函数跳过（值）{
var video=document.getElementById（“Video1”）；
video.addEventListener（“结束”，重置视频，错误）；
video.currentTime=0；
video.currentTime+=值；
video.play（）；
函数resetVideo（）{
video.load（）；
}
}
@Katana314 lol，我删除了它，因为我之前的3个不同版本都与Video.JS有关，其中一些代码一开始就很糟糕。我已经为5行代码搜索了几个小时。我不需要你教训我。你是我在这里遇到的第一个态度自负而不是乐于助人的人。谢谢我会等其他人。@TheIsSign你找到解决方案了吗？谢谢@Jatin我在几个小时前找到了这篇文章，但这是指一个更复杂的请求，关于在主视频前后循环另一个视频。我只是在寻找一个简单的静态海报的回归。尽管如此，我还是很感激你的回应。这正是OP（和我）想要的。对我来说不起作用。将src
属性添加到视频元素，该元素不应该有属性。通过添加this.currentTime=0停止；这个。暂停（）帮助。这两个oneded=“this.src=this.src”
和this.currentTime=0；这个。暂停（）提供一个令人讨厌的闪烁，我们想修复它。我将插入ontimeupdate
，检测何时接近尾声，然后在那里插入pause（）
，除非有人有更好的想法，否则它也会损坏缓冲区。如果重新加载视频，任何试图访问缓冲区并更新缓冲区显示的代码都将中断。video.load（）是我一直在寻找的技巧，在视频部门启用冻结最后一帧的视频技巧之前，您只能使用此功能。技术要求。
function video_time_update(video) {
    if (video.currentTime > 3.3) {
        video.load();  /* parks the video back to its poster */
    }
}

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