From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../htmlmediaelement/loadstart_event/index.html | 163 +++++++++++++++++++++ 1 file changed, 163 insertions(+) create mode 100644 files/ja/web/api/htmlmediaelement/loadstart_event/index.html (limited to 'files/ja/web/api/htmlmediaelement/loadstart_event/index.html') diff --git a/files/ja/web/api/htmlmediaelement/loadstart_event/index.html b/files/ja/web/api/htmlmediaelement/loadstart_event/index.html new file mode 100644 index 0000000000..8f7944a222 --- /dev/null +++ b/files/ja/web/api/htmlmediaelement/loadstart_event/index.html @@ -0,0 +1,163 @@ +--- +title: 'HTMLMediaElement: loadstart イベント' +slug: Web/API/HTMLMediaElement/loadstart_event +tags: + - API + - Event + - HTMLMediaElement + - Reference + - Web + - loadstart + - イベント +translation_of: Web/API/HTMLMediaElement/loadstart_event +--- +
{{APIRef}}
+ +

loadstart イベントは、ブラウザーがリソースの読み込みを開始したときに発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル可能いいえ
インターフェイス{{domxref("Event")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers/onloadstart", "onloadstart")}}
+ +

+ +

ライブデモ

+ +

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>
+ + + +

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);
+    }
+});
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '200px') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('HTML WHATWG', "media.html#event-media-loadstart", "loadstart media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-loadstart", "loadstart media event")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("api.HTMLMediaElement.loadstart_event")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf