javascript - Safari 阻止视频上的 play() 尽管被点击事件调用

Question

我正在为 html5 元素创建一些自定义视频控件。我已将点击事件处理程序绑定(bind)到播放/暂停按钮，该按钮在相应视频上调用 .play() 。

根据我的研究，Safari 会阻止对 .play() 的调用，除非你在点击处理程序中，但是它会阻止我对 .play() 的调用，尽管我是从点击处理程序中触发它的，比如所以:

$('.video-container .play-pause').click(function(event){
    var $video = $(event.currentTarget).parent().find('video');
    if($video[0].paused)
      $video[0].play();
    else
      $video[0].pause();
});

错误:

Unhandled Promise Rejection: NotSupportedError (DOM Exception 9): The operation is not supported.

源自 $video[0].play();。

Safari 版本 11.0.1 (13604.3.5)

OSX High Sierra 10.13.1 (17B48)

有什么想法吗？

Answer 1

嗯。解决方案是为视频源使用绝对路径，而不是相对路径。

这是错误的:<video src="assets/vid.mp4"></video>

这是正确的:<video src="http://example.com/assets/vid.mp4"></video>