videoタグのあらゆる動画情報をJavaScriptで取得する方法

動画を再生する

再生ボタンをクリックすると動画が再生されます。

<video src="trip-with-dogs.mp4"></video>
<button>再生</button>

<script>
document.getElementsByTagName('button')[0].addEventListener('click', function(){
	document.getElementsByTagName('video')[0].play();
});
</script>

「play()」の部分でvideoタグの動画を再生しています。 [sample url="2015/video-element-api/play" text="play.html"]

動画を一時停止する

一時停止ボタンをクリックすると動画が一時停止されます。

<video src="trip-with-dogs.mp4" autoplay></video>
<button>一時停止</button>

<script>
document.getElementsByTagName('button')[0].addEventListener('click', function(){
	document.getElementsByTagName('video')[0].pause();
});
</script>

「pause()」の部分でvideoタグの動画を一時停止しています。 [sample url="2015/video-element-api/pause" text="pause.html"]

動画を再ロードする

再ロードボタンをクリックすると動画が再度ロードされます。JavaScript等を使って動的に動画を読み込ませたいときに使います。

<video src="trip-with-dogs.mp4" autoplay></video>
<button>再ロード</button>

<script>
document.getElementsByTagName('button')[0].addEventListener('click', function(){
	document.getElementsByTagName('video')[0].load();
});
</script>

「load()」の部分でvideoタグの動画を再度ロードしています。 [sample url="2015/video-element-api/load" text="load.html"]

動画のURLを取得/指定する

<h1>動画のURL：<span></span></h1>
<video src="trip-with-dogs.mp4" autoplay></video>

<script>
document.querySelector('video').onloadeddata = function(){
	document.querySelector('span').innerText = this.src;
}
</script>

this.srcの部分で動画のURLを取得しています。 [sample url="2015/video-element-api/src" text="src.html"]

現在の動画のURLを取得する

<h1>現在の動画のURL：<span></span></h1>
<video src="trip-with-dogs.mp4" autoplay></video>

<script>
document.querySelector('video').onloadeddata = function(){
	document.querySelector('span').innerText = this.currentSrc;
}
</script>

this.currentSrcの部分で動画のURLを取得しています。 [sample url="2015/video-element-api/currentSrc" text="currentSrc.html"]

認証情報の有無を取得/設定する

他のドメイン下に置かれている動画を指定する際に、より安全な接続を実装するときに使われますが、2015年月時点でサポートしているブラウザはありません。

<h1>CORSリクエスト：<span></span></h1>
<video src="trip-with-dogs.mp4" autoplay></video>

<script>
document.querySelector('video').onloadeddata = function(){
	document.querySelector('span').innerText = this.crossOrigin;
}
</script>

this.crossOriginの部分で認証情報の有無を取得しています。取得される値の一覧を以下に掲載します。

anonymous

デフォルト値。認証情報を必要としない。

use-credentials

SSL証明書やHTTP認証等のユーザー認証情報を使用する。

動画の接続状況を取得する

初期化やロードなど、動画が再生できるようになるまでのプロセスを0~3で取得します。

<h2>接続状況:<span></span></h2>
<video src="trip-with-dogs.mp4" controls autoplay></video>

<script>
document.querySelector('video').onloadstart = function(){
	document.querySelector('span').innerText = this.networkState;
}
</script>

上のサンプルは、「onloadstart」の時点(動画のロードが始まったとき)の動画の接続状況を取得しています。また「onloadeddata」とすれば違った結果が得られます。以下に取得した番号の意味を掲載します。

0 = NETWORK_EMPTY

動画の初期化が行われていない。

1 = NETWORK_IDLE

動画のソースは見つかったが、接続できていない。

2 = NETWORK_LOADING

動画のロード中。

3 = NETWORK_NO_SOURCE

動画のソースが見つからない

プリロードの有無を取得/設定する

ページの読み込みと同時に、動画の読み込みも開始しているかをauto/noneで取得します。

<h2>動画のプリロード:<span></span></h2>
<video src="trip-with-dogs.mp4" controls autoplay></video>

<script>
document.querySelector('video').onloadstart = function(){
	document.querySelector('span').innerText = this.preload;
}
</script>

動画のバッファ位置を取得する

以下のサンプルは、0.5秒ごとにバッファ(ロード)完了位置を取得します。

<video src="trip-with-dogs.mp4" controls autoplay></video>

