gpt4 book ai didi

javascript - 播放完整的 HTML5 视频,然后循环播放其中的一部分

转载 作者:太空狗 更新时间:2023-10-29 13:14:52 27 4
gpt4 key购买 nike

我正在尝试完整播放一次 8.6 秒的视频,然后无限循环播放视频的一小部分,以保持视频永无止境的错觉。到目前为止,我已经研究了 media fragments URI , 和 ended视频的事件。在结束事件监听器中设置 currentTime 属性有效,但它会使视频“闪烁”。

目前,我正在使用 timeupdate 事件监听器来更改视频接近尾声的时间 [如下所示]

elem.addEventListener('timeupdate', function () {
if (elem.currentTime >= 8.5) {
elem.currentTime = 5;
elem.play();
}
}, false);

JSFiddle here

这也有效,但视频明显暂停,然后在 5 秒处重新开始。有没有更流畅的方式来播放一次视频然后循环播放一段视频?

最佳答案

您的代码没有问题,问题出在您的 MP4 文件上!尝试使用像这个小得多的视频 ( http://www.w3schools.com/tags/movie.mp4 ) 来确认问题不在于您的代码。

那么如何才能在视频文件很大的情况下获得相同的结果呢?您将需要两个视频文件:

  • video1 是主视频
  • video2 是循环播放的视频

请记住:HTML5 视频播放和循环播放大型视频文件没有问题,因此我们将使用此方法播放视频。

在下面的示例中,我们将播放第一个视频,当它结束时,我们将执行一个函数来隐藏视频 1,然后显示/播放视频 2。 (视频 2 已设置为循环播放)

不要忘记在头脑中加载 JQuery,否则这将无法工作。

<video id="video1" width="1080" height="568" poster="movie.png" autoplay onended="run()">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<object data="movie.mp4" width="1080" height="568">
<embed width="1080" height="568" src="movie.swf">
</object>
Optional test to be displayed if the browser doesn't support the video tag (HTML 5)
</video>


<video id="video2" width="1080" height="568" poster="loop.png" loop>
<source src="loop.webm" type="video/webm">
<source src="loop.ogg" type="video/ogg">
<source src="loop.mp4" type="video/mp4">
<object data="loop.mp4" width="1080" height="568">
<embed width="1080" height="568" src="loop.swf">
</object>
Optional test to be displayed if the browser doesn't support the video tag (HTML 5)
</video>


<script>
$( "#video2" ).hide();
function run(){
$( "#video1" ).hide();
$( "#video2" ).show();
document.getElementById("video2").play();
};
</script>

关于javascript - 播放完整的 HTML5 视频,然后循环播放其中的一部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21251979/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com