HTML5 video要素とは？

HTML5の<video>要素は、動画再生を埋め込むための標準的なブラウザーコンポーネントです。1つ以上のソースファイルを指定でき、再生コントロール、キャプション、ポスター画像、アクセシビリティ用ラベルを提供します。

実際には、動画のマークアップでは用途に合った属性を組み合わせ、フォールバックテキストが意味のある内容になっていることを確認するのが主なポイントです。

ツールの説明

このツールは、source、poster、dimensions、preloadの動作、autoplay、loop、controlsなどの一般的な属性を含む、すぐにコピーできる<video>ブロックを生成します。また、ブラウザーでライブプレビューを表示します。

すべての属性名を暗記せずに、動画のマークアップをすばやく組み立てたい場合に便利です。

例

  • controlsとposter画像を設定した標準的な埋め込み動画
  • ループ再生するミュート済みの背景動画
  • カスタムフォールバックテキストを設定したレスポンシブなvideoタグ

機能

  • 多くの一般的なHTML5動画属性を1か所に集約
  • 未対応ブラウザー向けのフォールバックテキストを編集可能
  • 生成されたHTMLとサンドボックス化されたプレビューを並べて表示

動作の仕組み

このツールは、選択したオプションに基づいて<video>マークアップを作成し、可能な場合は同じソース設定を使用してプレビューを表示します。生成されたコードは、自分のページにコピーして使用することを想定しています。

プレビューでは、ブラウザーがメディアURLを読み込める必要があるため、再生できるかどうかはソース自体に依存します。