<script>
var video = document.querySelector('video');
window.setInterval(function(){
	document.querySelectorAll('span')[0].innerText = video.buffered.start(0);
	document.querySelectorAll('span')[1].innerText = video.buffered.end(0);
}, 500);
</script>

動画の準備状況を取得する

動画のメタ情報の読み込みや再生可能かどうかの判定を0~4で取得します。

<h2>動画の準備状況:<span></span></h2>
<video src="trip-with-dogs.mp4" controls autoplay></video>

<script>
document.querySelector('video').onloadeddata = function(){
	document.querySelector('span').innerText = this.readyState;
}
</script>

以下に取得される番号の意味を掲載します。

0 = HAVE_NOTHING

動画情報が無い、または動画の接続にまだ至っていない。

1 = HAVE_METADATA

動画のメタ情報の読み込み完了。

2 = HAVE_CURRENT_DATA

現在の再生位置のロードは完了したが、次のフレームまでは読み込んでいない。

3 = HAVE_FUTURE_DATA

字幕情報含め、次のフレームのロードが完了した。

4 = HAVE_ENOUGH_DATA

再生に必要な情報のロードが完了した。

シークポインタの動きを取得する

ユーザーがシークポインタをドラッグしていればtrue、そうでなければfalseの値を取得します。

<h2>シークポインタのドラッグ:<span></span></h2>
<video src="trip-with-dogs.mp4" controls autoplay></video>

<script>
document.querySelector('video').onseeking = function(){
	document.querySelector('span').innerText = this.seeking;
}

document.querySelector('video').onseeked = function(){
	document.querySelector('span').innerText = this.seeking;
}
</script>

現在の再生位置を取得/設定する

以下のサンプルは、現在の動画の再生位置を取得します。

<h1>再生位置：<span></span>s</h1>
<video src="trip-with-dogs.mp4" autoplay></video>

<script>
document.getElementsByTagName('video')[0].addEventListener('timeupdate', function(){
	document.querySelector('span').innerText = this.currentTime;
});
</script>

this.currentTimeの部分で現在の再生位置を取得しています。 [sample url="2015/video-element-api/currentTime" text="currentTime.html"]

動画の長さを取得する

<h1>動画の長さ：<span></span>s</h1>
<video src="trip-with-dogs.mp4" autoplay></video>

<script>
document.getElementsByTagName('video')[0].addEventListener('durationchange', function(){
	document.querySelector('span').innerText = this.duration;
});
</script>

this.durationの部分で動画の長さを取得しています。 [sample url="2015/video-element-api/duration" text="duration.html"]

動画の開始時刻を取得する

これは主にライブストリーミングで放送経過時間を求めるときに役立つプロパティとされていますが、2015年7月現在サポートしているブラウザはありません。

<h1>動画の開始時刻：<span></span></h1>
<video src="trip-with-dogs.mp4" controls></video>

<script>
document.getElementsByTagName('video')[0].addEventListener('play', function(){
	document.querySelector('span').innerText = this.startDate;
});
</script>

this.startDateの部分で再生開始時刻を取得しています。 [sample url="2015/video-element-api/startDate" text="startDate.html"]

動画の一時停止フラグを取得する

以下のサンプルは、再生中はfalse、一時停止中はtrueを取得します。

<h1>一時停止：<span></span></h1>
<video src="trip-with-dogs.mp4" controls autoplay></video>

<script>
document.querySelector('video').onpause = function(){
	document.querySelector('span').innerText = this.paused;
}

document.querySelector('video').onplay = function(){
	document.querySelector('span').innerText = this.paused;
}
</script>

this.pausedで一時停止のフラグを取得しています。 [sample url="2015/video-element-api/paused" text="paused.html"]

ロード前に動画の再生速度を取得/設定する

以下のサンプルは、動画の再生速度を3.0に設定してからロードを開始します。

<video src="trip-with-dogs.mp4" controls preload="none"></video>

<script>
var video = document.querySelector('video');

window.onload = function(){
	video.defaultPlaybackRate = 3.0;
	video.load();
}
</script>

7行目で再生速度を設定しています。「defaultPlaybackRate」は動画のロード前に設定しなければなりません。ロード後に再生速度を変更したい場合は下項の「playbackRate」を使います。 [sample url="2015/video-element-api/defaultPlaybackRate" text="defaultPlaybackRate.html"]

ロード後に動画の再生速度を取得/変更する

以下のサンプルは、1秒ごとに0.1ずつ再生速度が増加します。

<video src="trip-with-dogs.mp4" controls autoplay></video>

<script>
var rate = 1.0;

