diff --git a/files/zh-cn/web/api/htmlmediaelement/abort_event/index.md b/files/zh-cn/web/api/htmlmediaelement/abort_event/index.md index 1dbc359e123b8c..dc61c606026c40 100644 --- a/files/zh-cn/web/api/htmlmediaelement/abort_event/index.md +++ b/files/zh-cn/web/api/htmlmediaelement/abort_event/index.md @@ -1,43 +1,38 @@ --- -title: "HTMLMediaElement: abort event" +title: HTMLMediaElement:abort 事件 slug: Web/API/HTMLMediaElement/abort_event +l10n: + sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3 --- {{APIRef}} -资源没有被完全加载时就会触发 **`abort`** 事件,但错误不会触发该事件。 - - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{domxref("Event")}}
Event handler property - {{domxref("GlobalEventHandlers/onabort", "onabort")}} -
+**`abort`** 事件会在资源没有被完全加载时触发,但错误不会触发该事件。 + +此事件无法被取消也不会冒泡。 + +## 语法 + +在类似 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 的方法中使用此事件名,或者设置事件处理器属性。 + +```js +addEventListener("abort", (event) => {}); + +onabort = (event) => {}; +``` + +## 事件类型 + +通用 {{domxref("Event")}}。 ## 示例 ```js const video = document.querySelector("video"); -const videoSrc = "https://path/to/video.webm"; +const videoSrc = "https://example.org/path/to/video.webm"; video.addEventListener("abort", () => { - console.log(`Abort loading: ${videoSrc}`); + console.log(`加载中止:${videoSrc}`); }); const source = document.createElement("source"); @@ -55,7 +50,7 @@ video.appendChild(source); {{Compat}} -## 参阅 +## 参见 - {{domxref("HTMLAudioElement")}} - {{domxref("HTMLVideoElement")}} diff --git a/files/zh-cn/web/api/htmlmediaelement/audiotracks/index.md b/files/zh-cn/web/api/htmlmediaelement/audiotracks/index.md index 6f1d5d2062b42a..bff4b7105504e7 100644 --- a/files/zh-cn/web/api/htmlmediaelement/audiotracks/index.md +++ b/files/zh-cn/web/api/htmlmediaelement/audiotracks/index.md @@ -1,35 +1,46 @@ --- -title: HTMLMediaElement.audioTracks +title: HTMLMediaElement:audioTracks 属性 slug: Web/API/HTMLMediaElement/audioTracks +l10n: + sourceCommit: 595cba0e07c70eda7f08a12890e00ea0281933d3 --- {{APIRef("HTML DOM")}} -**`HTMLMediaElement.audioTracks`** 获得可用音频轨道的数量 +{{domxref("HTMLMediaElement")}} 对象的只读属性 **`audioTracks`** 返回一个 {{domxref("AudioTrackList")}} 对象,该对象列出了所有表示媒体元素音频轨道的 {{domxref("AudioTrack")}} 对象。 -## 语法 +媒体元素可能是一个 {{HTMLElement("audio")}} 元素或 {{HTMLElement("video")}} 元素。 -```plain -audio|video.audioTracks -``` +所返回的列表是*动态的*;即,当音频轨道从媒体元素上增加或删除时,列表的内容将会动态的变化。一旦你引用了该列表,你可以监控它以检测何时添加了新的音轨或删除了已存在的音轨。参阅 [AudioTrackList 事件](/zh-CN/docs/Web/API/AudioTrackList#事件)以了解更多有关获取媒体元素音轨列表变化的信息。 ## 返回值 -AudioTrackList 对象 表示音频/视频的可用音频轨道 +一个 {{domxref("AudioTrackList")}} 对象,表示一个媒体元素中所包含的音频轨道的列表。音轨列表可以使用数组表示法或对象的 {{domxref("AudioTrackList.getTrackById", "getTrackById()")}} 方法访问。 + +每个音轨都是由一个提供音轨信息的 {{domxref("AudioTrack")}} 对象表示的。 + +## 示例 -## 用例 +在这个示例中,给定元素的所有的音频轨道都是被静音的。 -以 audio 标签为例 +### HTML + +构建元素本身的 HTML。 ```html - + ``` -调用 +### JavaScript + +这段 JavaScript 代码负责将视频元素的音轨静音。 + +```js +const video = document.getElementById("video"); -```plain -myVid=document.getElementById("audio"); -alert(myVid.audioTracks.length); +for (let i = 0; i < video.audioTracks.length; i += 1) { + video.audioTracks[i].enabled = false; +} ``` ## 规范 @@ -42,4 +53,6 @@ alert(myVid.audioTracks.length); ## 参见 -- 定义它的接口,{{domxref("HTMLMediaElement")}}。 +- {{domxref("HTMLMediaElement")}}:用于定义 `HTMLMediaElement.audioTracks` 属性的接口 +- {{HTMLElement("audio")}}、{{HTMLElement("video")}} +- {{domxref("AudioTrack")}}、{{domxref("AudioTrackList")}} diff --git a/files/zh-cn/web/api/htmlmediaelement/buffered/index.md b/files/zh-cn/web/api/htmlmediaelement/buffered/index.md index 1e3a27adc464ca..8d26492a816b52 100644 --- a/files/zh-cn/web/api/htmlmediaelement/buffered/index.md +++ b/files/zh-cn/web/api/htmlmediaelement/buffered/index.md @@ -1,24 +1,17 @@ --- -title: HTMLMediaElement.buffered +title: HTMLMediaElement:buffered 属性 slug: Web/API/HTMLMediaElement/buffered +l10n: + sourceCommit: 2b554506d84d016d3ddf612c593bd8315833c64d --- {{APIRef("HTML DOM")}} -**`HTMLMediaElement.buffered`** 返回一个只读 {{domxref("TimeRanges")}} 对象 返回媒体已缓冲的区域 +{{domxref("HTMLMediaElement")}} 对象的只读属性 **`buffered`** 返回一个新的静态[规范化 `TimeRanges` 对象](/zh-CN/docs/Web/API/TimeRanges#规范化的_timeranges_对象),该对象表示用户代理在访问 `buffered` 属性时已缓冲的媒体资源(如果有)的范围。 -> [!NOTE] -> This feature is not available in [Web Workers](/zh-CN/docs/Web/API/Web_Workers_API). +## 返回值 -## 值 - -对象{{domxref("TimeRanges")}} - -length - 获得音频/视频中已缓冲范围的数量 - -buffered.start 开始的区域 - -buffered.end 结束的区域 +一个新的静态[规范化 `TimeRanges` 对象](/zh-CN/docs/Web/API/TimeRanges#规范化的_timeranges_对象),表示用户代理在访问 `buffered` 属性时已缓冲的媒体资源(如果有)的范围。 ## 示例 @@ -37,4 +30,4 @@ console.log(obj.buffered); // TimeRanges { length: 0 } ## 参见 -- The interface defining it, {{domxref("HTMLMediaElement")}}. +- {{domxref("HTMLMediaElement")}}:用于定义 `HTMLMediaElement.buffered` 属性的接口 diff --git a/files/zh-cn/web/api/htmlmediaelement/canplay_event/index.md b/files/zh-cn/web/api/htmlmediaelement/canplay_event/index.md index a4cac55caf6228..43715871c7d57c 100644 --- a/files/zh-cn/web/api/htmlmediaelement/canplay_event/index.md +++ b/files/zh-cn/web/api/htmlmediaelement/canplay_event/index.md @@ -1,44 +1,33 @@ --- -title: "HTMLMediaElement: canplay" +title: HTMLMediaElement:canplay 事件 slug: Web/API/HTMLMediaElement/canplay_event +l10n: + sourceCommit: b71d118ffc6d72b77efad9661110fcc9ede464eb --- {{APIRef("HTMLMediaElement")}} -`canplay` 事件在终端可以播放媒体文件时(但估计还没有加载足够的数据来播放媒体直到其结束,即后续可能需要停止以进一步缓冲内容)被触发。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
是否冒泡
是否可取消
接口{{DOMxRef("Event")}}
目标元素
默认行为
事件处理器属性{{domxref("GlobalEventHandlers.oncanplay")}}
+**`canplay`** 事件会在用户代理可以播放媒体,但是估计没有加载足够的数据以流畅地播放媒体至结束(可能需要停顿来缓存更多内容)时触发。 + +此事件无法被取消也不会冒泡。 + +## 语法 + +在类似 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 的方法中使用事件名,或者设置事件处理器属性。 + +```js +addEventListener("canplay", (event) => {}); + +oncanplay = (event) => {}; +``` + +## 事件类型 + +通用 {{domxref("Event")}}。 ## 示例 -以下示例展示了如何为媒体元素的 `canplay` 事件添加一个事件监听器,以在该事件触发时发送一条消息。 +这些示例为 HTMLMediaElement 的 `canplay` 事件添加了一个事件监听器。事件处理器会在事件被触发时发送一条信息。 使用 `addEventListener()`: @@ -46,7 +35,7 @@ slug: Web/API/HTMLMediaElement/canplay_event const video = document.querySelector("video"); video.addEventListener("canplay", (event) => { - console.log("Video can start, but not sure it will play through."); + console.log("视频可以开始播放,但是不一定能够完整地播放。"); }); ``` @@ -56,7 +45,7 @@ video.addEventListener("canplay", (event) => { const video = document.querySelector("video"); video.oncanplay = (event) => { - console.log("Video can start, but not sure it will play through."); + console.log("视频可以开始播放,但是不一定能够完整地播放。"); }; ``` @@ -70,24 +59,24 @@ video.oncanplay = (event) => { ## 相关事件 -- 媒体元素 {{domxref("HTMLMediaElement.playing_event", 'playing')}} 事件 -- 媒体元素 {{domxref("HTMLMediaElement.waiting_event", 'waiting')}} 事件 -- 媒体元素 {{domxref("HTMLMediaElement.seeking_event", 'seeking')}} 事件 -- 媒体元素 {{domxref("HTMLMediaElement.seeked_event", 'seeked')}} 事件 -- 媒体元素 {{domxref("HTMLMediaElement.ended_event", 'ended')}} 事件 -- 媒体元素 {{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}} 事件 -- 媒体元素 {{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}} 事件 -- 媒体元素 {{domxref("HTMLMediaElement.canplay_event", 'canplay')}} 事件 -- 媒体元素 {{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}} 事件 -- 媒体元素 {{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}} 事件 -- 媒体元素 {{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}} 事件 -- 媒体元素 {{domxref("HTMLMediaElement.play_event", 'play')}} 事件 -- 媒体元素 {{domxref("HTMLMediaElement.pause_event", 'pause')}} 事件 -- 媒体元素 {{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}} 事件 -- 媒体元素 {{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}} 事件 -- 媒体元素 {{domxref("HTMLMediaElement.suspend_event", 'suspend')}} 事件 -- 媒体元素 {{domxref("HTMLMediaElement.emptied_event", 'emptied')}} 事件 -- 媒体元素 {{domxref("HTMLMediaElement.stalled_event", 'stalled')}} 事件 +- HTMLMediaElement {{domxref("HTMLMediaElement.playing_event", 'playing')}} 事件 +- HTMLMediaElement {{domxref("HTMLMediaElement.waiting_event", 'waiting')}} 事件 +- HTMLMediaElement {{domxref("HTMLMediaElement.seeking_event", 'seeking')}} 事件 +- HTMLMediaElement {{domxref("HTMLMediaElement.seeked_event", 'seeked')}} 事件 +- HTMLMediaElement {{domxref("HTMLMediaElement.ended_event", 'ended')}} 事件 +- HTMLMediaElement {{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}} 事件 +- HTMLMediaElement {{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}} 事件 +- HTMLMediaElement {{domxref("HTMLMediaElement.canplay_event", 'canplay')}} 事件 +- HTMLMediaElement {{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}} 事件 +- HTMLMediaElement {{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}} 事件 +- HTMLMediaElement {{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}} 事件 +- HTMLMediaElement {{domxref("HTMLMediaElement.play_event", 'play')}} 事件 +- HTMLMediaElement {{domxref("HTMLMediaElement.pause_event", 'pause')}} 事件 +- HTMLMediaElement {{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}} 事件 +- HTMLMediaElement {{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}} 事件 +- HTMLMediaElement {{domxref("HTMLMediaElement.suspend_event", 'suspend')}} 事件 +- HTMLMediaElement {{domxref("HTMLMediaElement.emptied_event", 'emptied')}} 事件 +- HTMLMediaElement {{domxref("HTMLMediaElement.stalled_event", 'stalled')}} 事件 ## 参见