在 Safari 上“结束”时寻找中间视频的 HTML5 视频

Question

我正在使用<video> 作为背景英雄视频。它从 0:00 开始。当它到达 0:11 剪辑的末尾时，它会弹回到 :02 并从那里重复。我已经完成了：

document.getElementById('bgvid').addEventListener('ended',repeatVid,false);
function repeatVid(e) {
  var mediaElement = document.getElementById('bgvid');
  mediaElement.currentTime = 2;
  mediaElement.play();
}

我只关心桌面体验，因为它会切换到平板电脑/移动设备上的后备图像。这适用于 Chrome、Firefox 甚至 IE。然而，Safari 从 0:00 而不是 :02 重复返回。

将整个功能放在按钮 onclick 上而不是 addeventListener 上是可行的。重新分配 currentTime 似乎不是问题。我试过把整个东西放在video.oncanplaythrough = function () { 里面。我尝试将.addEventListener('ended') 更改为$('video').on('ended',function(){ 或video.onended = function () {。

似乎 .play() 总是把你送回 0:00，除非我可以让它工作 on('click')，所以有些事情。感谢您的帮助！

Answer 1

Safari 中的play() 函数似乎将 currentTime 重置为零。

如果您play() 视频并在此之后直接设置 currentTime，它会像预期的那样工作：

document.getElementById('bgvid').addEventListener('ended',repeatVid,false);
function repeatVid(e) {
  var mediaElement = document.getElementById('bgvid');
  mediaElement.play();
  mediaElement.currentTime = 2;
}