setInterval(function(){
	rate = rate + 0.1;
	document.querySelector('video').playbackRate = rate;
}, 1000);
</script>

「defaultPlaybackRate」と「defaultPlaybackRate」の違いに注意してください。 [sample url="2015/video-element-api/playbackRate" text="playbackRate.html"]

動画が再生された範囲を取得する

以下のサンプルは、ユーザーが動画を再生した範囲を表示します。

<h1>再生開始位置：<span></span></h1>
<h1>再生終了位置：<span></span></h1>
<video src="trip-with-dogs.mp4" controls></video>

<script>
var video = document.querySelector('video');
video.ontimeupdate = function(){
	document.querySelectorAll('span')[0].innerText = video.played.start(0);
	document.querySelectorAll('span')[1].innerText = video.played.end(0);
}
</script>

played.start(0)/played.end(0)でそれぞれの位置を取得しています。 [sample url="2015/video-element-api/played" text="played.html"]

シークバーの開始/終了位置を取得する

以下のサンプルは、シークバーの両端の時間をそれぞれ取得しています。

<video src="trip-with-dogs.mp4" controls autoplay></video>

<script>
var video = document.querySelector('video');
video.onloadeddata = function(){
	document.querySelectorAll('span')[0].innerText = video.seekable.start(0);
	document.querySelectorAll('span')[1].innerText = video.seekable.end(0);
}
</script>

「seekable.start/end(0)」の部分で開始/終了時間を取得しています。 [sample url="2015/video-element-api/seekable" text="seekable.html"]

動画の再生終了フラグを取得する

<video src="trip-with-dogs.mp4" controls autoplay></video>

<script>
document.querySelector('video').onended = function(){
	document.querySelector('span').innerText = this.ended;
}
</script>

「onended」でイベントを発生させ、this.endedでtrue/falseを取得しています。 [sample url="2015/video-element-api/ended" text="ended.html"]

自動再生の有無を取得/設定する

<h2>自動再生:<span></span></h2>
<video src="trip-with-dogs.mp4" controls autoplay></video>

<script>
document.querySelector('video').onloadeddata = function(){
	document.querySelector('span').innerText = this.autoplay;
}
</script>

autoplayプロパティは、その動画が自動再生かどうかをtrue/falseで取得します。 [sample url="2015/video-element-api/autoplay" text="autoplay.html"]

ループの有無を取得/設定する

<h2>ループ:<span></span></h2>
<video src="trip-with-dogs.mp4" controls autoplay loop></video>

<script>
document.querySelector('video').onloadeddata = function(){
	document.querySelector('span').innerText = this.loop;
}
</script>

loopプロパティは、その動画がループ再生かどうかをtrue/falseで取得します。 [sample url="2015/video-element-api/loop" text="loop.html"]

コントロールバーの有無を取得/設定する

<h2>コントロールバー:<span></span></h2>
<video src="trip-with-dogs.mp4" controls></video>

<script>
document.querySelector('video').onloadeddata = function(){
	document.querySelector('span').innerText = this.controls;
}
</script>

this.controlsで、動画のコントロールバーの有無をtrue/falseで取得します。 [sample url="2015/video-element-api/controls" text="controls.html"]

音量を取得/設定する

<h2>音量:<span></span></h2>
<video src="trip-with-dogs.mp4" controls autoplay loop></video>

<script>
document.querySelector('video').onvolumechange = function(){
	document.querySelector('span').innerText = this.volume;
}
</script>

volume属性は、動画の音量を0~1の範囲で取得できます。 [sample url="2015/video-element-api/volume" text="volume.html"]

ミュートの有無を取得/変更する

<h2>ミュート:<span></span></h2>
<video src="trip-with-dogs.mp4" controls autoplay muted></video>

<script>
document.querySelector('video').onloadeddata = function(){
	document.querySelector('span').innerText = this.muted;
}
</script>

muted属性は、動画がミュートであるかをtrue/falseで取得します。 [sample url="2015/video-element-api/muted" text="muted.html"]

初期設定でのミュートの有無を取得/設定する

<h2><span></span></h2>
<video src="trip-with-dogs.mp4" controls autoplay muted></video>

<script>
document.querySelector('video').onloadeddata = function(){
	document.querySelector('span').innerText = this.defaultMuted;
}
</script>

defaultMuted属性は、動画の初期設定がミュートであるかをtrue/falseで取得します。 [sample url="2015/video-element-api/defaultMuted" text="defaultMuted.html"]

参考

• Media Elements API - W3C