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

Question

我正在为 html5 元素创建一些自定义视频控件。我已将点击事件处理程序绑定到 play/pause 按钮，该按钮在相应视频上调用 .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

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

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

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

Answer 2

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

另外一件有趣的事情是，Safari 需要 Web 服务器支持字节范围请求才能正确加载视频文件。请参阅此处的注释：

我最近在使用 php 命令行进程而不是 Apache 或 nginx 等专用网络服务器提供文件时遇到问题，无法弄清楚为什么视频在现场播放，但不是在我的开发环境中。

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

Answer 3

发现 Mac 上的 Safari 需要服务器发送 video/mp4

的内容类型

当我尝试使用文档管理器中的直接 link 时，它给出了内容类型 application/mp4，这（仅）在 Safari 中不起作用。

Answer 4

我有同样的问题。视频无法在 Safari 中播放。但显然，当我将不同的 mp4 文件放在同一个地方时，视频播放成功。我使用具有不同设置的 ffmpeg 工具来生成视频。

这个问题对我没有帮助，但给了我想法：。

简而言之，请确保您尝试过其他视频文件。

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

Safari blocks play() on video despite being called from click event

html

javascript

media

safari

video