SYNCERのロゴ
アイキャッチ画像

GlobalEventHandlers.oncanplay - 再生準備ができた時に発火するイベント

oncanplayは、GlobalEventHandlersのイベントです。再生準備ができた時にcanplayイベントが発生し、ここに設定したコールバック関数が呼び出されます。

概要

名前
oncanplay
所属
GlobalEventHandlers
イベント
canplay
IDL
attribute EventHandler oncanplay;

typedef EventHandlerNonNull? EventHandler;

callback EventHandlerNonNull = any (Event event);
仕様書
https://html.spec.whatwg.org/multipage/webappapis.html#handler-oncanplay

説明

メディアプレーヤー(HTMLMediaElement)の再生準備ができたタイミングでイベントが発生します。初回の読み込み時、再生位置を変更した時、再生が完了して再び再生を開始した時です。

内部的には、HTMLMediaElement.readyStateの値がHTMLMediaElement.HAVE_FUTURE_DATA以上になった時です。

チュートリアル

oncanplayでイベントを設定する例です。

<video id="hoge" controls>
	<source src="./movie.mp4" type="video/mp4">
</video>
var element = document.getElementById( "hoge" ) ;

element.oncanplay = function ( event ) {
	console.log( event ) ;
}

Event.addEventListener()でも、同様にイベントを設定できます。

element.addEventListener( "canplay", function ( event ) {
	console.log( event ) ;
} ) ;

デモ

メディアプレーヤーの各イベントの発生順序を最新25件まで監視します。canplayイベントの発生回数と、コールバック関数に渡されたオブジェクトの内容を表示します。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
body { word-break: break-all ; tab-size: 2 ; }
div#result { white-space: pre-wrap ; }
.my-event { font-weight: 700 ; color: red ; }
</style>
</head>
<body>
<video id="hoge" controls>
	<source src="./movie.mp4" type="video/mp4">
</video>
<hr>
<p>イベント発生回数→<span id="count">0</span></p>
<hr>
<div id="order"></div>
<hr>
<div id="result"></div>
<script>
var number = 0 ;
var element = document.getElementById( "hoge" ) ;

element.oncanplay = getEventInfo ;

function getEventInfo( event ) {
	document.getElementById( "result" ).textContent = "" ;
	document.getElementById( "count" ).textContent = ++number ;

	console.log( event ) ;
	appendText( event + "\n" ) ;

	for( var key in event ) {
		appendText( key + ": " + event[key] + "\n" ) ;
	}
}

function appendText ( text ) {
	document.getElementById( "result" ).appendChild( document.createTextNode( text ) ) ;
}

var eventHandlers = [] ;

function setMediaEvent ( eventHandler ) {
	element.addEventListener( eventHandler, function() {
		eventHandlers.push( ( eventHandler === "canplay" ? '<span class="my-event">' + eventHandler + '</span>' : eventHandler ) ) ;
		eventHandlers = eventHandlers.slice( -25 ) ;
		document.getElementById( "order" ).innerHTML = eventHandlers.join( "→" ) ;
	} ) ;
}

for( var a=[ "canplay", "canplaythrough", "loadstart", "progress", "suspend", "loadedmetadata", "loadeddata", "abort", "error", "emptied", "stalled", "waiting", "seeking", "seeked", "ended", "durationchange", "timeupdate", "play", "playing", "pause", "ratechange", "resize", "volumechange", ],i=0,l=a.length; l>i; i++ ) {
	setMediaEvent( a[i] ) ;
}
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月17日 (火)
コンテンツを公開しました。