videoタグのあらゆる動画情報をJavaScriptで取得する方法
<nav>
<ol>
<li>メソッド
<ol>
<li><a href="#play0">動画を再生する</a>
<li><a href="#pause0">動画を一時停止する</a>
<li><a href="#load0">動画を再ロードする</a>
</ol>
<li>イベントハンドラ
<li>属性
<ol>
<li><a href="#src0">動画のURLを取得/指定する</a>
<li><a href="#currentSrc0">現在の動画のURLを取得する</a>
<li><a href="#crossOrigin0">認証情報の有無を取得/設定する</a>
<li><a href="#networkState0">動画の接続状況を取得する</a>
<li><a href="#preload0">プリロードの有無を取得/設定する</a>
<li><a href="#buffered0">動画のバッファ開始/終了位置を取得する</a>
<li><a href="#readyState0">動画の準備状況を取得する</a>
<li><a href="#seeking0">シークポインタの動きを取得する</a>
<li><a href="#currentTime0">現在の再生位置を取得/設定する</a>
<li><a href="#duration0">動画の長さを取得する</a>
<li><a href="#startDate0">動画の開始時刻を取得する</a>
<li><a href="#paused0">動画の一時停止を取得する</a>
<li><a href="#defaultPlaybackRate0">ロード前に動画の再生速度を取得/設定する</a>
<li><a href="#playbackRate0">ロード後に動画の再生速度を取得/変更する</a>
<li><a href="#played0">動画が再生された範囲を取得する</a>
<li><a href="#seekable0">シークバーの開始/終了位置を取得する</a>
<li><a href="#ended0">動画の再生終了フラグを取得する</a>
<li><a href="#autoplay0">自動再生の有無を取得/設定する</a>
<li><a href="#loop0">ループの有無を取得/設定する</a>
<li><a href="#controls0">コントロールバーの有無を取得/設定する</a>
<li><a href="#volume0">動画の音量を取得/設定する</a>
<li><a href="#muted0">ミュートの有無を取得/変更する</a>
<li><a href="#defaultMuted0">初期設定でのミュートの有無を取得/設定する</a>
</ol>
</ol>
</nav>
<a name="play0"></a>
<section>
<h2>動画を再生する</h2>
<p>再生ボタンをクリックすると動画が再生されます。
<pre class="brush:js; html-script:true;">
<video src="trip-with-dogs.mp4"></video>
<button>再生</button>
<script>
document.getElementsByTagName('button')[0].addEventListener('click', function(){
document.getElementsByTagName('video')[0].play();
});
</script>
</pre>
<p>「play()」の部分でvideoタグの動画を再生しています。
[sample url="2015/video-element-api/play" text="play.html"]
</section>
<a name="pause0"></a>
<section>
<h2>動画を一時停止する</h2>
<p>一時停止ボタンをクリックすると動画が一時停止されます。
<pre class="brush:js; html-script:true;">
<video src="trip-with-dogs.mp4" autoplay></video>
<button>一時停止</button>
<script>
document.getElementsByTagName('button')[0].addEventListener('click', function(){
document.getElementsByTagName('video')[0].pause();
});
</script>
</pre>
<p>「pause()」の部分でvideoタグの動画を一時停止しています。
[sample url="2015/video-element-api/pause" text="pause.html"]
</section>
<a name="load0"></a>
<section>
<h2>動画を再ロードする</h2>
<p>再ロードボタンをクリックすると動画が再度ロードされます。JavaScript等を使って動的に動画を読み込ませたいときに使います。
<pre class="brush:js; html-script:true;">
<video src="trip-with-dogs.mp4" autoplay></video>
<button>再ロード</button>
<script>
document.getElementsByTagName('button')[0].addEventListener('click', function(){
document.getElementsByTagName('video')[0].load();
});
</script>
</pre>
<p>「load()」の部分でvideoタグの動画を再度ロードしています。
[sample url="2015/video-element-api/load" text="load.html"]
</section>
<a name="src0"></a>
<section>
<h2>動画のURLを取得/指定する</h2>
<pre class="brush:js; html-script:true;">
<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>
</pre>
<p>this.srcの部分で動画のURLを取得しています。
[sample url="2015/video-element-api/src" text="src.html"]
</section>
<a name="currentSrc0"></a>
<section>
<h2>現在の動画のURLを取得する</h2>
<pre class="brush:js; html-script:true;">
<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>
</pre>
<p>this.currentSrcの部分で動画のURLを取得しています。
[sample url="2015/video-element-api/currentSrc" text="currentSrc.html"]
</section>
<a name="crossOrigin0"></a>
<section>
<h2>認証情報の有無を取得/設定する</h2>
<p>他のドメイン下に置かれている動画を指定する際に、より安全な接続を実装するときに使われますが、2015年月時点でサポートしているブラウザはありません。
<pre class="brush:js; html-script:true;">
<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>
</pre>
<p>this.crossOriginの部分で認証情報の有無を取得しています。取得される値の一覧を以下に掲載します。
<dl>
<dt>anonymous
<dd>デフォルト値。認証情報を必要としない。
<dt>use-credentials
<dd>SSL証明書やHTTP認証等のユーザー認証情報を使用する。
</dl>
[sample url="2015/video-element-api/crossOrigin" text="crossOrigin.html"]
</section>
<a name="networkState0"></a>
<section>
<h2>動画の接続状況を取得する</h2>
<p>初期化やロードなど、動画が再生できるようになるまでのプロセスを0~3で取得します。
<pre class="brush:js; html-script:true;">
<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>
</pre>
<p>上のサンプルは、「onloadstart」の時点(動画のロードが始まったとき)の動画の接続状況を取得しています。また「onloadeddata」とすれば違った結果が得られます。以下に取得した番号の意味を掲載します。
<dl>
<dt>0 = NETWORK_EMPTY
<dd>動画の初期化が行われていない。
<dt>1 = NETWORK_IDLE
<dd>動画のソースは見つかったが、接続できていない。
<dt>2 = NETWORK_LOADING
<dd>動画のロード中。
<dt>3 = NETWORK_NO_SOURCE
<dd>動画のソースが見つからない
</dl>
[sample url="2015/video-element-api/networkState" text="networkState.html"]
</section>
<a name="preload0"></a>
<section>
<h2>プリロードの有無を取得/設定する</h2>
<p>ページの読み込みと同時に、動画の読み込みも開始しているかをauto/noneで取得します。
<pre class="brush:js; html-script:true;">
<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>
</pre>
[sample url="2015/video-element-api/preload" text="preload.html"]
</section>
<a name="buffered0"></a>
<section>
<h2>動画のバッファ位置を取得する</h2>
<p>以下のサンプルは、0.5秒ごとにバッファ(ロード)完了位置を取得します。
<pre class="brush:js; html-script:true;">
<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>
</pre>
[sample url="2015/video-element-api/buffered" text="buffered.html"]
</section>
<a name="readyState0"></a>
<section>
<h2>動画の準備状況を取得する</h2>
<p>動画のメタ情報の読み込みや再生可能かどうかの判定を0~4で取得します。
<pre class="brush:js; html-script:true;">
<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>
</pre>
<p>以下に取得される番号の意味を掲載します。
<dl>
<dt>0 = HAVE_NOTHING
<dd>動画情報が無い、または動画の接続にまだ至っていない。
<dt>1 = HAVE_METADATA
<dd>動画のメタ情報の読み込み完了。
<dt>2 = HAVE_CURRENT_DATA
<dd>現在の再生位置のロードは完了したが、次のフレームまでは読み込んでいない。
<dt>3 = HAVE_FUTURE_DATA
<dd>字幕情報含め、次のフレームのロードが完了した。
<dt>4 = HAVE_ENOUGH_DATA
<dd>再生に必要な情報のロードが完了した。
</dl>
[sample url="2015/video-element-api/readyState" text="readyState.html"]
</section>
<a name="seeking0"></a>
<section>
<h2>シークポインタの動きを取得する</h2>
<p>ユーザーがシークポインタをドラッグしていればtrue、そうでなければfalseの値を取得します。
<pre class="brush:js; html-script:true;">
<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>
</pre>
[sample url="2015/video-element-api/seeking" text="seeking.html"]
</section>
<a name="currentTime0"></a>
<section>
<h2>現在の再生位置を取得/設定する</h2>
<p>以下のサンプルは、現在の動画の再生位置を取得します。
<pre class="brush:js; html-script:true;">
<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>
</pre>
<p>this.currentTimeの部分で現在の再生位置を取得しています。
[sample url="2015/video-element-api/currentTime" text="currentTime.html"]
</section>
<a name="duration0"></a>
<section>
<h2>動画の長さを取得する</h2>
<pre class="brush:js; html-script:true;">
<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>
</pre>
<p>this.durationの部分で動画の長さを取得しています。
[sample url="2015/video-element-api/duration" text="duration.html"]
</section>
<a name="startDate0"></a>
<section>
<h2>動画の開始時刻を取得する</h2>
<p>これは主にライブストリーミングで放送経過時間を求めるときに役立つプロパティとされていますが、2015年7月現在サポートしているブラウザはありません。
<pre class="brush:js; html-script:true;">
<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>
</pre>
<p>this.startDateの部分で再生開始時刻を取得しています。
[sample url="2015/video-element-api/startDate" text="startDate.html"]
</section>
<a name="paused0"></a>
<section>
<h2>動画の一時停止フラグを取得する</h2>
<p>以下のサンプルは、再生中はfalse、一時停止中はtrueを取得します。
<pre class="brush:js; html-script: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>
</pre>
<p>this.pausedで一時停止のフラグを取得しています。
[sample url="2015/video-element-api/paused" text="paused.html"]
</section>
<a name="defaultPlaybackRate0"></a>
<section>
<h2>ロード前に動画の再生速度を取得/設定する</h2>
<p>以下のサンプルは、動画の再生速度を3.0に設定してからロードを開始します。
<pre class="brush:js; html-script:true;">
<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>
</pre>
<p>7行目で再生速度を設定しています。「defaultPlaybackRate」は動画のロード前に設定しなければなりません。ロード後に再生速度を変更したい場合は下項の「playbackRate」を使います。
[sample url="2015/video-element-api/defaultPlaybackRate" text="defaultPlaybackRate.html"]
</section>
<a name="playbackRate0"></a>
<section>
<h2>ロード後に動画の再生速度を取得/変更する</h2>
<p>以下のサンプルは、1秒ごとに0.1ずつ再生速度が増加します。
<pre class="brush:js; html-script:true;">
<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>
</pre>
<p>「defaultPlaybackRate」と「defaultPlaybackRate」の違いに注意してください。
[sample url="2015/video-element-api/playbackRate" text="playbackRate.html"]
</section>
<a name="played0"></a>
<section>
<h2>動画が再生された範囲を取得する</h2>
<p>以下のサンプルは、ユーザーが動画を再生した範囲を表示します。
<pre class="brush:js; html-script:true;">
<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>
</pre>
<p>played.start(0)/played.end(0)でそれぞれの位置を取得しています。
[sample url="2015/video-element-api/played" text="played.html"]
</section>
<a name="seekable0"></a>
<section>
<h2>シークバーの開始/終了位置を取得する</h2>
<p>以下のサンプルは、シークバーの両端の時間をそれぞれ取得しています。
<pre class="brush:js; html-script:true;">
<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>
</pre>
<p>「seekable.start/end(0)」の部分で開始/終了時間を取得しています。
[sample url="2015/video-element-api/seekable" text="seekable.html"]
</section>
<a name="ended0"></a>
<section>
<h2>動画の再生終了フラグを取得する</h2>
<pre class="brush:js; html-script:true;">
<video src="trip-with-dogs.mp4" controls autoplay></video>
<script>
document.querySelector('video').onended = function(){
document.querySelector('span').innerText = this.ended;
}
</script>
</pre>
<p>「onended」でイベントを発生させ、this.endedでtrue/falseを取得しています。
[sample url="2015/video-element-api/ended" text="ended.html"]
</section>
<a name="autoplay0"></a>
<section>
<h2>自動再生の有無を取得/設定する</h2>
<pre class="brush:js; html-script:true;">
<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>
</pre>
<p>autoplayプロパティは、その動画が自動再生かどうかをtrue/falseで取得します。
[sample url="2015/video-element-api/autoplay" text="autoplay.html"]
</section>
<a name="loop0"></a>
<section>
<h2>ループの有無を取得/設定する</h2>
<pre class="brush:js; html-script:true;">
<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>
</pre>
<p>loopプロパティは、その動画がループ再生かどうかをtrue/falseで取得します。
[sample url="2015/video-element-api/loop" text="loop.html"]
</section>
<a name="controls0"></a>
<section>
<h2>コントロールバーの有無を取得/設定する</h2>
<pre class="brush:js; html-script:true;">
<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>
</pre>
<p>this.controlsで、動画のコントロールバーの有無をtrue/falseで取得します。
[sample url="2015/video-element-api/controls" text="controls.html"]
</section>
<a name="volume0"></a>
<section>
<h2>音量を取得/設定する</h2>
<pre class="brush:js; html-script:true;">
<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>
</pre>
<p>volume属性は、動画の音量を0~1の範囲で取得できます。
[sample url="2015/video-element-api/volume" text="volume.html"]
</section>
<a name="muted0"></a>
<section>
<h2>ミュートの有無を取得/変更する</h2>
<pre class="brush:js; html-script:true;">
<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>
</pre>
<p>muted属性は、動画がミュートであるかをtrue/falseで取得します。
[sample url="2015/video-element-api/muted" text="muted.html"]
</section>
<a name="defaultMuted0"></a>
<section>
<h2>初期設定でのミュートの有無を取得/設定する</h2>
<pre class="brush:js; html-script:true;">
<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>
</pre>
<p>defaultMuted属性は、動画の初期設定がミュートであるかをtrue/falseで取得します。
[sample url="2015/video-element-api/defaultMuted" text="defaultMuted.html"]
</section>
<section>
<h2>参考</h2>
<ul>
<li><a href="http://dev.w3.org/html5/spec-preview/media-elements.html" target="_blank">Media Elements API - W3C</a>
</ul>
</section>
執筆者Writer
AnTytle
コメントComment