videoタグを学ぶ

サンプル

//html<video

		id="video2"

		controls

		poster="image.jpg"

		preload="metadata"

	>

		<source src="sample.mp4" type="video/mp4"></source>

</video>



//js

const video = document.getElementById('video2');

video.addEventListener('canplaythrough', event => {console.log(event.type)})

video.addEventListener('complete', event => {console.log(event.type)})

video.addEventListener('durationchange', event => {console.log(event.type)})

video.addEventListener('emptied', event => {console.log(event.type)})

video.addEventListener('ended', event => {console.log(event.type)})

video.addEventListener('loadeddata', event => {console.log(event.type)})

video.addEventListener('loadedmetadata', event => {console.log(event.type)})

video.addEventListener('pause', event => {console.log(event.type)})

video.addEventListener('play', event => {console.log(event.type)})

video.addEventListener('playing', event => {console.log(event.type)})

video.addEventListener('progress', event => {console.log(event.type)})

video.addEventListener('ratechange', event => {console.log(event.type)})

video.addEventListener('seeked', event => {console.log(event.type)})

video.addEventListener('seeking', event => {console.log(event.type)})

video.addEventListener('stalled', event => {console.log(event.type)})

video.addEventListener('suspend', event => {console.log(event.type)})

video.addEventListener('timeupdate', event => {console.log(video.type)})

video.addEventListener('volumechange', event => {console.log(event.type)})

video.addEventListener('waiting', event => {console.log(event.type)})

結果

durationchange

loadedmetadata

progress

suspend

loadeddata

canplaythrough

play

playing

timeupdate

・

・

timeupdate

durationchange

timeupdate

・

・

timeupdate

pause

ended

htmlの解説

属性として与えることができるものは下記になる。

controls

これがないと再生できない。

autoplay

画面が表示されてから自動的に再生するか。

muted

音声を許可するか。chrome93ではこれがないとautoplayが機能しなかった。

loop

ループ再生するか。

controlslist

nodownloadはダウンロード項目を無効化する。

nofullscreenはフルスクリーン項目を無効化する。

noremoteplaybackは外部ディスプレイへの投影項目を無効化する。

disablePictureInPicture

ブラウザpipを無効化する。

disableRemotePlayback

外部ディスプレイへの投影項目を無効化する。controlslistのものとの関連性は不明。

currentTime

よくわからん。

playsinline

よくわからん。