Question

“已结束”事件似乎不适用于循环视频（属性循环）。

 <video id="video-player" width="946" height="503" preload="auto" loop="loop"  poster="" autoplay="autoplay">
    <source src="video.mp4" type="video/mp4">
 </video>

我希望在视频播放第一次在循环中结束时触发事件。

我通过检查'timeupdate'上的currentTime == duration是否解决了这个问题：

        var video = $("#video-player");
        video.on('timeupdate', function(e) {
          if (this.currentTime > this.duration - 0.1) {
            ... do things when playback finished for the first time
          }
        })

你可以看到我正在检查

持续时间 - 0.1

这是因为currentTime似乎永远不会达到完整的持续时间值。在播放结束时和下一刻（重新开始循环时），currentTime为0（零）

有更好的方法吗？我知道我可以使用一些额外的js导致循环，并且可以使用'已结束'事件但在这种情况下需要循环属性

Answer 1

如果您的html元素有一个名为loop的属性，则必须将其删除。即使你写过类似<video loop="false">的内容。

<强>更新

如果元素上存在循环属性，则永远不会触发结束事件！我建议你手动循环播放视频并删除循环属性根据你的评论，你需要在第一次之后循环它。也许你可以这样做：

$("#video-player").each(function () {
  this.onended = function (e) {
    //Do whatever you want

    this.play();
  }
}

Answer 2

两个重点：

使用Vanillebärs的想法，但在第一个onended - 事件中添加您的loop - 属性，通过js
增加0.1值。 currentTime intervall是不规则的！它可能是，它不会在你的100ms内抛出。检查它是否适用于1.0（1秒）。但是如果你想确保视频真的到最后观看，你必须使用onended

如何在循环HTML5视频上复制'已结束'事件

2 个答案: