Question

我试图完全播放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秒暂停。是否有一种更流畅的方式播放视频，然后循环播放一段视频？

Answer 1

请尝试以下操作，一旦结束就“快退”：

vidElem.addEventListener("ended", function () {
        vidElem.currentTime = 2.5;
        vidElem.play();
}, false);

更新了小提琴：http://jsfiddle.net/Lt4n7/1/

Answer 2

我只需处理同样的问题，并注意到闪烁的相同问题。这是我的解决方案：

获取2个视频（或视频集） - 一个用于非循环部分，另一个用于循环部分
制作2个视频元素
将循环元素设置为＆＃39; display：none＆＃39;

然后只捕获已结束的事件并交换显示状态（示例使用jquery但您可以使用＆＃39; style.display =＆＃34; none / block＆＃34;＆＃39;同样容易：

VideoPlayer1 = document.getElementById('video1');
VideoPlayer2 = document.getElementById('video2');
VideoPlayer1.addEventListener('ended', videoLooper, false);

function videoLooper()
{
    VideoPlayer2.play();
    $(VideoPlayer2).show();
    $(VideoPlayer1).hide();
}

Answer 3

您的代码很好，问题出在您的MP4文件中！尝试使用像这样的小视频（http://www.w3schools.com/tags/movie.mp4）来确认问题与您的代码无关。

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

video1是主要视频
video2是循环视频

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

在下面的例子中，我们将播放第一个视频，当它完成时，我们将执行一个隐藏video1的功能，然后显示/播放video2。（视频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>

Answer 4

你无法在javascript中解决这个问题。您看到的延迟取决于视频压缩和硬件。

要在非0的时间开始播放，视频解码器必须返回并找到key frame，然后通过读取最后一个关键帧和您选择的时间之间的所有内容来构建当前帧。

我不是视频压缩方面的专家，但也许有一种方法可以选择这些关键帧并将它们准确放置在您需要的位置。不过，我认为这不会轻松顺利。

如果您正在寻找更简单的解决方案，请使用@Random's，但它会使用两个<video>标记来解决此限制。

Answer 5

var iterations = 1;
var flag = false;
document.getElementById('iteration').innerText = iterations;
var myVideo = document.getElementById('video-background');
myVideo.addEventListener('ended', function() {
  alert('end');
  if (iterations <
    2) {
    this.currentTime = 0;
    this.play();
    iterations++;
    document.getElementById('iteration').innerText = i terations;
  } else {
    flag = t rue;
    this.play();
  }
}, false);
myVideo.addEventListener('timeupdate', function() {
  if (flag == t rue) {
    console.log(this.currentTime);
    if (this.currentTime >
      5.5) {
      console.log(this.currentTime);
      this.pause();
    }
  }
}, false);

<div>Iteration: <span id="iteration"></span></div>

<video id="video-background" autoplay="" muted="" controls>
            <source src="https://res.cloudinary.com/video/upload/ac_none,q_60/bgvid.mp4" type="video/mp4">
    </video>
<div>Iteration: <span id="iteration"></span></div>

//请注意，视频元素中不应包含循环属性，以便'结束'事件在ie和firefox中工作

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

5 个答案: