尽管从点击事件中调用，Safari 仍会阻止视频上的 play()

Posted 2023-02-19

技术标签:

【中文标题】尽管从点击事件中调用，Safari 仍会阻止视频上的 play()【英文标题】：Safari blocks play() on video despite being called from click event 【发布时间】：2018-04-27 09:24:50 【问题描述】：

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

有什么想法吗？

【问题讨论】：

您是否尝试将事件处理程序添加为 HTML 中的属性而不是通过 jQuery？例如，<html class="video-container play-pause" onclick="sameFunctionAsYourPreviousExample()"/> 感谢您的建议 - 刚刚尝试过，它会导致相同的错误消息。我使用的代码是：

window.main['play_pause_click'] = function(control)     console.log("Playing...");     $(control).parent().find('video')[0].play();   ;

和 onclick="window.main['play_pause_click'](this)" 【参考方案1】：

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

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

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

【讨论】：

除非您在主页上，否则您拥有的两个示例是不同的路径。src="assets/vid.mp4" 是相对于当前文档路径的，这意味着如果您在 http://example.com/page/ 上，源将尝试加载来自page/assets/vid.mp4。正确的src 应该是/assets/vid.mp4，因为前面的斜杠是相对于服务器根目录的。感谢您的建议，但是视频正在加载并且控件在 chrome 和 firefox 上正常工作，并且相关链接确实在主页上。【参考方案2】：

值得注意的是，每当您在 Safari 加载失败的视频上调用 .play() 时都会发生此错误。

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

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

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

【讨论】：

一定花了很长时间才弄明白！感谢发帖。【参考方案3】：

想通了，Mac 上的 Safari 需要服务器发送视频/mp4 的内容类型

当我尝试使用提供内容类型应用程序/mp4 的文档管理器中的直接链接时，这（仅）在 Safari 中不起作用。

【讨论】：

【参考方案4】：

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

这个问题对我没有帮助，但给了我这个想法：FFMPEG video conversion to MP4 works everywhere except in ios Safari/Chrome。