video

<video> 要素は、ビデオやムービー、キャプションを含むオーディオファイルの再生に使用します。

<video> 要素に対応しているブラウザでは、要素の内容は表示されません。内容には、<video> 要素に対応していない古いブラウザのためのコンテンツを入れることができます。ただし、これはアクセシビリティの問題に対処するためのものではありません。この動画（またはオーディオ）コンテンツを部分的に視聴できないユーザーのために、<track> 要素を使って代わりのトラック（手話言語のトラックなど）を提供することもできます。これは、ビデオストリーム内またはmediagroup 属性、MediaControllerオブジェクトを使って、複数のメディア要素（video、audio）を同期させることによって行うことができます。また、WebVTTを使用して、ビデオの章のタイトルを表すこともできます。

カテゴリー
フロー・コンテンツ、パルパブル・コンテンツ、フレージング・コンテンツ、埋め込みコンテンツ、インタラクティブ・コンテンツ
配置場所
埋め込みコンテンツが置ける場所。
内容
src 属性がある場合は、0個以上の<track> 要素、それに続くメディア要素（audio、video）を除いた親要素に入れられる要素。src 属性がない場合は、0個以上の<source> 要素、または0個以上の<track> 要素、それに続くメディア要素を除いた親要素に入れられる要素。
属性
src="URL"
動画ファイルのURLを指定します。
crossorigin=""
動画ファイルが他のドメインに存在する場合にクロスドメイン通信を行うためのCORS（Cross-Origin Resource Sharing）リクエストの設定をします。 参考：http://www.w3.org/TR/html5/infrastructure.html#cors-settings-attribute
poster="URL"
ビデオ再生の前に表示するポスターフレーム（画像）のURLを指定します。
preload="auto|none|metadata"
プリロード、どの程度データのバッファリングの必要があるかのヒントをキーワードで指定します。指定できる値は以下3つのキーワードです。
auto（またはpreloadのみ）ファイル全体のダウンロードを始めるべきと指示します。
none再生を開始するなどコントロールをアクティブにするまではプリロードすべきでないと指示します。
metadataメタデータ（サイズ、最初のフレーム、トラックリスト、再生時間など）だけをプリフェッチし、ほかはコントロールをアクティブにするまではダウンロードすべきでないと指示します。
参考：https://www.w3.org/TR/2014/REC-html5-20141028/embedded-content-0.html#attr-media-preload
autoplay[="autoplay"]
ページがロードされると自動的に再生を開始します。
mediagroup="メディア要素のグループ名"
<mediagroup> 要素は、暗黙的にMediaController（メディア要素のコントローラ）を作成し、同じ値を持つ複数のメディア要素をリンクするために使用します。
loop[="loop"]
ループ再生されます。
muted[="muted"]
デフォルト状態でミュートに設定します。潜在的にユーザー設定をオーバーライドする可能性があります。
controls[="controls"]
再生・停止・音量などのコントローラを表示します。
width="幅"
動画の幅をピクセル数で指定します。
height="高さ"
動画の高さをピクセル数で指定します。
グローバル属性

accesskey, autocapitalize, autofocus, class, contenteditable, data-*, dir, draggable, enterkeyhint, hidden, id, inputmode, is, itemid, itemprop, itemref, itemscope, itemtype, lang, nonce, spellcheck, style, tabindex, title, translate

サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTML5 › video</title>
</head>
<body>
<h1>HTML5 › video</h1>


<video src="https://emwai.jp/files/reference/html5/iStock_000009283938PAL.mp4" preload autoplay loop controls width="480" height="360" id="mov"></video>

<p>
<span id="pause">停止</span> ｜
<span id="play">再生</span>
</p>

<script>
var mov = document.getElementById('mov');

document.getElementById('pause').addEventListener('click', function(){
  mov.pause();
});
document.getElementById('play').addEventListener('click', function(){
  mov.play();
});
</script>
</body>
</html>