Safari尽管单击事件被调用，但仍阻止了视频的play（）

Question

我正在为html5元素创建一些自定义视频控件。我已将click事件处理程序绑定到播放/暂停按钮，该按钮在相应视频上调用.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高山脉10.13.1（17B48）

有任何想法吗？

Answer 1

值得注意的是，每当您调用.play()Safari 加载失败的视频时，就会出现此错误。

其他有趣的事情是 Safari 要求 Web 服务器支持字节范围请求才能正确加载视频文件。请参阅此处的注释：https ://stackoverflow.com/a/36299252

最近，我在从 php 命令行进程而不是 Apache 或 nginx 等专用 Web 服务器提供文件时遇到了问题，并且无法弄清楚为什么视频在实时网站上播放，但在我的开发环境中却不能播放。

确定这一点的快速方法是直接从地址栏加载视频。如果加载失败，您的服务器可能不支持字节范围请求。

Answer 2

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

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

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