videoタグ＝プラグイン不要の動画再生

`

YouTubeやVimeoなどの埋め込みとは異なり、自分のサーバーにある動画ファイルを直接再生できるため、広告なし・カスタマイズ自由な動画体験を提供できます。

重要な属性一覧

• controls: 再生/一時停止ボタン、シークバー、音量調節などのコントロールUIを表示します。ほぼ必須の属性です。
• autoplay: ページ読み込み時に自動再生します。ただし、多くのブラウザでは `muted` 属性と併用しないと動作しません（UX配慮のため）。
• loop: 動画が終わったら自動的に最初から再生し直します。背景動画などに便利です。
• muted: 音声をミュート状態で開始します。autoplayと組み合わせて使われることが多いです。
• poster: 動画が読み込まれる前に表示するサムネイル画像のURLを指定します。
• preload: `auto`（全体を先読み）、`metadata`（メタデータのみ）、`none`（読み込まない）から選択できます。

複数フォーマットへの対応

ブラウザによって対応している動画形式が異なります。そのため、` ` タグを使って複数のフォーマットを用意するのがベストプラクティスです。

パフォーマンスへの配慮

動画ファイルは非常に大きくなりがちです。以下の点に注意しましょう：

• 不必要に高解像度にしない（Web用なら720pや1080pで十分）
• 圧縮ツールを使ってファイルサイズを削減する
• autoplayを乱用しない（モバイル通信量への配慮）

まとめ

`