HTMLで動画をWebページに埋め込みたい場合は、HTML5のvideoタグを利用するのが一般的です。しかし、動画が表示されても再生ボタンが出ない、黒い画面だけ表示される、音声が再生されないといったトラブルに遭遇することがあります。本記事では、HTML/CSSで音声付き動画を埋め込む基本的な方法から、再生ボタンが表示されない原因や対処法まで詳しく解説します。
HTML5のvideoタグで動画を埋め込む基本方法
HTML5ではvideoタグを使用することで、ブラウザ標準機能だけで動画を再生できます。MP4形式の動画であれば、多くのブラウザで利用可能です。
まずは以下のような基本的なコードを記述します。
<video controls width="640" height="360">
<source src="movie.mp4" type="video/mp4">
お使いのブラウザは動画再生に対応していません。
</video>このコードでは、動画ファイル「movie.mp4」を読み込み、再生ボタンや音量調整などのコントロールを表示します。
再生ボタンが表示されない主な原因
videoタグを設置しても再生ボタンが表示されない場合、最も多い原因はcontrols属性が設定されていないことです。
例えば次のコードでは再生ボタンが表示されません。
<video width="640" height="360">
<source src="movie.mp4" type="video/mp4">
</video>上記のようにcontrols属性がない場合、ブラウザ標準の操作パネルは表示されません。
再生ボタンを表示するには以下のようにcontrolsを追加してください。
<video controls width="640" height="360">
<source src="movie.mp4" type="video/mp4">
</video>黒い画面しか表示されない場合の確認ポイント
動画エリアが黒い背景だけになる場合は、動画ファイル自体が正常に読み込めていない可能性があります。
まず確認したいのがファイルパスです。
<source src="videos/movie.mp4" type="video/mp4">動画ファイルが指定した場所に存在しない場合、ブラウザは動画を読み込めません。
また、ファイル名の大文字・小文字の違いや拡張子の誤りもよくある原因です。サーバー環境によっては「Movie.mp4」と「movie.mp4」は別ファイルとして扱われます。
さらに、動画形式がブラウザ対応外である場合も再生できません。現在はMP4（H.264/AAC）が最も互換性の高い形式です。
音声付き動画を正しく再生するためのポイント
動画だけでなく音声も再生したい場合は、動画ファイル内に音声トラックが含まれている必要があります。
例えば動画編集ソフトで出力する際に音声を書き出していないと、映像だけ再生されて音が出ません。
一般的にはMP4形式で以下のような設定にすると幅広いブラウザで再生できます。
| 項目 | 推奨設定 |
|---|---|
| コンテナ形式 | MP4 |
| 映像コーデック | H.264 |
| 音声コーデック | AAC |
動画変換ツールや動画編集ソフトの出力設定で確認してみましょう。
CSSで動画サイズを調整する方法
動画をレスポンシブ対応したい場合はCSSで幅を調整できます。
video {
max-width: 100%;
height: auto;
}この設定を追加すると、親要素の幅に合わせて動画サイズが自動調整されます。
スマートフォンやタブレットでも見やすい動画表示が実現できます。
YouTube動画を埋め込む方法との違い
自作動画をサーバーにアップロードして配信する方法以外に、YouTubeへ動画を投稿して埋め込む方法もあります。
YouTubeの場合はiframeタグを利用します。
<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" allowfullscreen></iframe>サーバー容量や通信量を気にしたくない場合はYouTube埋め込みも有効な選択肢です。
まとめ
HTMLで音声付き動画を埋め込む場合はvideoタグを使用し、controls属性を設定することで再生ボタンを表示できます。
黒い画面しか表示されない場合は、動画ファイルのパス、ファイル形式、動画のエンコード設定などを確認することが重要です。
特にMP4（H.264/AAC）形式を使用し、controls属性を忘れず設定することで、多くの環境で安定した動画再生が可能になります。
コメント