HTML video：再生操作・自動再生・画面幅への対応とトラブル対処
HTML video はウェブページにビデオプレーヤーを埋め込みます。ファイルURLは src または子要素 source で設定し、ユーザーが再生・一時停止できるように controls を追加します。ブラウザのポリシーにより、自動再生が設定されていても自動再生がブロックされることがあります。
再生体験の属性を選択する
| 属性 | 目的 | 確認すべきこと |
|---|---|---|
controls |
ネイティブの再生コントロールを表示する | 通常のコンテンツ動画に提供する。その表示や利用可能なボタンはブラウザによって異なる。 |
muted |
ミュートで開始する | 自動再生で音が出ることは期待しない。ミュートにしても自動再生が保証されるわけではない。 |
autoplay、loop |
自動で開始し、終了後に繰り返す | 読者に再生を停止させ、動きが読書の妨げにならないか考慮する。 |
playsinline |
要素の位置内で再生を要求する | モバイルで便利ですが、すべてのデバイスで同一の表示動作が保証されるわけではありません。 |
poster |
再生前に表示する画像のURL | 動画URLではなく、アクセシブルな画像を使用してください。 |
preload |
プリロードするデータに関するヒント | noneはプリロードを行わないことを指定します。metadataは再生時間などの情報を要求します。autoはファイル全体でも読み込みを許可します。これはブラウザが無視する場合もあるヒントです。 |
controls、muted、autoplay、およびloopはブール属性です。これらの存在は有効化を意味するため、autoplay="false"では自動再生は無効になりません。オフにするには属性を削除します。自動再生を要求する場合はメディアの読み込みが必要なため、preload="none"だけではダウンロードを防ぐことはできません。
完全なビデオ例を実行する
このコードをvideo.htmlとして保存し、ブラウザで開きます。MDNのドキュメントで使用されている公開フラワーサンプルを読み込み、インターネット接続が必要です。独自のサービスの場合、使用権のあるビデオをホストし、URLを置き換えてください。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML動画の再生</title>
<style>
body { margin: 24px; font-family: sans-serif; }
video { display: block; width: 640px; max-width: 100%; height: auto; }
</style>
</head>
<body>
<h1>花の動画</h1>
<video id="flower" controls playsinline preload="metadata" aria-label="風に揺れる花の動画">
<source src="https://developer.mozilla.org/shared-assets/videos/flower.webm" type="video/webm">
<source src="https://developer.mozilla.org/shared-assets/videos/flower.mp4" type="video/mp4">
このブラウザはvideo要素に対応していません。
</video>
<p>場面の説明：花と周りの草が風に揺れています。</p>
<p><a href="https://developer.mozilla.org/shared-assets/videos/flower.mp4"
target="_blank" rel="noopener noreferrer">MP4動画ファイルを開く</a></p>
</body>
</html>- 再生ボタンのあるプレーヤーを確認して開始します。花が動き、再生位置が進むはずです。デフォルトの例には、自動再生やループ属性はありません。
- 再生を一時停止して動きを止めます。窓が狭い場合、プレーヤーはコンテンツの幅に収まるように縮小されるはずです。
- 繰り返しを比較するには、開くビデオタグに loop 属性だけを追加してファイルを再度開きます。再生が終了に達した後に開始位置に戻ることを確認し、その後属性を削除して元の動作に戻します。
source は、ブラウザがサポートする候補を選択できるようにファイル形式を提供します。同じビデオの実際の WebM および MP4 ファイルを用意してください。ファイル名の拡張子を変更しても形式は変換されません。再生は、MP4 などのコンテナ内で使用されるビデオおよびオーディオのコーデックにも依存します。
自動再生とモバイル画面サイズ
自動再生が必要な場合は、開くビデオタグに autoplay muted を追加して比較してください。playsinline と controls は保持してください。ユーザーの設定、節電ポリシー、サイトの操作履歴、またはその他のブラウザ規則により自動再生が拒否されることがあるため、再生ボタンは保持してください。
CSS の width: 640px は希望する表示幅であり、max-width: 100% は狭い親要素でのオーバーフローを制限します。height: auto はビデオのアスペクト比を保持します。固定比率のフレームを定義する場合、object-fit: contain は画面全体を保持し、cover はフレームを埋めるために一部の端を切り取ります。重要なコンテンツが見えるか確認してください。
再生のトラブルシューティングとアクセシビリティを確認する
- ファイルURL: 動画リンクを直接開き、ファイルが存在しログインなしで利用可能であることを確認してください。ローカルパスがサーバーパスと間違えられていないか、ファイル名の大文字小文字が一致しているかを確認してください。
- 形式とレスポンス: サーバーが正しい video/mp4 または video/webm MIME タイプを送信し、サポートされているコーデックを使用していることを確認してください。開発者ツールのネットワークパネルを使うと、失敗したリクエストやレスポンスヘッダーを確認するのに役立ちます。
- 自動再生: 再生ボタンを押すと動作する場合は、自動再生の制約とファイルの破損を区別してください。
- フォールバックガイダンス: ビデオ内のテキストは、要素をサポートしていないブラウザ向けです。最新のブラウザでは、読み込み失敗時にvideo内の代替文が自動的にエラー案内として表示されるわけではありません。したがって、この例では、ファイルリンクおよびシーンの説明をプレーヤーの外にも配置しています。
- 音声で話す内容がある動画には正確な字幕を付け、必要に応じて文字起こしを提供します。track要素とWebVTTファイルで字幕を関連付けます。視覚情報だけで伝わる重要な内容には、テキスト説明や音声解説も検討してください。
属性についてはMDNのビデオ参照を参照し、字幕ファイルについてはMDNのビデオキャプションガイドを参照してください。
