videoタグとは?|サイトで動画ファイルを再生させてみよう

videoタグとは?|サイトで動画ファイルを再生させてみよう
リンゴ
博士、自作の動画をブログで紹介したいんですが、動画をブログに埋め込むことってできるんですか?
博士
<video>タグを使えば簡単に埋め込むことが可能じゃ。
今回は、<video>タグの使い方を詳しく解説しようかの。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<video>タグとは

 

<video>

対応ブラウザInternet Explorer / Firefox / Google Chrome / Safari / Opera
分類フロー・コンテンツ / フレージング・コンテンツ / エンベディッド・コンテンツ / controls属性がある場合:インタラクティブ・コンテンツ / パルパブル・コンテンツ
利用場所エンベディッド・コンテンツが期待される場所
内容src属性がある場合:0個以上のtrack要素に続き、トランスペアレント(ただし、この要素の中に別のvideo要素やaudio要素を入れることは不可) / src属性がない場合:0個以上のsource属性に続き、0個以上のtrack要素、その後トランスペアレント(ただし、この要素の中に別のvideo要素やaudio要素を入れることは不可)


 
 
<video>タグは、動画を再生する際に使用します。
<video>タグを使用することで、Flashなどのプラグインを使わずに動画を再生できるようになります。

また、video要素の中には、video要素に対応していない環境で表示させる代替コンテンツを入れることができます。
 
 

博士
動画が再生できない場合に表示されるテキストを入力しておこう。
 
 

src属性

動画ファイルのURLを指定します。
複数の動画ファイルを指定したい場合は、video要素のsrc属性ではなく、source要素のsrc属性を使用します。

 
 

スポンサーリンク

poster属性

動画が再生可能になるまでの間に表示させたい画像(ポスター・フレーム)のURLを指定します。
例えば、動画の開始画面の画像など、再生する動画がどのようなものかイメージできる画像を使用しましょう。

 
 

preload属性

動画データをあらかじめダウンロードするかどうかを指定します。
指定できる値は以下の通りです。
 

  • none
    動画が再生されるまで何もダウンロードしない
  •  

  • metadata
    メタデータ(動画のサイズ、トラックリスト、再生時間など)のみダウンロードする
  •  

  • auto
    動画データ全体をダウンロードする

 
 
値が空の場合は、「auto」として処理されます。

 
 
博士
ユーザーが動画を見る可能性が低い場合は、「preload=”none”」を指定しよう。
 
 

スポンサーリンク

autoplay属性

autoplay属性を指定すると、動画ファイルの再生準備が整い次第、自動的に再生が開始されるようになります。
この属性は、以下のいずれかの形式で指定します。

  • autoplay
  • auto=”autoplay”
  • autoplay=””
 
 
ただし、autoplay属性による自動再生機能は利用せず、ユーザーが自分で再生を始められるようにすることが推奨されています。
 
 

loop属性

loop属性を指定すると、動画がループ再生されるようになります。
この属性は、以下のいずれかの形式で指定します。

  • loop
  • loop=”loop”
  • loop=””
 
 

スポンサーリンク

muted属性

muted属性を指定すると、音声を出さずに動画が再生されるようになります。
この属性は、以下のいずれかの形式で指定します。

  • muted
  • muted=”muted”
  • muted=””
 
 

controls属性

controls属性を指定すると、動画の再生や停止などのコントロールが表示されるようになります。
この属性は、以下のいずれかの形式で指定します。

  • controls
  • controls=”controls”
  • controls=””
 
 
博士
コントロールの形状はブラウザによって異なるぞ。
 
 

スポンサーリンク

width / height属性

動画が表示される領域の横幅と高さをピクセルで指定します。
動画ファイルの縦横の比率と同じ比率で指定しましょう。
もし、比率が異なってしまうと、何もない領域ができてしまいます。

 
 
これらの属性が指定されていない場合は、動画ファイルの本来のサイズで表示されます。
 
 

使用例

 
 

表示例



 
 

スポンサーリンク

まとめ

動画を再生する際は、<video>タグを使用します。
 
 

博士
作成した動画を紹介するときなどに活用してみよう。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








videoタグとは?|サイトで動画ファイルを再生させてみよう