形式

<video>～</video>

サポート

LS / H5 / e9 / Ch1 / Fx3.5 / Sa3.1 / Op10.5

カテゴリ

フローコンテンツ

フレージングコンテンツ

エンベデッドコンテンツ

インタラクティブコンテンツ (controls 属性を持つ場合)

パルパブルコンテンツ

親要素

エンベデッドコンテンツ を子要素に持てるもの

子要素

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

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

タグの省略

開始タグ:必須 / 終了タグ:必須

属性

グローバル属性

src

crossorigin

poster

preload

autoplay

playsinline (HTML Living Standard)

loop

muted

controls

width

height

ビデオファイルを再生します。

<video>～</video> の間には、video未対応のブラウザに表示するメッセージを記述することができます。

ブラウザによってサポートするコーデックやフォーマットが異なるため、<source> を用いて複数のフォーマットを指定することも可能です。

グローバル属性

詳細は グローバル属性 を参照してください。

autoplay

LS/H5

自動的に再生を開始します。最近のブラウザでは音を鳴らすモードでは autoplay できなくなりました。muted で音無しで再生するか、play() を用いてユーザ操作によって再生を開始する必要があります。

controls

LS/H5

コントローラを表示します。

loop

LS/H5

ループ再生します。

preload=value

LS/H5

ページ表示時にメディアリソースを事前ロードするか指定します。指定に従うかどうかはブラウザの実装にまかされます。

auto

事前ロードする

none

事前ロードしない

metadata

メタデータのみを事前ロードする

autoplayが指定された場合は無視されます。

playsinline

LS

ビデオを要素のプレイバック領域にインラインで表示します。

src=url

LS/H5

メディアリソースのURLを指定します。

height=n

LS/H5

高さを指定します。

width=n

LS/H5

横幅を指定します。

poster=url

LS/H5

ブラウザが表示可能な形式のビデオが無い場合に表示する画像ファイルのURLを指定します。

muted

LS/H5

音をミュートします。

crossorigin=state

LS/H5

CORS(Cross-Origin Resource Sharing)で使用される属性で、他のサイトのリソースにアクセスする際に、認証情報を使用するかどうかを指定します。

anonymous

認証情報を使用しない

use-credintials

認証情報を使用する

mediagroup=name

[非推奨] H5-5

複数のメディアリソースをグルーピングする際のグループ名を指定します。HTML5 で定義されていましたが、HTML 5.1 で廃止されました。

<video src="sample.mp4" autoplay loop>
  <p>このブラウザは video に未対応です。</p>
</video>

MP4 に対応していないブラウザのために、WBEM 形式の動画も指定するには下記の様に記述します。

<video autoplay loop>
  <source src="sample.mp4" type="video/mp4">
  <source src="sample.webm" type="video/webm">
  <p>このブラウザは video に未対応です。</p>
</video>

よく利用されるのは MPEG-4(*.mp4, *.m4v) と WEBM(*.webm) です。

下記のライブラリを読み込むことで、IE8 を <video> タグに対応させることが可能です。

<!--[if lt IE 9]>
<script src="http://api.html5media.info/1.1.8/html5media.min.js"></script>
<![endif]-->

JavaScript から動画を一時停止、再開することができます。

<script>
function playVideo() {
    document.getElementById('v1').play();
}
function pauseVideo() {
    document.getElementById('v1').pause();
}
</script>
<video id="v1" autoplay loop>
  <source src="sample.mp4" type="video/mp4">
  <source src="sample.webm" type="video/webm">
</video>
<input type="button" onclick="playVideo()" value="PLAY">
<input type="button" onclick="pauseVideo()" value="PAUSE">

下記の様にして、動画が再生された時、一時停止された時、終了した時などにイベントハンドラを呼び出すことができます。

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
    var video = document.getElementById('v1');
    video.addEventListener("play", function() {
        alert("play");
    });
    video.addEventListener("pause", function() {
        alert("pause");
    });
    video.addEventListener("ended", function() {
        alert("ended");
    });
});
</script>

下記の様にして、動画の全体時間や現在の再生時間を得ることができます。

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
    var video = document.getElementById('v1');
    document.getElementById('v1').addEventListener("timeupdate", function() {
        $('#t1').text(video.currentTime + "/" + video.duration);
    });
});
</script>

• https://html.spec.whatwg.org/multipage/media.html#the-video-element
• https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#the-video-element
• https://developer.mozilla.org/ja/docs/Web/HTML/Element/video
• https://caniuse.com/#feat=video