GlobalEventHandlers.onplay - 再生を開始した時に発火
公開日:
GlobalEventHandlers.onplayは、GlobalEventHandlersのイベントハンドラです。メディアプレーヤーが再生を開始した時に発火するイベントハンドラです。
概要
IDL
attribute EventHandler onplay;
typedef EventHandlerNonNull? EventHandler;
[TreatNonObjectAsNull]
callback EventHandlerNonNull = any (Event event);
イベント
設定対象 | オブジェクト | 説明 |
---|---|---|
HTMLMediaElement | Event | メディアプレーヤーが再生を開始した時にイベントが発生します。内部的には、HTMLMediaElement.pausedがfalse になった時です。 |
脚注
?
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>
// イベントの設定 (onplay)
element.onplay = function ( event ) {
// ...
}
// イベントの設定 (addEventListener)
element.addEventListener( "play", function ( event ) {
// ...
} ) ;
サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】GlobalEventHandlers.onplay - 再生を開始した時に発火</title>
<link rel="canonical" href="https://syncer.jp/Web/API_Interface/Reference/IDL/GlobalEventHandlers/onplay/">
<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 ;
}
.play {
color: red ;
}
</style>
</head>
<body>
<p>playは、プレーヤーが再生を開始した時に発生します。</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.onplay = 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>
デモ
サポート状況
GlobalEventHandlers.onplayのサポート状況です。
ブラウザ | サポート状況 | ブラウザ | サポート状況 |
---|---|---|---|
Chrome | Supported | Firefox | Supported 9+ |
Edge | Supported | Internet Explorer | Supported 9+ |
Safari | Supported | Opera | Supported 11.6+ |
iOS Safari | Supported | Android | Supported |
Chrome
バージョン | サポート状況 | 公開時期 | シェア |
---|---|---|---|
57 | Supported | 2017年3月頃 | 0.1% |
56 | Supported | 2017年1月頃 | 12.02% |
55 | Supported | 2016年12月頃 | 12.36% |
54 | Supported | 2016年10月頃 | 0.44% |
53 | Supported | 2016年9月頃 | 0.25% |
52 | Supported | 2016年7月頃 | 0.27% |
51 | Supported | 2016年6月頃 | 0.4% |
50 | Supported | 2016年4月頃 | 0.32% |
49 | Supported | 2016年3月頃 | 0.47% |
48 | Supported | 2016年1月頃 | 0.02% |
47 | Supported | 2015年12月頃 | 0.06% |
46 | Supported | 2015年10月頃 | 0.56% |
45 | Supported | 2015年9月頃 | 0.01% |
44 | Supported | 2015年7月頃 | 0.83% |
43 | Supported | 2015年5月頃 | 0.05% |
42 | Supported | 2015年4月頃 | 0.05% |
41 | Supported | 2015年3月頃 | 0.01% |
40 | Supported | 2015年1月頃 | 0.59% |
39 | Supported | 2014年11月頃 | 0.02% |
38 | Supported | 2014年10月頃 | 0.08% |
37 | Supported | 2014年8月頃 | 0.01% |
36 | Supported | 2014年7月頃 | 0.01% |
35 | Supported | 2014年5月頃 | 0.01% |
34 | Supported | 2014年4月頃 | 0.14% |
33 | Supported | 2014年2月頃 | 0.01% |
32 | Supported | 2014年1月頃 | 0% |
31 | Supported | 2013年11月頃 | 0.01% |
30 | Supported | 2013年10月頃 | 0.03% |
29 | Supported | 2013年8月頃 | 0% |
28 | Supported | 2013年6月頃 | 0.03% |
27 | Supported | 2013年5月頃 | 0.01% |
26 | Supported | 2013年3月頃 | 0% |
25 | Supported | 2013年2月頃 | 0% |
24 | Supported | 2013年1月頃 | 0% |
23 | Supported | 2012年11月頃 | 0% |
22 | Supported | 2012年9月頃 | 0% |
21 | Supported | 2012年7月頃 | 0% |
20 | Supported | 2012年6月頃 | 0% |
19 | Supported | 2012年5月頃 | 0% |
18 | Supported | 2012年3月頃 | 0.01% |
17 | Supported | 2012年2月頃 | 0.01% |
16 | Supported | 2011年12月頃 | 0% |
15 | Supported | 2011年10月頃 | 0% |
14 | Supported | 2011年9月頃 | 0% |
Firefox
バージョン | サポート状況 | 公開時期 | シェア |
---|---|---|---|
52 | Supported | 2017年3月頃 | 0.12% |
51 | Supported | 2017年1月頃 | 1.7% |
50 | Supported | 2016年11月頃 | 0.78% |
49 | Supported | 2016年9月頃 | 0.02% |
48 | Supported | 2016年8月頃 | 0.07% |
47 | Supported | 2016年6月頃 | 0.03% |
46 | Supported | 2016年4月頃 | 0.01% |
45 | Supported | 2016年3月頃 | 0.1% |
44 | Supported | 2016年1月頃 | 0.01% |
43 | Supported | 2015年12月頃 | 0.02% |
42 | Supported | 2015年11月頃 | 0.01% |
41 | Supported | 2015年9月頃 | 0% |
40 | Supported | 2015年8月頃 | 0.02% |
39 | Supported | 2015年7月頃 | 0.01% |
38 | Supported | 2015年5月頃 | 0.02% |
37 | Supported | 2015年3月頃 | 0% |
36 | Supported | 2015年2月頃 | 0.01% |
35 | Supported | 2015年1月頃 | 0% |
34 | Supported | 2014年12月頃 | 0.01% |
33 | Supported | 2014年10月頃 | 0% |
32 | Supported | 2014年9月頃 | 0% |
31 | Supported | 2014年7月頃 | 0.01% |
30 | Supported | 2014年6月頃 | 0% |
29 | Supported | 2014年4月頃 | 0% |
28 | Supported | 2014年3月頃 | 0.01% |
27 | Supported | 2014年2月頃 | 0% |
26 | Supported | 2013年12月頃 | 0% |
25 | Supported | 2013年10月頃 | 0% |
24 | Supported | 2013年9月頃 | 0% |
23 | Supported | 2013年8月頃 | 0% |
22 | Supported | 2013年6月頃 | 0% |
21 | Supported | 2013年5月頃 | 0% |
20 | Supported | 2013年4月頃 | 0% |
19 | Supported | 2013年2月頃 | 0% |
18 | Supported | 2013年1月頃 | 0% |
17 | Supported | 2012年11月頃 | 0% |
16 | Supported | 2012年10月頃 | 0% |
15 | Supported | 2012年8月頃 | 0% |
14 | Supported | 2012年7月頃 | 0% |
13 | Supported | 2012年6月頃 | 0% |
12 | Supported | 2012年4月頃 | 0% |
11 | Supported | 2012年3月頃 | 0% |
10 | Supported | 2012年1月頃 | 0% |
9 | Supported | 2011年12月頃 | 0% |
8 | Not Supported | 2011年11月頃 | 0% |
7 | Not Supported | 2011年9月頃 | 0% |
6 | Not Supported | 2011年8月頃 | 0% |
5 | Not Supported | 2011年6月頃 | 0% |
4 | Not Supported | 2011年3月頃 | 0% |
Edge
バージョン | サポート状況 | 公開時期 | シェア |
---|---|---|---|
14 | Supported | 2016年2月頃 | 1.05% |
13 | Supported | 2015年9月頃 | 0.08% |
Internet Explorer
バージョン | サポート状況 | 公開時期 | シェア |
---|---|---|---|
11 | Supported | 2013年10月頃 | 4.99% |
10 | Supported | 2012年8月頃 | 0.09% |
9 | Supported | 2011年3月頃 | 0.18% |
8 | Not Supported | 2009年3月頃 | 0.04% |
7 | Not Supported | 2006年10月頃 | 0.01% |
6 | Not Supported | 2001年8月頃 | 0% |
Safari
バージョン | サポート状況 | 公開時期 | シェア |
---|---|---|---|
10 | Supported | 2016年10月頃 | 0% |
9.1 | Supported | 2015年9月頃 | 0% |
8.0 | Supported | 2014年10月頃 | 0% |
7.1 | Supported | 2013年10月頃 | 0% |
6.0 | Supported | 2012年7月頃 | 0% |
5.1 | Supported | 2011年7月頃 | 0% |
4 | Supported | 2009年6月頃 | 0% |
Opera
バージョン | サポート状況 | 公開時期 | シェア |
---|---|---|---|
43 | Supported | 2017年2月頃 | 0.06% |
42 | Supported | 2016年12月頃 | 0.09% |
41 | 調査中… | 2016年10月頃 | 0.01% |
40 | Supported | 2016年9月頃 | 0% |
39 | Supported | 2016年8月頃 | 0% |
38 | 調査中… | 2016年6月頃 | 0% |
37 | Supported | 2016年5月頃 | 0.01% |
36 | Supported | 2016年3月頃 | 0.01% |
35 | Supported | 2016年2月頃 | 0% |
34 | 調査中… | 2015年12月頃 | 0% |
33 | 調査中… | 2015年10月頃 | 0% |
32 | 調査中… | 2015年9月頃 | 0% |
31 | 調査中… | 2015年8月頃 | 0% |
30 | Supported | 2015年6月頃 | 0% |
29 | 調査中… | 2015年4月頃 | 0% |
28 | Supported | 2015年3月頃 | 0% |
27 | Supported | 2015年1月頃 | 0% |
26 | 調査中… | 2014年12月頃 | 0% |
25 | Supported | 2014年10月頃 | 0% |
24 | Supported | 2014年9月頃 | 0% |
23 | 調査中… | 2014年7月頃 | 0% |
22 | Supported | 2014年6月頃 | 0% |
21 | Supported | 2014年5月頃 | 0.01% |
20 | Supported | 2014年3月頃 | 0% |
19 | Supported | 2014年1月頃 | 0% |
18 | Supported | 2013年11月頃 | 0% |
17 | 調査中… | 2013年10月頃 | 0% |
16 | 調査中… | 2013年8月頃 | 0% |
15 | Supported | 2013年7月頃 | 0% |
12 | Supported | 2012年6月頃 | 0.02% |
11.6 | Supported | 2011年12月頃 | 0% |
11.1 | Not Supported | 2011年4月頃 | 0% |
iOS Safari
バージョン | サポート状況 | 公開時期 | シェア |
---|---|---|---|
10.0 | Supported | 2016年9月頃 | 39.65% |
9.1 | Supported | 2015年9月頃 | 5.39% |
8.3 | Supported | 2014年9月頃 | 1.03% |
7.0 | Supported | 2013年9月頃 | 0.24% |
6.0 | Supported | 2012年9月頃 | 0.05% |
5.1 | Supported | 2011年10月頃 | 0.03% |
Android
バージョン | サポート状況 | 公開時期 | シェア |
---|---|---|---|
4.4 | Supported | 2013年10月頃 | 0% |
4.3 | Supported | 2013年7月頃 | 0% |
4.2 | Supported | 2013年3月頃 | 0.03% |
4.1 | Supported | 2012年12月頃 | 0% |
4.0 | Supported | 2012年6月頃 | 1.61% |
2.3 | Supported | 2011年10月頃 | 0% |