videoの使い方についてまとめ

videoの概要

videoは映像再生に対応するメディアプレイヤーを埋め込みます。ブラウザによってコーデックやフォーマットが異なるためsourceを用いて複数のフォーマットを指定することができます。

注意点

video要素は音声ファイルにも使用できますが、その場合はaudio要素を使用します。

videoのカテゴリー

videoに入れられるタグ一覧

タグ早見表

src属性がある場合:0個以上のtrack要素とそれに続くトランスペアレント要素(メディア要素を子孫に持つことはできない) src属性がない場合:0個以上のsource要素とそれに続くtrack要素とそれに続くトランスペアレント要素(メディア要素を子孫に持つことはできない)

入れられるタグのカテゴリー・モデル

videoに使える属性

属性とは<video> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

よく使うグローバル属性

id 概要 要素に対してID固有の識別名を付けることができます。
属性の値 英字から始まる英数字
class 概要 要素に対して分類名を付けることができます。
属性の値 英字から始まる英数字
style 概要 要素に対して直接スタイルを指定することができます。
属性の値 スタイルシートのコード

videoタグに使えるその他属性

autoplay 概要 データの読み込みが完了し再生可能な状態になると自動的に再生を開始します。ただし、ユーザーにとって不快となるよう場合は使用は避けるべきです。
属性の値 autoplay
controls 概要 再生、音量、シーク、ポーズの各機能を制御するコントロールを表示します。
属性の値 controls
loop 概要 ループ再生を指定できます。
属性の値 loop
preload 概要 ページ表示時にメディアリソースを事前ロードするか指定します。指定に従うかどうかはブラウザ側が決めます。autoplayが指定された場合は無視されます。
属性の値 auto(事前ロードする)、none(事前ロードしない)、metadata(メタデータのみを事前ロードする)
playsinline 概要 映像を再生エリア内で再生するかを指定します。
属性の値 playsinline
src 概要 埋め込む動画へのURLを指定します。省略可能です。埋め込む映像の指定にはvideo要素のブロック内でsourceを使用することもできます
属性の値 URL
height 概要 動画の表示領域の高さを指定します。
属性の値 ピクセル値(絶対値)で指定します。パーセント値は指定できません。
width 概要 動画の表示領域の横幅を指定します。
属性の値 ピクセル値(絶対値)で指定します。パーセント値は指定できません。
poster 概要 ブラウザが表示可能な形式のビデオが無い場合に表示する画像ファイルを指定します。
属性の値 URL
muted 概要 動画音声の初期状態が消音になります。
属性の値 muted
crossorigin 概要 CORS(Cross-Origin Resource Sharing)で使用される属性で、他のサイトのリソースにアクセスする際に、認証情報を使用するかどうかを指定します。
属性の値 anonymous(認証情報を使用しない)、use-credintials(認証情報を使用する)

スポンサードサーチ

videoの使い方



ブラウザ対応状況

ブラウザの対応(PC)
Chrome あり
Safari あり
Internet Explorer あり
Edge あり
Firefox あり
Opera あり
ブラウザの対応(SP)
Chrome あり
Safari あり
Samsung Internet あり

WORK REQUEST

CONTACT