English 中文 العربية 日本語 Português

<video>: VIDEO 要素

最終更新：2026-10-13

<video>VIDEO 要素

コントロール付きの動画プレイヤーを埋め込みます。ポスター画像や複数のソース形式に対応します。

カテゴリリンクとメディア
コンテンツモデル埋め込みコンテンツ
許可される親要素フローコンテンツを受け入れる要素
閉じタグ必要 </video> タグ
ステータス標準

📝 構文

<video controls>動画コンテンツ</video>

⚙️ 属性

この要素はグローバル属性に加え、以下の属性をサポートします：

属性値説明
srcVideo file URL.
controlsShows playback controls.
autoplayAuto-plays (usually needs muted).
loopLoops the video.
mutedStarts muted.
posterPoster image URL shown before playback.
widthDisplay width in pixels.
heightDisplay height in pixels.
preloadPreload hint: none/metadata/auto.
すべてのグローバル属性を見る → すべてのイベント属性を見る →

▶ サンプル

下のコードを編集して、playground でリアルタイム結果を確認：

▶ 試してみる

🌐 ブラウザサポート

ブラウザ ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
<video> ✓ v1 ✓ v12 ✓ v1 ✓ v1 ✓ v1
すべての主要ブラウザでサポート
ヒント： poster で再生前のカバー画像を設定します。モバイルの自動再生も通常 muted が必要です。

❓ よくある質問

Qvideo はどんな形式に対応していますか？どう選びますか？
A主流の3形式は、MP4（H.264+AAC）が対応率ほぼ100%、WebM（VP9）がオープンで無料、AV1 が新しい代わりに符号化効率が最高です。実務の選び方は、主形式に MP4 を必ず用意し、帯域を節約するために WebM/AV1 を複数の <source> で追加します。あとはブラウザが自動で最適なものを選びます。
Qvideo の poster 属性は何のためですか？
Aposter='cover.jpg' は、読み込み中や再生前に表示するカバー画像を設定します。poster がない場合、ブラウザは動画の最初のフレームを表示します（空白になるブラウザもあります）。カバー画像は体感的な読み込み速度も上げるので、統一的に設定するのがおすすめです。
Qvideo の自動再生にはどんな属性の組み合わせを使いますか？
A音付きの自動再生はブラウザに阻止されます。確実な組み合わせは <video autoplay muted loop playsinline> です。ミュートでループ、インライン再生（背景動画の定番構成）。音を出したいときは、ユーザーの最初の操作を待って muted を外してから再生します。
<source> <track> <audio>
今後さらにケーススタディを追加予定です。

📚 関連チュートリアル

HTML Media HTML iframes
HTML タグリファレンス
すべての HTML タグの構文・属性・例を確認できます。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%