SYNCER

SYNCER

GlobalEventHandlers.oncanplaythrough - 全編を通して再生できる状態になった時に発火

公開日:

GlobalEventHandlers.oncanplaythroughは、GlobalEventHandlersのイベントハンドラです。メディアプレーヤーが、全編を通してバッファリングせずに再生できる状態になった時に発火するイベントハンドラです。

概要

IDL

attribute EventHandler oncanplaythrough;

typedef EventHandlerNonNull? EventHandler;

[TreatNonObjectAsNull]
callback EventHandlerNonNull = any (Event event);

イベント

設定対象オブジェクト説明
HTMLMediaElementEventメディアプレーヤーが、全編を通してバッファリングせずに再生できる状態になった時にイベントが発生します。初回の読み込み時、再生位置を変更した時、再生が完了して再び再生を開始した時に発生します。内部的には、HTMLMediaElement.readyStateHAVE_ENOUGH_DATAになった時です。

脚注

?

nullable型。値がnullの場合があることを表します。

TreatNonObjectAsNull

属性に代入されるどの値もnullに変換されます。

any

型が決まっていません。

typedef

複数の名称を一括りにしたり、ある名称を意味が分かりやすくするために、別の名称を定義します。

仕様書

https://html.spec.whatwg.org/multipage/webappapis.html#globaleventhandlers

説明

イベントハンドラの設定例です。audio要素や、video要素に設定できます。

HTML

<video id="hoge" src="./video.mp4" controls></video>

JavaScript

// video要素を取得
var element = document.getElementById( "hoge" ) ;	// <video id="hoge" src="./video.mp4" controls></video>

// イベントの設定 (oncanplaythrough)
element.oncanplaythrough = function ( event ) {
	// ...
}

// イベントの設定 (addEventListener)
element.addEventListener( "canplaythrough", function ( event ) {
	// ...
} ) ;

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】GlobalEventHandlers.oncanplaythrough - 全編を通して再生できる状態になった時に発火</title>
		<link rel="canonical" href="https://syncer.jp/Web/API_Interface/Reference/IDL/GlobalEventHandlers/oncanplaythrough/">
		<style>
			body {
				background-color: #fff ;
			}

			.event {
				color: #333 ;
			}

			.event.object {
				color: #008000 ;
			}

			.event.undefined, .event.null {
				color: #666 ;
			}

			.event.string {
				color: #c00 ;
			}

			.event.number {
				color: #00c ;
			}

			.event.boolean {
				color: #c0c ;
			}

			.network {
				color: #008000 ;
			}

			.ready {
				color: #00c ;
			}

			.canplaythrough {
				color: red ;
			}
		</style>
	</head>
	<body>

<p>canplaythroughは全編通して再生できる状態になった時に発生します。</p>

<video id="hoge" controls>
	<source src="/video/dog.mp4" type="video/mp4">
</video>
<p>再生速度: <label><input name="rate" type="radio" value="1" checked>1.0</label> / <label><input name="rate" type="radio" value="2">2.0</label></p>
<p>ファイル: <label><input name="file" type="radio" value="dog.mp4" checked>柴犬</label> / <label><input name="file" type="radio" value="penguin.mp4">ペンギン</label></p>

<hr>

<pre>イベントの発生回数: <span id="count">0</span></pre>

<hr>

<pre><span id="interface"></span>
Event.type: <span class="event"></span>
Event.target: <span class="event"></span>
Event.currentTarget: <span class="event"></span>
Event.eventPhase: <span class="event"></span>
Event.cancelBubble: <span class="event"></span>
Event.bubbles: <span class="event"></span>
Event.cancelable: <span class="event"></span>
Event.defaultPrevented: <span class="event"></span>
Event.composed: <span class="event"></span>
Event.isTrusted: <span class="event"></span>
Event.timeStamp: <span class="event"></span></pre>

<hr>

<pre id="order"></pre>

<script>
// video要素を取得
var element = document.getElementById( "hoge" ) ;

// イベントの発生回数を管理
var count = 0 ;

// イベントの設定
element.oncanplaythrough = function ( event ) {
	// 発生回数のカウント
	document.getElementById( "count" ).textContent = ++count ;

	// 内容の確認
	document.getElementById( "interface" ).textContent = event ;
	console.log( event ) ;

	// プロパティの内容
	for ( var a=[ "type", "target", "currentTarget", "eventPhase", "cancelBubble", "bubbles", "cancelable", "defaultPrevented", "composed", "isTrusted", "timeStamp" ], b=document.getElementsByClassName( "event" ), quote, i=0, l=a.length; l>i; i++ ) {
		// プロパティの取得
		var result = event[ a[i] ] ;

		// HTMLの装飾
		quote = (typeof result === "string" ? '"' : "") ;
		b[i].className = "event " + ( result === null ? "null" : typeof result ) ;

		// 結果の確認
		b[i].textContent = quote + result + quote ;
	}
}

