video  new : 動画

カテゴリ

<video controls autoplay>
 <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
 Sorry, you can't show this movie.
</video>

説明

pictureと同様に、sourceを上から順にフォールダウンし、利用可能なものが無い場合は最後の透過的な要素を表示する。

今は既にライブラリが結構出回っていて、ブラウザのデフォルトの操作パネルではなく独自のパネルを使いたいとか、ブラウザ毎に違うのは嫌だとかの要件がある場合はhtml5 player javascript辺りで検索してみると良い。

自動再生(主にautoplay属性)について注意事項。今後は、Chrome 70以降でWAIの影響で、ユーザーによっては音声が再生されなくなる(初期がミュートになる)ので注意。音を鳴らすためにはユーザーのアクションが必要。

Safariではcontrols属性の指定が無いとまったく制御できず、自動再生も効かないため、巨大な動画ファイルを読み込むだけの無用の長物になってしまうので注意。

属性 属性値の見方

autoplay(真偽値)edgeiesafariios
再生可能になったら自動的に再生を開始する。
controls(真偽値)
再生、一時停止、音量調整、早送り等のコントローラを表示。
crossoriginanonymous|use-credentialsie
オリジンをまたいでリンク先リソースを取得する場合に、以下の通り情報を付与する。CORS
  • anonymous: HTTP Originヘッダー有り/CookieやBASIC認証情報等の信用情報無し
  • use-credentials: HTTP Originヘッダー有り/CookieやBASIC認証情報等の信用情報有り
  • 指定なし: HTTP Originヘッダー無し

他ドメインの画像を利用してcanvasに描画する場合、これをちゃんと設定しておかないと、描画したデータを取得できなくなる(ブラウザ画面上では見えるが、ファイルに保存したりできなくなる)。勝手に他所の動画を利用するな、という事なので、もちろん他所の側の設定も必要で、Access-Control-Allow-Origin HTTPヘッダーを適切に設定する。

disableRemotePlayback  未来(真偽値)
リモート再生を禁止し、UIを非表示にする。たぶんRemote Playback APIを禁止するという事。未調査。

仕様書内で唯一大文字を含む属性(そもそも属性名は大文字小文字を区別しないが)。

height[正の整数]|0
loop(真偽値)
ループ再生。
muted(真偽値)
ミュート。
playsinline  未来(真偽値)
動画をフルスクリーンではなく通常のサイズのプレイヤーで表示すべきとブラウザに伝える。フルスクリーンを禁止するわけではない。属性指定が無い=フルスクリーンで表示されるわけでもない。iOS版Safariだと動画再生時に勝手にフルスクリーンになる仕様になっているので、それを抑止する目的。ぶっちゃけiOS版Safari専用。
poster[URL]
利用可能な動画が無い時に表示される画像。「利用可能な動画が無い」というのは「まだダウンロード中で再生可能な状態じゃない」時も含まれるので、「ご利用可能な動画がありませんでした…」とか表示してしまうと何か違う感じになってしまうので注意。
preloadnone|metadata|autoandroid
ブラウザにプリロードに関するヒントを与える。autoplay属性の指定がある場合はそちらが優先される。
  • none: プリロードしない。
  • metadata: 動画の長さとかチャプターとかのメタデータ部分をプリロード。
  • auto: プリロード時点でファイル全体のダウンロードを開始。指定無しの場合はこれになる。
デフォルト値はブラウザの自由だが、metadataだとみんなハッピーだよねっていう緩めの書き方になっている。
src[URL]
width[正の整数]|0
mediagroup
HTML5で追加されたけど廃止された