New pages: HTMLMediaElement API (played and seeking) (#37006)

* New pages: htmlmediaelement API * Update files/en-us/web/api/htmlmediaelement/played/index.md * Update files/en-us/web/api/htmlmediaelement/played/index.md * Update files/en-us/web/api/htmlmediaelement/seeking/index.md * Apply suggestions from code review * Update files/en-us/web/api/htmlmediaelement/played/index.md * Update files/en-us/web/api/htmlmediaelement/played/index.md * Update files/en-us/web/api/htmlmediaelement/seeking/index.md --------- Co-authored-by: wbamberg <[email protected]>
mdn · Jan 7, 2025 · 2e84c22 · 2e84c22
1 parent 6033c36
commit 2e84c22
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 0 deletions.
diff --git a/files/en-us/web/api/htmlmediaelement/played/index.md b/files/en-us/web/api/htmlmediaelement/played/index.md
@@ -0,0 +1,45 @@
+---
+title: "HTMLMediaElement: played property"
+short-title: played
+slug: Web/API/HTMLMediaElement/played
+page-type: web-api-instance-property
+browser-compat: api.HTMLMediaElement.played
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`played`** read-only property of the {{domxref("HTMLMediaElement")}} interface indicates the time ranges the resource, an {{htmlelement("audio")}} or {{htmlelement("video")}} media file, has played. It returns a new {{domxref("TimeRanges")}} object that contains the ranges of the media source that the browser has played, if any, at the time the attribute is evaluated.
+
+## Value
+
+A {{domxref("TimeRanges")}} object; representing the time ranges that have been played.
+
+## Examples
+
+```js
+const media = document.querySelector("audio");
+const playedTimeRanges = media.played;
+let timePlayed = 0;
+// calculate the total time the media has played
+for (let i = 0; i < playedTimeRanges.length; i++) {
+  timePlayed += playedTimeRanges.end(i) - playedTimeRanges.start(i);
+}
+console.log(`The media played for a total of ${timePlayed} seconds.`);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLMediaElement.seeked_event", "seeked")}} event
+- {{domxref("HTMLMediaElement.progress_event", "progress")}} event
+- {{domxref("HTMLMediaElement.seekable")}}
+- {{domxref("HTMLMediaElement.buffered")}}
+- {{domxref("HTMLVideoElement")}}
+- {{domxref("HTMLAudioElement")}}
diff --git a/files/en-us/web/api/htmlmediaelement/seeking/index.md b/files/en-us/web/api/htmlmediaelement/seeking/index.md
@@ -0,0 +1,37 @@
+---
+title: "HTMLMediaElement: seeking property"
+short-title: seeking
+slug: Web/API/HTMLMediaElement/seeking
+page-type: web-api-instance-property
+browser-compat: api.HTMLMediaElement.seeking
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`seeking`** read-only property of the {{domxref("HTMLMediaElement")}} interface is a Boolean indicating whether the resource, the {{htmlelement("audio")}} or {{htmlelement("video")}}, is in the process of seeking to a new position.
+
+## Value
+
+A boolean value.
+
+## Examples
+
+```js
+const el = document.querySelector("video");
+console.log(el.seeking); // true or false
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLMediaElement.seeking_event", "seeking")}} event
+- {{domxref("HTMLMediaElement.seeked_event", "seeked")}} event
+- {{domxref("HTMLVideoElement")}}
+- {{domxref("HTMLAudioElement")}}