// イベントの順番を記録
for ( var a=[ "loadstart", "progress", "durationchange", "loadedmetadata", "loadeddata", "canplay", "canplaythrough", "seeking", "seeked", "seeked", "emptied", "pause", "ended", "play", "playing", "timeupdate", "ratechange", "stalled", "suspend", "waiting", "volumechange" ], b=document.getElementById( "order" ), c=[], d, i=0, l=a.length; l>i; i++ ) {
	element.addEventListener( a[i], function ( event ) {
		c.push( '<span class="' + event.type + '">' + event.type + '</span> / <span class="network">' + [ "NETWORK_EMPTY", "NETWORK_IDLE", "NETWORK_LOADING", "NETWORK_NO_SOURCE" ][ element.networkState ] + '</span> / <span class="ready">' + [ "HAVE_NOTHING", "HAVE_METADATA", "HAVE_CURRENT_DATA", "HAVE_FUTURE_DATA", "HAVE_ENOUGH_DATA" ][ element.readyState ] + '</span>' ) ;

		if ( !d ) {
			d = setTimeout( function () {
				for ( var l=c.length, i=l, s=""; (i-- && 51 > l-i); ) {
					s += "\n" + (i + 1) + ": " + c[i] ;
				}

				b.innerHTML = "イベントの順番 (種類 / networkState / readyState)" + s ;
				d = false ;
			}, 25 ) ;
		}
	} ) ;
}

// 再生速度の変更
for ( var a=document.getElementsByName( "rate" ), i=a.length; i--; ) {
	a[i].onchange = function () {
		if ( this.checked ) {
			element.playbackRate = Number( this.value ) ;
		}
	}
}

// メディアファイルの変更
for ( var a=document.getElementsByName( "file" ), i=a.length; i--; ) {
	a[i].onchange = function () {
		if ( this.checked ) {
			element.src = "/video/" + this.value ;
		}
	}
}
</script>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>

サポート状況

GlobalEventHandlers.oncanplaythroughのサポート状況です。

ブラウザサポート状況ブラウザサポート状況
ChromeSupportedFirefoxSupported 9+
EdgeSupportedInternet ExplorerSupported 9+
SafariSupportedOperaSupported 11.6+
iOS SafariSupportedAndroidSupported

Chrome

バージョンサポート状況公開時期シェア
57Supported2017年3月頃0.1%
56Supported2017年1月頃12.02%
55Supported2016年12月頃12.36%
54Supported2016年10月頃0.44%
53Supported2016年9月頃0.25%
52Supported2016年7月頃0.27%
51Supported2016年6月頃0.4%
50Supported2016年4月頃0.32%
49Supported2016年3月頃0.47%
48Supported2016年1月頃0.02%
47Supported2015年12月頃0.06%
46Supported2015年10月頃0.56%
45Supported2015年9月頃0.01%
44Supported2015年7月頃0.83%
43Supported2015年5月頃0.05%
42Supported2015年4月頃0.05%
41Supported2015年3月頃0.01%
40Supported2015年1月頃0.59%
39Supported2014年11月頃0.02%
38Supported2014年10月頃0.08%
37Supported2014年8月頃0.01%
36Supported2014年7月頃0.01%
35Supported2014年5月頃0.01%
34Supported2014年4月頃0.14%
33Supported2014年2月頃0.01%
32Supported2014年1月頃0%
31Supported2013年11月頃0.01%
30Supported2013年10月頃0.03%
29Supported2013年8月頃0%
28Supported2013年6月頃0.03%
27Supported2013年5月頃0.01%
26Supported2013年3月頃0%
25Supported2013年2月頃0%
24Supported2013年1月頃0%
23Supported2012年11月頃0%
22Supported2012年9月頃0%
21Supported2012年7月頃0%
20Supported2012年6月頃0%
19Supported2012年5月頃0%
18Supported2012年3月頃0.01%
17Supported2012年2月頃0.01%
16Supported2011年12月頃0%
15Supported2011年10月頃0%
14Supported2011年9月頃0%

Firefox

