videoタグまとめ

らら
らら

はじめに

Youtubeの埋め込みがどうなるのかわからないので、とりあえず復習でしらべておく。。

2014年以降　IE9もmp4で再生可能になって、昔はchromeもogv、webm形式だったり面倒だったけど。その昔は。。mac mov windows aviとか・・

拡張子のmp4には種類に映像エンコードの種類がありどのブラウザーでも対応するにはMPEG-4、H.264／AVCする。

一昔前は、MPEG-4のコーデックでは再生するもの、しないものがあったりしたけど、Can I use.で調べるとMPEG-4で作成しても問題ないよう・・

拡張子がmp4でエンコードがMPEG4とかややこしいものもあるので注意が必要です。

無難なのは、昔から使えるH.264／AVCにしておけば問題ないかと。。最近のブラウザーだけとかであれば・・MPEG-4でいけそうです。

個人的には、下記をよく見ます・・・知ってるって・・・はい。。

Can I use.

https://caniuse.com/

MDN

https://developer.mozilla.org/ja/

https://developer.mozilla.org/en-US/

サーバーのhtaccessとか

AddType video/mp4 .mp4

タグサンプル


<video autoplay muted playsinline loop width="" height="">
	<source src="test.mp4" type="video/mp4">
<!-- 対応していない場合。ダミー画像か文章を書く-->
	<img src="xxx.jpg">
	<p>動画を使用できるブラウザで閲覧して下さい。</p>
</video>

タグの属性

src 動画ファイルのURLを指定する（ファイルが複数ある場合はで指定）
width 動画の幅
height 動画の高さ
poster 動画の再生前に表示するサムネイル画像のURLを指定する。動画がでかいと、黒画面の時間が長いのでそれまで表示させておくもの
controls 再生・一時停止・再生位置の移動・ボリュームなどの操作パネルを表示する。注意としてブラウザーによってコンテロール部分が異なるのでデザインと被ったり・・
autoplay ページを読み込んだ時点で、動画が自動再生される mutedと設定しないと再生されないので注意
muted 映像に含まれる音声の既定の設定を示します。この属性を設定すると、初期状態が消音になります。既定値は false であり、映像再生時に音声も再生することを表します。
preload （再生ボタンを押さずとも）ページを読み込んだ時点で、動画を裏側で読み込ませる
loop 指定された場合、ブラウザーは映像の末尾に達すると、自動的に先頭に戻ります

使用しそうなイベント

ended メディアの末尾に達したために再生完了
pause 再生が一時停止
play 再生開始
playing データがなくなったために一時停止または遅延した後で、再生の再開の準備完了
progress ブラウザーがリソースを読み込んでいる間に定期的に発生します

再生が完了したら。なんかする場合・・jqueryで・・


<script>
$(function () {
	var video = $("video").get(0);
	video.addEventListener("ended", function () {
		//終わったら閉じるとか...
	});
});
</script>

さいごに

・・・最近。。ネタ切れとか・・いわないで・・・メモです。

関連記事