在Safari上搜索“已结束”的中间视频的HTML5视频

Question

I'm using a <video> for a background hero video. It starts at 0:00. When it reaches the end of the 0:11 clip, it pops back to :02 and repeats from there. I've accomplished it with:

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

I'm only concerned with the desktop experience, since it swaps to a fallback image on tablet/mobile. This works with Chrome, Firefox, and even IE. Safari, however, repeats back from 0:00 instead of :02.

Putting the whole function on a button onclick instead of an addeventListener works. Reassigning currentTime doesn't appear to be the problem. I've tried putting the whole thing inside video.oncanplaythrough = function () { . I've tried changing the .addEventListener('ended') to $('video').on('ended',function(){ or video.onended = function () { .

It seems like .play() always sends you back to 0:00, except I can get it to work on('click') , so there's something up. Thanks for your help!

Answer 1

The play() function in Safari seems to reset the currentTime to zero.

If you play() the video and set the currentTime directly after that, it works like expected:

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