播放完整的HTML5视频，然后循环播放部分内容 [英] Play full HTML5 video and then loop a section of it

问题描述

我试图完全播放8.6秒的视频，然后无限循环一小部分视频，以保持视频永无止境的幻觉。到目前为止，我已经浏览了媒体片段URI < a>和结束活动的视频。在已结束的事件侦听器中设置currentTime属性，但它会使视频闪烁。

目前，我正在使用timeupdate事件侦听器来更改时间当视频接近结束时[如下所示]

  elem.addEventListener（'timeupdate'，function（）{$ b $ （elem.currentTime> = 8.5）{
 elem.currentTime = 5; 
 elem.play（）; 
} 
}，false）; 
  

JSFiddle 这里

这也适用，但视频在5秒钟重新启动之前明显暂停。有没有一种更流畅的播放视频的方式，然后循环播放一段视频？ 解决方案

你的代码很好，问题是是你的MP4文件！尝试使用像这样的小得多的视频（ http://www.w3schools.com/tags/movie .mp4 ）以确认问题不在您的代码中。

那么如何获得相同的结果，但使用大型视频文件？
您需要两个视频文件：

• video1是主要视频


• video2是循环视频

请记住：HTML5视频播放和循环大型视频文件没有问题，因此我们将使用此方法播放视频在下面的例子中，我们将播放第一个视频，当它结束时，我们将执行一个功能来隐藏video1，然后显示/播放video2。 （视频2已经设置为循环）

不要忘记在你的脑海中加载JQuery，否则这是行不通的。

 < video id =video1width =1080height =568poster =movie.pngautoplay onended =run（）> 
< source src =movie.webmtype =video / webm> 
< source src =movie.oggtype =video / ogg> 
< source src =movie.mp4type =video / mp4> 
< object data =movie.mp4width =1080height =568> 
< embed width =1080height =568src =movie.swf> 
< / object> 
如果浏览器不支持视频标签（HTML 5），则显示可选测试
< / video> 
 
 
< video id =video2width =1080height =568poster =loop.pngloop> 
< source src =loop.webmtype =video / webm> 
< source src =loop.oggtype =video / ogg> 
< source src =loop.mp4type =video / mp4> 
< object data =loop.mp4width =1080height =568> 
< embed width =1080height =568src =loop.swf> 
< / object> 
如果浏览器不支持视频标签（HTML 5），则显示可选测试
< / video> 
 
 
< script> 
 $（＃video2）.hide（）; 
函数run（）{
 $（＃video1）.hide（）; 
 $（＃video2）。show（）; 
 document.getElementById（video2）。play（）; 
}; 
< / script> 
  

I'm trying to play an 8.6 second video once completely, and then loop a small section of the video infinitely, to keep the illusion of a never-ending video. So far I've looked into the media fragments URI, and the ended event of the video. Setting the currentTime attribute in the ended event listener works, but it makes the video "blink".

At present, I'm using a timeupdate event listener to change the time when the video is approaching the end [shown below]

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

JSFiddle here

This works as well, but the video pauses visibly before restarting at 5 seconds. Is there a smoother way of playing the video once and then looping a segment of it?

解决方案

Your code is fine, the problem is with your MP4 file! Try using a much smaller video like this one ( http://www.w3schools.com/tags/movie.mp4 ) to confirm the issue is not with your code.

So how can you achieve the same result but with large videos files? You will need two video files:

• video1 is the main video
• video2 is the looping video

Remember: HTML5 video has no problem playing and looping large video files so we will use this method to play the videos.

In the example below we will play the first video and when it finishes we will execute a function to hide video1 and then show/play video2. (Video 2 is already set to loop)

Don't forget to load JQuery in your head otherwise this will not work.

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

这篇关于播放完整的HTML5视频，然后循环播放部分内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！