<video>タグ 自動再生 完全ガイド
<video>タグを使ってブラウザ上で動画ファイルを自動再生する方法について解説します。自動再生に関わる属性やブラウザのポリシー、そしてデバイス環境についても詳しく確認します。ウェブ開発者向けの完全ガイドとして、動画タグを使用した自動再生の実装方法とよく発生する問題の解決策を提示します。
<video>タグ自動再生に関するポリシー理解
HTML <video>タグを利用してブラウザで動画ファイルを自動再生することは非常に魅力的です。動画は画像ファイルでは表現できない多様な動的な視覚体験を提供します。動く画像と音声を通じて物語を伝え感情的なつながりを形成するだけでなく、比較的短時間で伝えられる有用な情報源も提供します。
しかし、動画のこうした魅力的な利点にもかかわらず、意図しない広告再生などによってユーザーに不快感を与える可能性があり、自動再生される動画はユーザーのデータ消費やネットワーク帯域の使用を招くことがあります。特にモバイル端末ではこのようなデータ消費がより大きな問題となり、パフォーマンスの低下を引き起こすこともあります。
そのため、GoogleのChromeやAppleのSafariなど、ほとんどのブラウザベンダー（ブラウザ製造会社）はユーザー体験の改善やデータ消費の削減を目的として動画の自動再生に関するポリシーを持っています。さらに、Appleのモバイルデバイスはバッテリー効率などの理由から動画の自動再生に関する独自のポリシーを採用しています。
こうした動画の自動再生に関するポリシーを理解していなければ、意図せず動画ファイルを自動再生できなくなることがあります。
そのため、動画の自動再生に関するポリシーを理解することは、HTML <video>タグを使用してブラウザ上で動画ファイルを自動再生する実装において必須の前提知識となります。
主要なブラウザベンダーの自動再生ポリシーは以下のリンクから確認できますので、ご参照ください。
上記の自動再生ポリシーを総合してまとめると、以下のようになります。
- ユーザー体験向上のため、動画はミュート状態である必要があります。
- ユーザー体験向上のため、全画面表示される動画プレーヤーは動作してはなりません。
- 自動再生はモバイルデバイスのデータ消費およびバッテリー消費が多いため、iPhoneまたはiPadの低電力モードでは動作しません。
これを踏まえて、HTML <video>タグを使ってブラウザ上で動画ファイルを自動再生する方法を次のセクションで解説します。
<video>タグを使ってブラウザ上で動画ファイルを自動再生する方法
主要なブラウザの互換性を考慮しました。重要なのはHTML <video>タグに必須の属性を設定することです。
自動再生のための必須属性
muted属性
動画を再生するときにミュートにする属性です。
autoplay属性
動画を自動再生する属性です。この属性があるからといってすべてのブラウザで動画が自動再生されるわけではありません。ブラウザベンダーの自動再生ポリシーに従います。
playsinline属性
動画が要素の再生領域内で「インライン」に再生される属性です。この属性がないからといって動画が必ず全画面モードで再生されるわけではありません。しかしiPhoneでは<video>再生開始時に全画面モードに切り替わります。モバイルデバイスでのみ適用される属性であり、Appleが考案しました。
それでも自動再生がされない場合は・・・
自動再生する動画をセクションなどの背景画像のように使用するには・・・
動画は画像ファイルでは実現できない多様な動的視覚体験を提供する利点があるため、特定の要素の背景画像のように背景動画として使用されることが多いです。
動画を背景として使用する場合、ほとんど繰り返し再生を行います。loop属性を追加すればよいです。
再生される動画ファイルは該当ファイルの固有の横縦比（アスペクト比）を考慮すること
<video>タグで再生される動画ファイルには固有の横縦比（アスペクト比）があります。このアスペクト比を考慮しないと<video>タグの領域に空白が発生することがあり、背景画像として活用する際には注意が必要です。
仕様書
| 仕様書 | |
|---|---|
<video>
|
HTML Standard #the-video-element |