バージョンサポート状況公開時期シェア
52Supported2017年3月頃0.12%
51Supported2017年1月頃1.7%
50Supported2016年11月頃0.78%
49Supported2016年9月頃0.02%
48Supported2016年8月頃0.07%
47Supported2016年6月頃0.03%
46Supported2016年4月頃0.01%
45Supported2016年3月頃0.1%
44Supported2016年1月頃0.01%
43Supported2015年12月頃0.02%
42Supported2015年11月頃0.01%
41Supported2015年9月頃0%
40Supported2015年8月頃0.02%
39Supported2015年7月頃0.01%
38Supported2015年5月頃0.02%
37Supported2015年3月頃0%
36Supported2015年2月頃0.01%
35Supported2015年1月頃0%
34Supported2014年12月頃0.01%
33Supported2014年10月頃0%
32Supported2014年9月頃0%
31Supported2014年7月頃0.01%
30Supported2014年6月頃0%
29Supported2014年4月頃0%
28Supported2014年3月頃0.01%
27Supported2014年2月頃0%
26Supported2013年12月頃0%
25Supported2013年10月頃0%
24Supported2013年9月頃0%
23Supported2013年8月頃0%
22Supported2013年6月頃0%
21Supported2013年5月頃0%
20Supported2013年4月頃0%
19Supported2013年2月頃0%
18Supported2013年1月頃0%
17Supported2012年11月頃0%
16Supported2012年10月頃0%
15Supported2012年8月頃0%
14Supported2012年7月頃0%
13Supported2012年6月頃0%
12Supported2012年4月頃0%
11Supported2012年3月頃0%
10Supported2012年1月頃0%
9Supported2011年12月頃0%
8Not Supported2011年11月頃0%
7Not Supported2011年9月頃0%
6Not Supported2011年8月頃0%
5Not Supported2011年6月頃0%
4Not Supported2011年3月頃0%

Edge

バージョンサポート状況公開時期シェア
14Supported2016年2月頃1.05%
13Supported2015年9月頃0.08%

Internet Explorer

バージョンサポート状況公開時期シェア
11Supported2013年10月頃4.99%
10Supported2012年8月頃0.09%
9Supported2011年3月頃0.18%
8Not Supported2009年3月頃0.04%
7Not Supported2006年10月頃0.01%
6Not Supported2001年8月頃0%

Safari

バージョンサポート状況公開時期シェア
10Supported2016年10月頃0%
9.1Supported2015年9月頃0%
8.0Supported2014年10月頃0%
7.1Supported2013年10月頃0%
6.0Supported2012年7月頃0%
5.1Supported2011年7月頃0%
4Supported2009年6月頃0%

Opera

バージョンサポート状況公開時期シェア
43Supported2017年2月頃0.06%
42Supported2016年12月頃0.09%
41調査中…2016年10月頃0.01%
40Supported2016年9月頃0%
39Supported2016年8月頃0%
38調査中…2016年6月頃0%
37Supported2016年5月頃0.01%
36Supported2016年3月頃0.01%
35Supported2016年2月頃0%
34調査中…2015年12月頃0%
33調査中…2015年10月頃0%
32調査中…2015年9月頃0%
31調査中…2015年8月頃0%
30Supported2015年6月頃0%
29調査中…2015年4月頃0%
28Supported2015年3月頃0%
27Supported2015年1月頃0%
26調査中…2014年12月頃0%
25Supported2014年10月頃0%
24Supported2014年9月頃0%
23調査中…2014年7月頃0%
22Supported2014年6月頃0%
21Supported2014年5月頃0.01%
20Supported2014年3月頃0%
19Supported2014年1月頃0%
18Supported2013年11月頃0%
17調査中…2013年10月頃0%
16調査中…2013年8月頃0%
15Supported2013年7月頃0%
12Supported2012年6月頃0.02%
11.6Supported2011年12月頃0%
11.1Not Supported2011年4月頃0%

iOS Safari

バージョンサポート状況公開時期シェア
10.0Supported2016年9月頃39.65%
9.1Supported2015年9月頃5.39%
8.3Supported2014年9月頃1.03%
7.0Supported2013年9月頃0.24%
6.0Supported2012年9月頃0.05%
5.1Supported2011年10月頃0.03%

Android

バージョンサポート状況公開時期シェア
4.4Supported2013年10月頃0%
4.3Supported2013年7月頃0%
4.2Supported2013年3月頃0.03%
4.1Supported2012年12月頃0%
4.0Supported2012年6月頃1.61%
2.3Supported2011年10月頃0%