1. ホーム
  2. html

[解決済み] Safari ブラウザで HTML ビデオが再生されない

2022-02-15 05:15:59

質問

以下のコードはMozilla & Chromeで問題なく動作しています。しかし、Safariでは動画が再生されません。

<video id="v-control" width="100%" autoplay="autoplay" loop>
    <source src="assets/img/web home page banner.mp4" type="video/mp4" 
    media="all and (max-width: 480px)">
    <source src="video-small.webm" type="video/webm" media="all and 
    (max-width: 480px)">
    <source src="assets/img/web home page banner.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
</video>

私が試したのは preload を追加した場合、ビデオタグに controls 再生ボタンをクリックしてください。ビデオにコントロールは必要ないので、コントロールを削除しています。

どのように解決するのですか?

Safariは(昨年から)オーディオトラック付きのビデオをデフォルトで自動再生しないようになりました。私が知る限りでは特に公表されていませんが、以下の変更の一部だと思われます。

<ブロッククオート

Safari 11では、Safariの新しい環境設定ペイン「ウェブサイト」を開くことで、ビデオとオーディオの自動再生を許可するウェブサイトをユーザーがコントロールできるようにもなりました。

( ソース )

この問題を解決するには、動画からオーディオトラックを削除するか、デフォルトでミュートにする必要があります。

<video id="v-control" width="100%" autoplay="autoplay" loop muted>

サーバーが要求者のブラウザを検出できる場合は、他のブラウザはそのままで、Safariだけに適用することができます。