diff options
Diffstat (limited to 'files/ja/web/api/htmlmediaelement/progress_event/index.html')
| -rw-r--r-- | files/ja/web/api/htmlmediaelement/progress_event/index.html | 163 |
1 files changed, 163 insertions, 0 deletions
diff --git a/files/ja/web/api/htmlmediaelement/progress_event/index.html b/files/ja/web/api/htmlmediaelement/progress_event/index.html new file mode 100644 index 0000000000..12fe68fd4e --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/progress_event/index.html @@ -0,0 +1,163 @@ +--- +title: 'HTMLMediaElement: progress イベント' +slug: Web/API/HTMLMediaElement/progress_event +tags: + - API + - Event + - HTMLMediaElement + - Reference + - Web + - progress + - イベント +translation_of: Web/API/HTMLMediaElement/progress_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>progress</code></strong> イベントは、ブラウザーがリソースを読み込むときに定期的に発生します。</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><code>onprogress</code></td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Live_example" name="Live_example">ライブデモ</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="example"> + + <button type="button">Load video</button> + <video controls width="250"></video> + + <div class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents"></textarea> + </div> + +</div></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.event-log-contents { + width: 18rem; + height: 5rem; + border: 1px solid black; + margin: .2rem; + padding: .2rem; +} + +.example { + display: grid; + grid-template-areas: + "button log" + "video log"; +} + +button { + grid-area: button; + width: 10rem; + margin: .5rem 0; +} + +video { + grid-area: video; +} + +.event-log { + grid-area: log; +} + +.event-log>label { + display: block; +} +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: js">const loadVideo = document.querySelector('button'); +const video = document.querySelector('video'); +const eventLog = document.querySelector('.event-log-contents'); +let source = null; + +function handleEvent(event) { + eventLog.textContent = eventLog.textContent + `${event.type}\n`; +} + +video.addEventListener('loadstart', handleEvent); +video.addEventListener('progress', handleEvent); +video.addEventListener('canplay', handleEvent); +video.addEventListener('canplaythrough', handleEvent); + +loadVideo.addEventListener('click', () => { + + if (source) { + document.location.reload(); + } else { + loadVideo.textContent = "Reset example"; + source = document.createElement('source'); + source.setAttribute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'); + source.setAttribute('type', 'video/webm'); + + video.appendChild(source); + } +});</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '200px') }}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-progress", "progress media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-progress", "progress media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.HTMLMediaElement.progress_event")}}</p> + +<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> |