Safari尽管在点击事件中被调用，但仍阻止了视频上的play() [英] Safari blocks play() on video despite being called from click event

问题描述

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

I'm creating some custom video controls for an html5 element. I've bound a click event handler to a play/pause button which calls .play() on the corresponding video.

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

From my research, Safari will block calls to .play() unless you are in a click handler, however it is blocking my calls to .play() despite the fact that I am triggering it from within a click handler, like so:

$('.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)

Safari Version 11.0.1 (13604.3.5)

OSX High Sierra 10.13.1(17B48)

OSX High Sierra 10.13.1 (17B48)

有什么想法吗?

推荐答案

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

Eugh. The solution was to use an absolute path for the video source, not a relative one.

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

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

这篇关于Safari尽管在点击事件中被调用，但仍阻止了视频上的play()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！