web-dev-qa-db-ja.com

Safariがクリックイベントから呼び出されているにもかかわらず、ビデオのplay（）をブロックする

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）

何か案は？

javascripthtmlvideosafarimedia
9
Max Mumford

ええ。解決策は、相対パスではなく、ビデオソースの絶対パスを使用することでした。

これは間違っています： <video src="assets/vid.mp4"></video>

これは正しいです： <video src="http://example.com/assets/vid.mp4"></video>

4
Max Mumford

このエラーは、Safariがロードに失敗したビデオで.play()を呼び出すたびに発生することに注意してください。

Safariでは、ビデオファイルを正しくロードするために、バイト範囲のリクエストをサポートするようにWebサーバーに要求することも興味深い点です。ここのメモを参照してください： https://stackoverflow.com/a/36299252

私は最近、Apacheやnginxのような専用のWebサーバーではなく、phpコマンドラインプロセスからファイルを提供することに問題があり、ライブサイトでビデオが再生されている理由を理解できませんでしたが、私の開発環境ではできませんでした。

これをすばやく確認するには、アドレスバーから直接動画を読み込みます。ロードに失敗した場合、サーバーはバイト範囲リクエストをサポートしていない可能性があります。

1
lachie_h

Mac上のSafariはサーバーがcontent-typeのvideo/mp4を送信する必要があることを理解しました

コンテンツタイプapplication/mp4を提供するドキュメントマネージャーから直接リンクを使用しようとしたが、これはSafariでは（のみ）機能しませんでした。

0
Rauli Rajande