【HTML Living Standard】video要素の使い方
video要素の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
videoオブジェクトは、HTML文書内に動画コンテンツを埋め込み、Webページ上で直接再生できるようにする機能を表すオブジェクトです。このvideo要素を使用することで、外部のプラグインに頼ることなく、MP4やWebMなどの形式の動画を簡単に表示できます。
動画ファイルへのパスはsrc属性で指定し、ユーザーが再生や一時停止、音量調整などを行える標準的な操作コントローラーを表示するにはcontrols属性を付与します。他にも、動画の読み込みが完了するまで表示するサムネイル画像を指定するposter属性や、動画の幅と高さをピクセル単位で設定するwidthおよびheight属性があります。
また、autoplay属性で自動再生を、loop属性で繰り返し再生を、muted属性でデフォルトで音声を消しておく設定が可能です。複数の動画フォーマットを提供したい場合は、video要素の内部に<source>要素を配置し、ブラウザがサポートする最適な形式を選択できるようにすることで、幅広い環境での再生互換性を高めることができます。
video要素は、現代のWebサイトにおいてリッチなマルチメディアコンテンツを提供する上で不可欠な要素であり、ユーザーエクスペリエンスの向上に大きく貢献します。主要なWebブラウザで広くサポートされており、Web標準に準拠した形で動画を埋め込むための標準的な方法として利用されています。
公式リファレンス: <video>: The Video Embed element
構文(syntax)
1<video src="video.mp4" controls> 2 お使いのブラウザは動画の再生に対応していません。 3</video>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません