1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
---
title: 'HTMLMediaElement: loadedmetadata イベント'
slug: Web/API/HTMLMediaElement/loadedmetadata_event
tags:
- Audio
- HTMLMediaElement
- Reference
- Video
- events
translation_of: Web/API/HTMLMediaElement/loadedmetadata_event
---
<p>{{APIRef("HTMLMediaElement")}}</p>
<p><span class="seoSummary"><code>loadedmetadata</code> イベントは、メタデータが読み込まれたときに発生します。</span></p>
<table class="properties">
<tbody>
<tr>
<th scope="row">バブリング</th>
<td>なし</td>
</tr>
<tr>
<th scope="row">キャンセル</th>
<td>不可</td>
</tr>
<tr>
<th scope="row">インターフェイス</th>
<td>{{DOMxRef("Event")}}</td>
</tr>
<tr>
<th scope="row">対象</th>
<td>Element</td>
</tr>
<tr>
<th scope="row">Default Action</th>
<td>要素</td>
</tr>
<tr>
<th scope="row">イベントハンドラプロパティ</th>
<td>{{domxref("GlobalEventHandlers.onloadedmetadata")}}</td>
</tr>
<tr>
<th scope="row">仕様</th>
<td><a class="external" href="https://html.spec.whatwg.org/multipage/media.html#event-media-loadedmetadata">HTML5 メディア</a></td>
</tr>
</tbody>
</table>
<h2 id="Additional_Properties" name="Additional_Properties">追加のプロパティ</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">プロパティ</th>
<th scope="col">型</th>
<th scope="col">説明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>mozChannels</code> {{readonlyInline}}</td>
<td>int</td>
<td>チャンネル数。</td>
</tr>
<tr>
<td><code>mozSampleRate</code> {{readonlyInline}}</td>
<td>int</td>
<td>1秒あたりのサンプルレート。</td>
</tr>
<tr>
<td><code>mozFrameBufferLength</code> {{readonlyInline}}</td>
<td>int</td>
<td>すべてのチャンネルで収集されたサンプルの数。</td>
</tr>
</tbody>
</table>
<h2 id="Examples" name="Examples">例</h2>
<p>これらの例では、<code>HTMLMediaElement</code> の <code>loadedmetadata</code> イベントのイベントリスナーを追加し、そのイベントハンドラがイベントの発生に反応したときにメッセージを投稿します。</p>
<p><code>AddEventListener()</code> を使用する場合</p>
<pre class="brush: js">const video = document.querySelector('video');
video.addEventListener('loadedmetadata', (event) => {
console.log('メディアとトラックの' + '
長さと寸法は現在わかっています。');
});</pre>
<p><code>onloadedmetadata</code> イベントハンドラプロパティを使用する場合</p>
<pre class="brush: js">const video = document.querySelector('video');
video.onloadedmetadata = (event) => {
console.log('メディアとトラックの' + '
長さと寸法は現在わかっています。');
};</pre>
<h2 id="Specifications" name="Specifications">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様</th>
<th scope="col">状態</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "media.html#event-media-loadedmetadata", "loadedmetadata media event")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-loadedmetadata", "loadedmetadata media event")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("api.HTMLMediaElement.loadedmetadata_event")}}</p>
<h2 id="Related_Events" name="Related_Events">関連イベント</h2>
<ul>
<li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing イベント')}}</li>
<li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting イベント')}}</li>
<li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking イベント')}}</li>
<li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked イベント')}}</li>
<li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended イベント')}}</li>
<li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata イベント')}}</li>
<li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata イベント')}}</li>
<li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay イベント')}}</li>
<li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough イベント')}}</li>
<li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange イベント')}}</li>
<li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate イベント')}}</li>
<li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play イベント')}}</li>
<li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause イベント')}}</li>
<li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange イベント')}}</li>
<li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange イベント')}}</li>
<li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend イベント')}}</li>
<li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied イベント')}}</li>
<li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled イベント')}}</li>
</ul>
<h2 id="See_Also" name="See_Also">関連情報</h2>
<ul>
<li>{{domxref("HTMLAudioElement")}}</li>
<li>{{domxref("HTMLVideoElement")}}</li>
<li>{{HTMLElement("audio")}}</li>
<li>{{HTMLElement("video")}}</li>
</ul>
<ul>
<li>このイベントは gecko の <a href="/ja/docs/Introducing_the_Audio_API_Extension">Audio API 拡張</a>の一部です。</li>
</ul>
|
