• videoタグを使った埋め込み
• sourceタグを使った複数フォーマット対応
• iframeを使ったYouTube動画の埋め込み
• 動画のコントロールを追加する
• 自動再生の設定
• ループ再生の設定
• ミュート再生の設定
• 動画のサムネイルを設定する

videoタグを使った埋め込み

HTMLでは、<video> タグを使用して動画を埋め込むことができます。以下の基本的な例を見てみましょう。

<video src="video.mp4" width="640" height="360" controls></video>

このコードでは、ローカルにある video.mp4 を再生します。 controls 属性を追加することで、再生・停止ボタンや音量調節が可能になります。

sourceタグを使った複数フォーマット対応

異なるブラウザが異なる動画フォーマットをサポートしているため、<source> タグを使用して複数の動画フォーマットを指定することが推奨されます。

<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    お使いのブラウザは動画タグをサポートしていません。
</video>

このコードでは、ブラウザが対応するフォーマットを自動的に選択して再生します。

iframeを使ったYouTube動画の埋め込み

YouTubeやVimeoなどの動画を埋め込む場合、<iframe> タグを使用するのが一般的です。YouTubeの埋め込みコードの例を示します。

<iframe width="640" height="360" src="https://www.youtube.com/embed/動画ID" 
frameborder="0" allowfullscreen></iframe>

この方法では、動画をサーバーにアップロードする必要がなく、YouTubeのストリーミング機能を活用できます。

動画のコントロールを追加する

動画の再生・停止ボタンや音量調整機能をユーザーに提供するには、controls 属性を追加します。

<video src="video.mp4" width="640" height="360" controls></video>

これにより、ユーザーは動画を自由に操作できるようになります。

自動再生の設定

動画を自動再生させるには、autoplay 属性を追加します。

<video src="video.mp4" width="640" height="360" autoplay></video>

ただし、現在のブラウザでは自動再生の動作が制限されており、muted 属性と組み合わせる必要がある場合があります。

ループ再生の設定

動画を繰り返し再生するには、loop 属性を追加します。

<video src="video.mp4" width="640" height="360" loop controls></video>

これにより、動画が終わると自動的に最初から再生されます。

ミュート再生の設定

動画を無音で再生するには、muted 属性を追加します。

<video src="video.mp4" width="640" height="360" muted controls></video>

これは、特にautoplayと組み合わせる場合に有効です。

動画のサムネイルを設定する

動画のロード前に表示されるサムネイルを設定するには、poster 属性を使用します。

<video src="video.mp4" width="640" height="360" poster="thumbnail.jpg" controls></video>

これにより、再生ボタンを押す前にthumbnail.jpg が表示されます。