私は 13 秒のような短いビデオを含む HTML5 Web ページを作成しようとしています。このビデオのフラッシュ バージョンを 3 つの形式に変換しました。fireFogg を使用した .ogv、firefogg を使用した .webm、HandBrake アプリケーションを使用した .mp4 です。ページで使用した HTML スクリプトは次のとおりです。
<video width="800" height="640" loop preload="false" autoplay controls tabindex="0">
<source src="xmasvideo/video.mp4" type="video/mp4" />
<source src="xmasvideo/M&P-Xmas 2.ogv" type="video/ogv" />
<source type="video/webm" src="xmasvideo/M&P-Xmas.webm" />
</video>
ビデオはChromeとFirefoxでは正常に動作しますが、デスクトップのSafariでもiPhoneやiPadでもまったく動作しません。出力は単にビデオタグのコントロールを表示する空白ページですが、何も読み込まれません。
私が持っているSafariのバージョンはHTML5ビデオをサポートしています。
ベストアンサー1
iPhone や iPad などの Apple デバイスでも同じ問題が発生しましたが、低電力モードをオフにしたら解決しました。また、playsinline次のようにビデオ タグに属性を含める必要があります。
<video class="video-background" autoplay loop muted playsinline>
を含めた場合にのみ機能しましたplaysinline。