Question

我为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）

有什么想法吗？

Answer 1

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

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

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

Answer 2

值得注意的是，只要您在Safari无法加载的视频上调用.play()，就会出现此错误。

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

我最近遇到了从php命令行进程而不是像Apache或nginx这样的专用Web服务器提供文件的问题，并且无法解决为什么视频在实际站点上播放，而不是在我的开发环境中。< / p>

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

Answer 3

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

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

Answer 4

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

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

简而言之，请确保您尝试过的视频文件不是您现在正在尝试的。

尽管从点击事件中调用，Safari仍阻止播放视频（）

4 个答案: