From 2bb5b5e8c93d0f3605c4bde80c38fad9c93afd57 Mon Sep 17 00:00:00 2001 From: allo Date: Sat, 4 Dec 2021 08:35:14 +0800 Subject: mv to .md for progress event --- .../api/htmlmediaelement/progress_event/index.html | 153 --------------------- .../api/htmlmediaelement/progress_event/index.md | 153 +++++++++++++++++++++ 2 files changed, 153 insertions(+), 153 deletions(-) delete mode 100644 files/zh-cn/web/api/htmlmediaelement/progress_event/index.html create mode 100644 files/zh-cn/web/api/htmlmediaelement/progress_event/index.md (limited to 'files') diff --git a/files/zh-cn/web/api/htmlmediaelement/progress_event/index.html b/files/zh-cn/web/api/htmlmediaelement/progress_event/index.html deleted file mode 100644 index 7d0ad8a3e4..0000000000 --- a/files/zh-cn/web/api/htmlmediaelement/progress_event/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: 'HTMLMediaElement: progress event' -slug: Web/API/HTMLMediaElement/progress_event -translation_of: Web/API/HTMLMediaElement/progress_event ---- -
{{APIRef}}
- -

progress 事件在浏览器加载一个资源的时候周期性触发

- - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{domxref("Event")}}
Event handler propertyonprogress
- -

示例

- -

在线示例

- -

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

JavaScript

- -
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-progress", "progress media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-progress", "progress media event")}}{{Spec2('HTML5 W3C')}}
- -

浏览器兼容性

- - - -

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

- -

也可以看看

- - diff --git a/files/zh-cn/web/api/htmlmediaelement/progress_event/index.md b/files/zh-cn/web/api/htmlmediaelement/progress_event/index.md new file mode 100644 index 0000000000..7d0ad8a3e4 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/progress_event/index.md @@ -0,0 +1,153 @@ +--- +title: 'HTMLMediaElement: progress event' +slug: Web/API/HTMLMediaElement/progress_event +translation_of: Web/API/HTMLMediaElement/progress_event +--- +
{{APIRef}}
+ +

progress 事件在浏览器加载一个资源的时候周期性触发

+ + + + + + + + + + + + + + + + + + + + +
BubblesNo
CancelableNo
Interface{{domxref("Event")}}
Event handler propertyonprogress
+ +

示例

+ +

在线示例

+ +

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

JavaScript

+ +
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-progress", "progress media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-progress", "progress media event")}}{{Spec2('HTML5 W3C')}}
+ +

浏览器兼容性

+ + + +

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

+ +

也可以看看

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