在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;
}