diff options
Diffstat (limited to 'files/zh-cn/web/api/htmlmediaelement')
40 files changed, 4029 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/htmlmediaelement/abort_event/index.html b/files/zh-cn/web/api/htmlmediaelement/abort_event/index.html new file mode 100644 index 0000000000..6710b0e023 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/abort_event/index.html @@ -0,0 +1,84 @@ +--- +title: 'HTMLMediaElement: abort event' +slug: Web/API/HTMLMediaElement/abort_event +translation_of: Web/API/HTMLMediaElement/abort_event +--- +<div>{{APIRef}}</div> + +<p>资源没有被完全加载时就会触发 <strong><code>abort</code></strong> 事件，但错误不会触发该事件。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td>{{domxref("GlobalEventHandlers/onabort", "onabort")}}</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">const video = document.querySelector('video'); +const videoSrc = 'https://path/to/video.webm'; + +video.addEventListener('abort', () => { + console.log(`Abort loading: ${videoSrc}`); +}); + +const source = document.createElement('source'); +source.setAttribute('src', videoSrc); +source.setAttribute('type', 'video/webm'); + +video.appendChild(source);</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-abort")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-abort")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.abort_event")}}</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> + +<div id="gtx-trans" style="position: absolute; left: 7px; top: 1375px;"> +<div class="gtx-trans-icon"></div> +</div> diff --git a/files/zh-cn/web/api/htmlmediaelement/audiotracks/index.html b/files/zh-cn/web/api/htmlmediaelement/audiotracks/index.html new file mode 100644 index 0000000000..59dba0a968 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/audiotracks/index.html @@ -0,0 +1,110 @@ +--- +title: HTMLMediaElement.audioTracks +slug: Web/API/HTMLMediaElement/audioTracks +translation_of: Web/API/HTMLMediaElement/audioTracks +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p> <strong><code>HTMLMediaElement.audioTracks</code></strong> 获得可用音频轨道的数量</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre>audio|video.audioTracks</pre> + +<h2 id="返回值">返回值</h2> + +<p>AudioTrackList 对象 表示音频/视频的可用音频轨道</p> + +<h2 id="用例">用例</h2> + +<p>以audio标签为例</p> + +<pre class="brush: html"><audio id='audio'></audio> +</pre> + +<p>调用</p> + +<pre>myVid=document.getElementById("audio"); +alert(<code>myVid.audioTracks</code>.length);</pre> + +<h2 id="参考文档">参考文档</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement.audioTracks")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td> + <p>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.audioTracks")}}</p> + </td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持">浏览器支持</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td><code>audioTracks</code> property</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("33.0")}}[5]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><code>audioTracks</code> property</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("33.0")}}[5]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_Also" name="See_Also">还可以看看</h2> + +<ul> + <li>定义它的接口, {{domxref("HTMLMediaElement")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/autoplay/index.html b/files/zh-cn/web/api/htmlmediaelement/autoplay/index.html new file mode 100644 index 0000000000..0da3afbc2c --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/autoplay/index.html @@ -0,0 +1,110 @@ +--- +title: HTMLMediaElement.autoplay +slug: Web/API/HTMLMediaElement/autoplay +translation_of: Web/API/HTMLMediaElement/autoplay +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>HTMLMediaElement.autoplay</code></strong> 属性等同于HTML属性中的 {{htmlattrxref("autoplay", "video")}}, 它表示当player下载到足够可以播放的媒体文件时，是否自动播放视频。</p> + +<p><span style='background-color: #fafbfc; font-family: Consolas,Monaco,"Andale Mono",monospace; font-size: 1rem; white-space: pre;'>注意: 一些版本的Chrome只支持</span><strong style='font-family: Consolas,Monaco,"Andale Mono",monospace; font-size: 1rem; white-space: pre;'><code>autostart</code></strong><span style='background-color: #fafbfc; font-family: Consolas,Monaco,"Andale Mono",monospace; font-size: 1rem; white-space: pre;'>, 不支持</span><strong style='font-family: Consolas,Monaco,"Andale Mono",monospace; font-size: 1rem; white-space: pre;'><code>autoplay</code></strong></p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">...</pre> + +<h3 id="参数类型">参数类型</h3> + +<p>{{domxref("Boolean")}}</p> + +<h2 id="用例">用例</h2> + +<p>...</p> + +<pre class="brush: html"><...></...> +</pre> + +<p>...</p> + +<pre class="brush: js">Xxx.xxx() +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement.autoplay")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.autoplay")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持">浏览器支持</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}} [1]</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_Also" name="See_Also">看看这里</h2> + +<ul> + <li>接口定义： {{domxref("HTMLMediaElement")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/buffered/index.html b/files/zh-cn/web/api/htmlmediaelement/buffered/index.html new file mode 100644 index 0000000000..69df5e6584 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/buffered/index.html @@ -0,0 +1,111 @@ +--- +title: HTMLMediaElement.buffered +slug: Web/API/HTMLMediaElement/buffered +translation_of: Web/API/HTMLMediaElement/buffered +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>HTMLMediaElement.buffered</code></strong> 返回一个只读 {{domxref("TimeRanges")}} 对象 返回媒体已缓冲的区域</p> + +<div class="note"><strong>Note:</strong> This feature is not available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">var <em>timeRange</em> = <em>audioObject</em>.buffered</pre> + +<h3 id="返回值">返回值</h3> + +<p>对象{{domxref("TimeRanges")}}</p> + +<p>length - 获得音频/视频中已缓冲范围的数量</p> + +<p>buffered.start 开始的区域 </p> + +<p>buffered.end 结束的区域</p> + +<h2 id="例子">例子</h2> + +<pre>var obj = document.createElement('video'); +console.log(obj.buffered); // TimeRanges { length: 0 } +console.log(obj.buffered.start(0));//第一个缓存开始的区域 +console.log(obj.buffered.end(0));//第一个缓存结束的区域</pre> + +<h2 id="参考文档">参考文档</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "embedded-content.html#media-elements", "HTMLMediaElement.buffered")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.buffered")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td><code>buffered</code> property</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><code>buffered</code> property</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_Also" name="See_Also"><font><font>也可以看看</font></font></h2> + +<ul> + <li>The interface defining it, {{domxref("HTMLMediaElement")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/canplay_event/index.html b/files/zh-cn/web/api/htmlmediaelement/canplay_event/index.html new file mode 100644 index 0000000000..ada3f8b444 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/canplay_event/index.html @@ -0,0 +1,82 @@ +--- +title: 'HTMLMediaElement: canplay' +slug: Web/API/HTMLMediaElement/canplay_event +tags: + - canplay +translation_of: Web/API/HTMLMediaElement/canplay_event +--- +<p>当终端可以播放媒体文件时触发该canplay事件，估计加载足够的数据来播放媒体直到其结束，而不必停止以进一步缓冲内容。</p> + +<h2 id="General_info">General info</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay">HTML5 media</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">Event</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">None.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Related_Events">Related Events</h2> + +<ul> + <li>{{event("playing")}}</li> + <li>{{event("waiting")}}</li> + <li>{{event("seeking")}}</li> + <li>{{event("seeked")}}</li> + <li>{{event("ended")}}</li> + <li>{{event("loadedmetadata")}}</li> + <li>{{event("loadeddata")}}</li> + <li>{{event("canplay")}}</li> + <li>{{event("canplaythrough")}}</li> + <li>{{event("durationchange")}}</li> + <li>{{event("timeupdate")}}</li> + <li>{{event("play")}}</li> + <li>{{event("pause")}}</li> + <li>{{event("ratechange")}}</li> + <li>{{event("volumechange")}}</li> + <li>{{event("suspend")}}</li> + <li>{{event("emptied")}}</li> + <li>{{event("stalled")}}</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/canplaythrough_event/index.html b/files/zh-cn/web/api/htmlmediaelement/canplaythrough_event/index.html new file mode 100644 index 0000000000..0b4195879d --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/canplaythrough_event/index.html @@ -0,0 +1,82 @@ +--- +title: 'HTMLMediaElement: canplaythrough' +slug: Web/API/HTMLMediaElement/canplaythrough_event +tags: + - canplaythrough +translation_of: Web/API/HTMLMediaElement/canplaythrough_event +--- +<p>当终端可以播放媒体文件时触发该canplaythrough事件，估计加载足够的数据来播放媒体直到其结束，而不必停止以进一步缓冲内容。</p> + +<h2 id="General_info">General info</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough">HTML5 media</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">Event</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">None.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Related_Events">Related Events</h2> + +<ul> + <li>{{event("playing")}}</li> + <li>{{event("waiting")}}</li> + <li>{{event("seeking")}}</li> + <li>{{event("seeked")}}</li> + <li>{{event("ended")}}</li> + <li>{{event("loadedmetadata")}}</li> + <li>{{event("loadeddata")}}</li> + <li>{{event("canplay")}}</li> + <li>{{event("canplaythrough")}}</li> + <li>{{event("durationchange")}}</li> + <li>{{event("timeupdate")}}</li> + <li>{{event("play")}}</li> + <li>{{event("pause")}}</li> + <li>{{event("ratechange")}}</li> + <li>{{event("volumechange")}}</li> + <li>{{event("suspend")}}</li> + <li>{{event("emptied")}}</li> + <li>{{event("stalled")}}</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/canplaytype/index.html b/files/zh-cn/web/api/htmlmediaelement/canplaytype/index.html new file mode 100644 index 0000000000..883c061160 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/canplaytype/index.html @@ -0,0 +1,80 @@ +--- +title: HTMLMediaElement.canPlayType() +slug: Web/API/HTMLMediaElement/canPlayType +tags: + - 判断媒体类型 + - 方法 + - 音频 +translation_of: Web/API/HTMLMediaElement/canPlayType +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p> <strong><code>HTMLMediaElement.canPlayType()</code></strong> 方法会判断传递的媒体格式参数是否能够被播放。</p> + +<div class="note"><strong>Note:</strong> This feature is not available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>str</em> = <em>audioOrVideo</em>.canPlayType(<em>mediaType</em>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt>mediaType</dt> + <dd>{{domxref("DOMString")}}包含了媒体文件的MIME类型。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>{{jsxref('String')}}. 有可能的值为:</p> + +<ul> + <li><code>'probably'</code>: 这种媒体文件似乎是可播放的。</li> + <li><code>'maybe'</code>: 不能告诉你这种媒体文件是否能被播放，直到你尝试播放它。</li> + <li><code>''</code> (empty string): 这种媒体文件不能被播放。</li> +</ul> + +<div class="note"> +<p><strong>提醒:</strong> 以前 <code>canPlayType('video/webm')</code> 会返回 <code>'probably'。</code>从 Gecko 28 {{geckoRelease(28)}} 开始， 将返回 <code>'maybe'</code>。 ({{bug(884275)}})</p> +</div> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">var obj = document.createElement('video'); +console.log(obj.canPlayType('video/mp4')); // "maybe" +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement.canplaytype")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>从 {{SpecName('HTML5 W3C')}}后没有变更</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.canplaytype")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初始定义.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页上的兼容性表是由结构化数据生成的。如果您想对数据作出贡献，请检查 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送一个拉取请求。</div> + +<p>{{Compat("api.HTMLMediaElement.canPlayType")}}</p> + +<h2 id="See_Also" name="See_Also">其他</h2> + +<ul> + <li>接口定义， {{domxref("HTMLMediaElement")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/controller/index.html b/files/zh-cn/web/api/htmlmediaelement/controller/index.html new file mode 100644 index 0000000000..29222fc3df --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/controller/index.html @@ -0,0 +1,54 @@ +--- +title: HTMLMediaElement.controller +slug: Web/API/HTMLMediaElement/controller +translation_of: Web/API/HTMLMediaElement/controller +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>TMLMediaElement.controller</code></strong> 属性表示对应媒体元素的控制器。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="brush: js">...</pre> + +<h3 id="Value">Value</h3> + +<p>属性的值是一个 {{domxref("MediaController")}} 对象，如果没有对应的媒体元素值为<code>null</code>，默认值为<code>null</code>。 </p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">... +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.controller")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.controller")}}</p> + +<h2 id="See_Also" name="See_Also">参阅</h2> + +<ul> + <li>定义它的接口, {{domxref("HTMLMediaElement")}}.</li> +</ul> + +<div id="gtx-trans" style="position: absolute; left: 161px; top: 1220px;"> +<div class="gtx-trans-icon"></div> +</div> diff --git a/files/zh-cn/web/api/htmlmediaelement/controls/index.html b/files/zh-cn/web/api/htmlmediaelement/controls/index.html new file mode 100644 index 0000000000..eaabad02c1 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/controls/index.html @@ -0,0 +1,103 @@ +--- +title: HTMLMediaElement.controls +slug: Web/API/HTMLMediaElement/controls +translation_of: Web/API/HTMLMediaElement/controls +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>HTMLMediaElement.controls</code></strong> 这个负责控制html中的<code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-controls">controls</a></code><font><font>HTML属性</font></font>, 它负责控制播放的媒体(视频或音频)的控制条是否显示。.</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">var <em>ctrls</em> = <em>video</em>.controls; +<em>audio</em>.controls = true;</pre> + +<h3 id="返回值">返回值</h3> + +<p>类型 {{domxref("Boolean")}}. 是否成功</p> + +<h2 id="例子">例子</h2> + +<pre class="brush: js">var obj = document.createElement('video'); +obj.controls = true; +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement.controls")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.controls")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}} [1]</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_Also" name="See_Also">产考文档</h2> + +<ul> + <li>The interface defining it, {{domxref("HTMLMediaElement")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/controlslist/index.html b/files/zh-cn/web/api/htmlmediaelement/controlslist/index.html new file mode 100644 index 0000000000..23119dc5ab --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/controlslist/index.html @@ -0,0 +1,48 @@ +--- +title: HTMLMediaElement.controlsList +slug: Web/API/HTMLMediaElement/controlsList +translation_of: Web/API/HTMLMediaElement/controlsList +--- +<p>{{SeeCompatTable}}{{APIRef("HTML DOM")}}</p> + +<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement" title="HTMLMediaElement接口为HTMLElement添加了支持音频和视频通用的基本媒体相关功能所需的属性和方法。"><code>HTMLMediaElement</code></a><font><font>接口</font><font>的</font></font><strong><code>controlsList</code></strong><font><font> 属性返回DOMTokenList，帮助用户在显示其自己的控件集时选择要在媒体元素上显示的控件。DOMTokenList可以设置以下三个可能值中的一个或多个：nodownload，nofullscreen和noremoteplayback（值是一组</font></font><a href="https://wicg.github.io/controls-list/html-output/multipage/infrastructure.html#unordered-set-of-unique-space-separated-tokens" id="user-interface:unordered-set-of-unique-space-separated-tokens"><font><font>无序的空格分隔标记</font></font></a><font><font>，这些</font><a href="https://wicg.github.io/controls-list/html-output/multipage/infrastructure.html#unordered-set-of-unique-space-separated-tokens" id="user-interface:unordered-set-of-unique-space-separated-tokens"><font>标记</font></a><font>是</font></font><a href="https://infra.spec.whatwg.org/#ascii-case-insensitive" id="user-interface:ascii-case-insensitive"><font><font>ASCII不区分大小写的</font></font></a><font><font>）。</font></font></p> + +<ol> + <li><code id="user-interface:attr-media-controlslist-nodownload"><a href="https://wicg.github.io/controls-list/html-output/multipage/embedded-content.html#attr-media-controlslist-nodownload">nodownload</a></code><font><font>关键字暗示的下载控制应使用用户代理自己的一套媒体元素控件时被隐藏。</font></font></li> + <li><code id="user-interface:attr-media-controlslist-nofullscreen"><a href="https://wicg.github.io/controls-list/html-output/multipage/embedded-content.html#attr-media-controlslist-nofullscreen">nofullscreen</a></code><font><font>关键字暗示在使用用户代理自己的媒体元素控件集时，应隐藏全屏模式控件。</font></font></li> + <li><code id="user-interface:attr-media-controlslist-noremoteplayback"><a href="https://wicg.github.io/controls-list/html-output/multipage/embedded-content.html#attr-media-controlslist-noremoteplayback">noremoteplayback</a></code><font><font>关键字暗示当使用用户代理自己的媒体元素控件集时，应隐藏远程播放控件。</font></font></li> +</ol> + +<h2 id="语法"><font><font>语法</font></font></h2> + +<pre class="syntaxbox">var domTokenList = HTMLMediaElement.controlsList;</pre> + +<h3 id="Value">Value</h3> + +<p>A {{domxref("DOMTokenList")}}.</p> + +<h2 id="示例"><font><font>示例</font></font></h2> + +<pre class="syntaxbox"><video controls controlslist="nodownload" id="video" src=""></video> +</pre> + +<pre class="syntaxbox"><video controls controlslist="nodownload nofullscreen noremoteplayback" id="video" src=""></video> +</pre> + +<h2 id="规格"><font><font>规格</font></font></h2> + +<p><a href="https://wicg.github.io/controls-list/html-output/multipage/embedded-content.html#attr-media-controlslist">https://wicg.github.io/controls-list/html-output/multipage/embedded-content.html#attr-media-controlslist</a>.</p> + +<h2 id="浏览器兼容性"><font><font>浏览器兼容性</font></font></h2> + +<div> + + +<p>{{Compat("api.HTMLMediaElement.controlsList")}}</p> +</div> + +<h2 id="参阅">参阅</h2> + +<ul> + <li><a class="external-icon external" href="https://googlechrome.github.io/samples/media/controlslist.html">Chrome HTMLMediaElement controlsList Sample</a> 示例</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/crossorigin/index.html b/files/zh-cn/web/api/htmlmediaelement/crossorigin/index.html new file mode 100644 index 0000000000..d82bb90e63 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/crossorigin/index.html @@ -0,0 +1,42 @@ +--- +title: HTMLMediaElement.crossOrigin +slug: Web/API/HTMLMediaElement/crossOrigin +translation_of: Web/API/HTMLMediaElement/crossOrigin +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>HTMLMediaElement.crossOrigin</code></strong> 属性是当前图片元素的跨域资源共享(CORS)设置，详情可参考 <a href="/en-US/docs/HTML/CORS_settings_attributes">CORS</a> 设置。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#attr-media-crossorigin", "HTMLMediaElement.crossOrigin")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>{{SpecName('HTML5 W3C')}} 中无改变。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.crossOrigin")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.crossOrigin")}}</p> + +<h2 id="更多">更多</h2> + +<ul> + <li>定义该属性的接口 {{domxref("HTMLMediaElement")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/currentsrc/index.html b/files/zh-cn/web/api/htmlmediaelement/currentsrc/index.html new file mode 100644 index 0000000000..4c25adaa56 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/currentsrc/index.html @@ -0,0 +1,56 @@ +--- +title: HTMLMediaElement.currentSrc +slug: Web/API/HTMLMediaElement/currentSrc +translation_of: Web/API/HTMLMediaElement/currentSrc +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>HTMLMediaElement.currentSrc</code></strong> 属性包含所选媒体源的绝对URL路径。例如当程序会根据用户显示器分辨率选择不同媒体文件时会用到这个属性，显然它是只读的。当<code><strong>networkState</strong></code>值为<code><strong>EMPTY</strong></code>时，本属性值为空字符串（empty string）.</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">var <em>mediaUrl</em> = <em>audioObject</em>.currentSrc;</pre> + +<h3 id="值">值</h3> + +<p>一个 {{domxref("DOMString")}} 对象包含所选媒体源的绝对URL路径。当 <code>networkState</code> ＝＝ <code>EMPTY时，其值为空字符串（empty string）</code>; 否则，它会是 {{domxref("HTMLSourceElement")}} 所包含媒体列表中的一个，或者是 {{HTMLElement("source")}} 标签的src 值.</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">var obj = document.createElement('video'); +console.log(obj.currentSrc); // "" +</pre> + +<h2 id="标准化">标准化</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">标准</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#dom-media-currentsrc", "HTMLMediaElement.currentSrc")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.currentSrc")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.currentSrc")}}</p> + +<h2 id="See_Also" name="See_Also">参考</h2> + +<ul> + <li>The interface defining it, {{domxref("HTMLMediaElement")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/currenttime/index.html b/files/zh-cn/web/api/htmlmediaelement/currenttime/index.html new file mode 100644 index 0000000000..aeed937312 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/currenttime/index.html @@ -0,0 +1,118 @@ +--- +title: HTMLMediaElement.currentTime +slug: Web/API/HTMLMediaElement/currentTime +translation_of: Web/API/HTMLMediaElement/currentTime +--- +<div>{{APIRef("HTML DOM")}}</div> + +<div> </div> + +<div><strong><code>HTMLMediaElement.currentTime</code></strong> 属性会以秒为单位返回当前媒体元素的播放时间。设置这个属性会改变媒体元素当前播放位置。</div> + +<div> </div> + +<div class="note"> +<p>该处原文：The <strong><code>HTMLMediaElement.currentTime</code></strong> property gives the current playback time in seconds. Setting this value seeks the media to the new time.</p> +</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="brush: js">var <em>cTime</em> = <em>video</em>.currentTime; +<em>video</em>.currentTime = 35;</pre> + +<p> </p> + +<h3 id="返回值">返回值</h3> + +<p>一个 <code>double</code> 双精度浮点数。</p> + +<h2 id="Examples" name="Examples">示例</h2> + +<pre class="brush: js">var obj = document.createElement('video'); +console.log(obj.currentTime); +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范版本</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "embedded-content.html#dom-media-currenttime", "HTMLMediaElement.currentTime")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.currentTime")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}} [1]</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_Also" name="See_Also">相关链接</h2> + +<ul> + <li>The interface defining it, {{domxref("HTMLMediaElement")}}.</li> + <li><code><a href="/en-US/docs/Web/API/HTMLMediaElement/fastSeek">HTMLMediaElement.fastSeek()</a></code> for another method of setting the time</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/duration/index.html b/files/zh-cn/web/api/htmlmediaelement/duration/index.html new file mode 100644 index 0000000000..575e8be90c --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/duration/index.html @@ -0,0 +1,61 @@ +--- +title: HTMLMediaElement.duration +slug: Web/API/HTMLMediaElement/duration +tags: + - API + - HTML + - Video + - Web +translation_of: Web/API/HTMLMediaElement/duration +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>HTMLMediaElement.duration</code></strong> 属性以秒为单位给出媒体的长度，如果没有媒体数据可用，则为零。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="brush: js">var <em>myDuration</em> = <em>audioOrVideo</em>.duration</pre> + +<h3 id="值">值</h3> + +<p> 如果媒体数据可用但长度未知，则此值为NaN。 如果媒体流式传输且没有预定义长度，则值为Inf。</p> + +<h2 id="例子">例子</h2> + +<pre class="brush: js">var obj = document.createElement('video'); +console.log(obj.duration); // NaN +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement.duration")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.duration")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持">浏览器支持</h2> + +<div class="hidden">此页面上的兼容性表格由结构化数据生成。 如果您想为数据做出贡献，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送拉取请求。</div> + +<p>{{Compat("api.HTMLMediaElement.duration")}}</p> + +<h2 id="See_Also" name="See_Also">相关内容</h2> + +<ul> + <li>定义它的接口， {{domxref("HTMLMediaElement")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/durationchange_event/index.html b/files/zh-cn/web/api/htmlmediaelement/durationchange_event/index.html new file mode 100644 index 0000000000..33792ed248 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/durationchange_event/index.html @@ -0,0 +1,125 @@ +--- +title: 'HTMLMediaElement: durationchange 事件' +slug: Web/API/HTMLMediaElement/durationchange_event +tags: + - Audio + - Event + - HTMLMe + - HTMLMediaElement + - Reference + - Video +translation_of: Web/API/HTMLMediaElement/durationchange_event +--- +<p>{{APIRef("HTMLMediaElement")}}</p> + +<p><span class="seoSummary"><code>durationchange</code> 事件会在 <code>duration</code> 属性更新时被触发。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th scope="row">Target</th> + <td>Element</td> + </tr> + <tr> + <th scope="row">Default Action</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td>{{domxref("GlobalEventHandlers.ondurationchange")}}</td> + </tr> + <tr> + <th scope="row">Specification</th> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td> + </tr> + </tbody> +</table> + +<h2 id="例子">例子</h2> + +<p>下面的例子为 HTMLMediaElement 的 <code>durationchange</code> 事件添加事件监听器，然后在事件触发时发送一个消息。</p> + +<p>使用 <code>addEventListener()</code>:</p> + +<pre class="brush: js notranslate">const video = document.querySelector('video'); + +video.addEventListener('durationchange', (event) => { + console.log('Not sure why, but the duration of the video has changed.'); +});</pre> + +<p>使用 <code>ondurationchange</code> 事件处理器属性：</p> + +<pre class="brush: js notranslate">const video = document.querySelector('video'); + +video.ondurationchange = (event) => { + console.log('Not sure why, but the duration of the video has changed.'); +};</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-durationchange", "durationchange media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-durationchange", "durationchange media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.HTMLMediaElement.durationchange_event")}}</p> + +<h2 id="Related_Events">Related Events</h2> + +<ul> + <li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing event')}}</li> + <li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting event')}}</li> + <li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking event')}}</li> + <li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked event')}}</li> + <li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended event')}}</li> + <li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata event')}}</li> + <li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata event')}}</li> + <li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay event')}}</li> + <li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough event')}}</li> + <li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange event')}}</li> + <li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate event')}}</li> + <li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play event')}}</li> + <li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause event')}}</li> + <li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange event')}}</li> + <li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange event')}}</li> + <li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend event')}}</li> + <li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied event')}}</li> + <li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled event')}}</li> +</ul> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/ended_event/index.html b/files/zh-cn/web/api/htmlmediaelement/ended_event/index.html new file mode 100644 index 0000000000..17fcf7c9b8 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/ended_event/index.html @@ -0,0 +1,99 @@ +--- +title: 'HTMLMediaElement: ended' +slug: Web/API/HTMLMediaElement/ended_event +translation_of: Web/API/HTMLMediaElement/ended_event +--- +<p>如果playback或者streaming达到了媒体的未尾或者没有更多可用的数据，将会引发一个<code>ended</code>事件。</p> + +<p>这个事件将会发生在三个相关但独立的上下文中：</p> + +<ul> + <li>Elements based upon {{domxref("HTMLMediaElement")}} ({{HTMLElement("audio")}} and {{HTMLElement("video")}}) fire <code>ended</code> when playback of the media reaches the end of the media.</li> + <li>Media streams' tracks, which are based on the {{domxref("MediaStreamTrack")}} interface, fire <code>ended</code> when the track's source permanently stops sending data on the stream. There are various ways this can happen, including: + <ul> + <li>There is no more data left to send.</li> + <li>The user revoked the permissions needed for the data to be sent.</li> + <li>The hardware generating the source data has been removed or ejected.</li> + <li>A remote peer has permanently stopped sending data; pausing media <em>does not</em> generate an <code>ended</code> event.</li> + </ul> + </li> + <li>一个<a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>节点停止了播放。这可能是由于它到达了之前设置好的终止时间点，也可能是已播放完了整个音频，或者是已播放完了buffer中的数据。另见{{domxref("AudioScheduledSourceNode")}}。</li> +</ul> + +<h2 id="General_info">General info</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended">HTML5 media</a>, <a href="https://www.w3.org/TR/mediacapture-streams/#event-mediastreamtrack-ended">Media Capture and Streams</a> and <a href="https://webaudio.github.io/web-audio-api/">Web Audio API</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">可取消的</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">默认操作</dt> + <dd style="margin: 0 0 0 120px;">无。</dd> +</dl> + +<div class="note"> +<p>While this event is defined in more than one specification, at this time they specify this event identically, so we have documented them as if they were one. If at some point that changes, the documentation will be revised.</p> +</div> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Related_Events">Related Events</h2> + +<ul> + <li>{{event("playing")}}</li> + <li>{{event("waiting")}}</li> + <li>{{event("seeking")}}</li> + <li>{{event("seeked")}}</li> + <li>{{event("ended")}}</li> + <li>{{event("loadedmetadata")}}</li> + <li>{{event("loadeddata")}}</li> + <li>{{event("canplay")}}</li> + <li>{{event("canplaythrough")}}</li> + <li>{{event("durationchange")}}</li> + <li>{{event("timeupdate")}}</li> + <li>{{event("play")}}</li> + <li>{{event("pause")}}</li> + <li>{{event("ratechange")}}</li> + <li>{{event("volumechange")}}</li> + <li>{{event("suspend")}}</li> + <li>{{event("emptied")}}</li> + <li>{{event("stalled")}}</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/error_event/index.html b/files/zh-cn/web/api/htmlmediaelement/error_event/index.html new file mode 100644 index 0000000000..2fb96ad1fb --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/error_event/index.html @@ -0,0 +1,76 @@ +--- +title: 'HTMLMediaElement: error event' +slug: Web/API/HTMLMediaElement/error_event +translation_of: Web/API/HTMLMediaElement/error_event +--- +<div>{{APIRef}}</div> + +<p>事件 <strong><code>error</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>{{domxref("GlobalEventHandlers/onerror", "onerror")}}</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">const video = document.querySelector('video'); +const videoSrc = 'https://path/to/video.webm'; + +video.addEventListener('error', () => { + console.error(`Error loading: ${videoSrc}`); +}); + +video.setAttribute('src', videoSrc);</pre> + +<h2 id="规范">规范</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-error")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-error")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.error_event")}}</p> + +<h2 id="更多">更多</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/index.html b/files/zh-cn/web/api/htmlmediaelement/index.html new file mode 100644 index 0000000000..b9c29bf057 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/index.html @@ -0,0 +1,429 @@ +--- +title: HTMLMediaElement +slug: Web/API/HTMLMediaElement +tags: + - API + - HTML + - HTMLMediaElement + - HTML媒体元素 + - Media + - Video +translation_of: Web/API/HTMLMediaElement +--- +<div>{{APIRef("HTML DOM")}}</div> + +<div>HTML媒体元素接口在属性和方法中添加了 {{domxref("HTMLElement", "HTML元素")}}来支持基础的媒体相关的能力，就像audio和video一样。{{domxref("HTMLVideoElement", "HTML 视频元素")}}和 {{domxref("HTMLAudioElement", "HTML 音频元素")}}元素都继承自此接口。</div> + +<div></div> + +<div>{{InheritanceDiagram(600, 180)}}</div> + +<h2 id="特性">特性</h2> + +<p><em>从父级 {{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}}, 和 {{domxref("EventTarget")}} 继承属性</em></p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">名称</th> + <th scope="col">类型</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>audioTracks</code></td> + <td>{{domxref("AudioTrackList")}}</td> + <td> + <p>表示在该元素中包含的{{domxref("AudioTrack")}}对象列表</p> + </td> + </tr> + <tr> + <td><code>autoplay</code></td> + <td>{{domxref("Boolean")}}</td> + <td> + <p>表示{{ htmlattrxref("autoplay", "video") }}的HTML属性，表明在视频加载可用时是否不中断地自动播放资源</p> + </td> + </tr> + <tr> + <td><code>buffered </code>{{readonlyinline}}</td> + <td>{{ domxref("TimeRanges") }}</td> + <td><code>buffered</code>属性会告诉浏览器哪一部分的媒体已经被下载（如果浏览器支持的话），按照标准会返回一个{{ domxref("TimeRanges") }}对象</td> + </tr> + <tr> + <td><code>controller</code></td> + <td>{{ domxref("MediaController")}}</td> + <td> + <p>返回当前媒体控制器的MediaController 对象，如果没有连接就返回null</p> + </td> + </tr> + <tr> + <td><code>controls</code></td> + <td>{{domxref("Boolean")}}</td> + <td>映射在HTML标签。{{ htmlattrxref("controls", "video") }}属性控制是否显示用户播放界面的控制 HTML</td> + </tr> + <tr> + <td><code>crossOrigin</code></td> + <td>{{ domxref("DOMString") }}</td> + <td>一个表示媒体元素 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_settings_attributes">CORS 设置</a>的{{ domxref("DOMString") }}。从 <a href="/en-US/docs/HTML/CORS_settings_attributes" title="HTML/CORS settings attributes">CORS settings attributes</a> 查看更多详情</td> + </tr> + <tr> + <td><code>currentSrc</code> {{readonlyinline}}</td> + <td>{{ domxref("DOMString") }}</td> + <td>用{{domxref("DOMString")}}表示媒体文件的绝对URL。如果<code>networkState</code> 为<code>EMPTY，</code>那么值为空字符串。</td> + </tr> + <tr> + <td><code>currentTime</code></td> + <td><code>double</code></td> + <td>当前播放时间，单位为秒。为其赋值将会使媒体跳到一个新的时间。</td> + </tr> + <tr> + <td><code>defaultMuted</code></td> + <td>{{domxref("Boolean")}}</td> + <td>映射在HTML标签上。 {{ htmlattrxref("muted", "video") }} 属性表示媒体声音被播放时是否应该被静音。这个属性不能动态设置静音/不静音，如果希望设置静音/不静音，请使用 <code>muted</code> 属性</td> + </tr> + <tr> + <td><code>defaultPlaybackRate</code></td> + <td><code>double</code></td> + <td>控制媒体的播放速度。1.0表示正常的播放速度，如果值小于1.0，则播放速度会比”正常速度“慢，如果值大于1.0，则播放速度会比”正常速度“快。0.0是一个无效的值，并且会抛出 <code>NOT_SUPPORTED_ERR</code> 错误。</td> + </tr> + <tr> + <td><code>duration </code>{{readonlyinline}}</td> + <td><code>double</code></td> + <td>媒体以秒为单位的总长度时间，如果媒体不可用，则为0. 如果媒体可用，但时间长度未知, 值为NAN. 如果媒体是以stream形式传输并且没有预定长度，则值为Inf。</td> + </tr> + <tr> + <td><code>ended </code>{{readonlyinline}}</td> + <td>{{domxref("Boolean")}}</td> + <td>表示媒体是否已经播放完毕。</td> + </tr> + <tr> + <td><code>error </code>{{readonlyinline}}</td> + <td>{{ domxref("MediaError") }}</td> + <td>{{domxref("MediaError")}} 对象表示最近的错误，如果没有错误则值为 <code>null</code>。</td> + </tr> + <tr> + <td><code>initialTime </code>{{readonlyinline}} {{ non-standard_inline() }} {{deprecated_inline}}</td> + <td><code>double</code></td> + <td>初始播放位置（以秒为单位）。</td> + </tr> + <tr> + <td><code>loop</code></td> + <td>{{domxref("Boolean")}}</td> + <td>会映射在HTML标签 {{ htmlattrxref("loop", "video") }} 属性 , 决定该媒体是否循环播放.</td> + </tr> + <tr> + <td><code>mediaGroup</code></td> + <td>{{domxref("DOMString")}}</td> + <td>反映在HTML {{ htmlattrxref("mediagroup", "video")}} 标签上。 表示元素所归属的分组，同一组的媒体元素会共享同一个控制器（<code>controller</code>）。</td> + </tr> + <tr> + <td>mediaKeys {{experimental_inline}}{{readonlyinline}}</td> + <td>{{domxref("MediaKeys")}}</td> + <td>Returns a reference to the <span style="background-color: rgba(212, 221, 228, 0.14902); line-height: 19.0909080505371px;">{{domxref("MediaKeys")}} interface, which is a set of keys that an associated HTMLMediaElement can use for decription of media data during playback.</span></td> + </tr> + <tr> + <td><code>mozAudioChannelType</code> {{ non-standard_inline() }}</td> + <td>{{domxref("DOMString")}}</td> + <td>Can be used to set the audio channel that the sound coming from an {{htmlelement("audio")}} or {{htmlelement("video")}} element will play in, on a Firefox OS device. See <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a> for more details.</td> + </tr> + <tr> + <td><code>mozChannels </code>{{readonlyinline}} {{ non-standard_inline() }}</td> + <td><code>long</code></td> + <td>声道数 (比如 <code>2</code> 是立体声).<strong> </strong></td> + </tr> + <tr> + <td><code>mozFrameBufferLength</code> {{ non-standard_inline() }}</td> + <td><code>long</code></td> + <td> + <p>Indicates the number of samples that will be returned in the framebuffer of each <code>MozAudioAvailable</code> event. This number is a total for all channels, and by default is set to be the number of channels * 1024 (e.g., 2 channels * 1024 samples = 2048 total).</p> + + <p>The <code>mozFrameBufferLength</code> property can be set to a new value, for lower latency, or larger amounts of data, etc. The size given <em>must</em> be a number between 512 and 16384. Using any other size results in an exception being thrown. The best time to set a new length is after the <code>loadedmetadata</code> event fires, when the audio info is known, but before the audio has started or <code>MozAudioAvailable</code> events have begun firing.</p> + </td> + </tr> + <tr> + <td><code>mozSampleRate </code>{{readonlyinline}} {{ non-standard_inline() }}</td> + <td><code>long</code></td> + <td>播放内容的采样率（每秒采样次数）。比如，44100 就是一张CD的采样率。</td> + </tr> + <tr> + <td><code>mozSrcObject </code>{{ non-standard_inline() }}</td> + <td>{{domxref("MediaStream")}}</td> + <td>Lets you set or get the <a href="/en-US/docs/WebRTC/MediaStream_API" title="/en-US/docs/WebRTC/MediaStream_API">Media Stream</a> to be played or being played.</td> + </tr> + <tr> + <td><code>muted</code></td> + <td>{{domxref("Boolean")}}</td> + <td><code>静音时为true</code> ，否则是<code>false</code> .</td> + </tr> + <tr> + <td><code>networkState</code></td> + <td><code>unsigned short</code></td> + <td>获取媒体时的网络状态 + <table class="standard-table"> + <tbody> + <tr> + <td class="header">常量定义</td> + <td class="header">值</td> + <td class="header">描述</td> + </tr> + <tr> + <td><code>NETWORK_EMPTY</code></td> + <td>0</td> + <td>还没数据。<code>readyState</code> 是 <code>HAVE_NOTHING</code>.</td> + </tr> + <tr> + <td><code>NETWORK_IDLE</code></td> + <td>1</td> + <td></td> + </tr> + <tr> + <td><code>NETWORK_LOADING</code></td> + <td>2</td> + <td>正在加载.</td> + </tr> + <tr> + <td><code>NETWORK_NO_SOURCE</code>{{ ref("1") }}</td> + <td>3</td> + <td></td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <td><code>paused </code>{{readonlyinline}}</td> + <td>{{domxref("Boolean")}}</td> + <td>指示媒体元素是否被暂停。</td> + </tr> + <tr> + <td><code>playbackRate</code></td> + <td><code>double</code></td> + <td> + <p>The current rate at which the media is being played back. This is used to implement user controls for fast forward, slow motion, and so forth. The normal playback rate is multiplied by this value to obtain the current rate, so a value of 1.0 indicates normal speed.</p> + + <p>If the <code>playbackRate</code> is negative, the media is played backwards.<br> + The audio is muted when the media plays backwards or if the fast forward or slow motion is outside a useful range (E.g. Gecko mute the sound outside the range <code>0.25</code> and <code>5.0</code>).</p> + + <p>The pitch of the audio is corrected by default and is the same for every speed. Some browsers implement the non-standard <code>preservespitch</code> property to control this.</p> + </td> + </tr> + <tr> + <td><code>played</code> {{readonlyinline}}</td> + <td>{{ domxref("TimeRanges") }}</td> + <td>媒体可被播放的范围。</td> + </tr> + <tr> + <td><code>preload</code></td> + <td>{{ domxref("DOMString") }}</td> + <td>Reflects the {{ htmlattrxref("preload", "video") }} HTML attribute, indicating what data should be preloaded, if any. Possible values are: <code>none</code>, <code>metadata</code>, <code>auto</code>. See {{ htmlattrxref("preload", "video") }} attribute documentation for details.</td> + </tr> + <tr> + <td><code>readyState </code>{{readonlyinline}}</td> + <td><code>unsigned short</code></td> + <td>The readiness state of the media. + <table class="standard-table"> + <tbody> + <tr> + <td class="header">Constant</td> + <td class="header">Value</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>HAVE_NOTHING</code></td> + <td>0</td> + <td>No information is available about the media resource.</td> + </tr> + <tr> + <td><code>HAVE_METADATA</code></td> + <td>1</td> + <td>Enough of the media resource has been retrieved that the metadata attributes are initialized. Seeking will no longer raise an exception.</td> + </tr> + <tr> + <td><code>HAVE_CURRENT_DATA</code></td> + <td>2</td> + <td>Data is available for the current playback position, but not enough to actually play more than one frame.</td> + </tr> + <tr> + <td><code>HAVE_FUTURE_DATA</code></td> + <td>3</td> + <td>Data for the current playback position as well as for at least a little bit of time into the future is available (in other words, at least two frames of video, for example).</td> + </tr> + <tr> + <td><code>HAVE_ENOUGH_DATA</code></td> + <td>4</td> + <td>Enough data is available—and the download rate is high enough—that the media can be played through to the end without interruption.</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <td><code>seekable </code>{{readonlyinline}}</td> + <td>{{ domxref("TimeRanges") }}</td> + <td>The time ranges that the user is able to seek to, if any<strong>.</strong></td> + </tr> + <tr> + <td><code>seeking </code>{{readonlyinline}}</td> + <td>{{domxref("Boolean")}}</td> + <td>Indicates whether the media is in the process of seeking to a new position.</td> + </tr> + <tr> + <td><code>sinkId</code> {{readonlyinline}}{{experimental_inline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The unique ID of the audio device delivering output, or an empty string if it is using the user agent default. This ID should be one of the <code>MediaDeviceInfo.deviceid</code> values returned from {{domxref("MediaDevices.enumeratedDevices()")}}, <code>id-multimedia</code>, or <code>id-communications</code>.</td> + </tr> + <tr> + <td><code>src</code></td> + <td>{{ domxref("DOMString") }}</td> + <td>Reflects the {{ htmlattrxref("src", "video") }} HTML attribute, containing the URL of a media resource to use. Gecko implements a similar functionality for streams: <code>mozSrcObject</code>.</td> + </tr> + <tr> + <td><code>textTracks</code></td> + <td>{{domxref("TextTrackList")}}</td> + <td>Represents the list of {{domxref("TextTrack")}} objects contained in the element.</td> + </tr> + <tr> + <td><code>videoTracks</code></td> + <td>{{domxref("VideoTrackList")}}</td> + <td>Represents the list of {{domxref("VideoTrack")}} objects contained in the element. + <div class="note"> + <p><strong>Note:</strong> Yet Gecko supports only single track playback, and the parsing of tracks' metadata is only available for media with Ogg container foramt.</p> + </div> + </td> + </tr> + <tr> + <td><code>volume</code></td> + <td><code>double</code></td> + <td>表示音频的音量。值从0.0（静音）到1.0（最大音量）。</td> + </tr> + </tbody> +</table> + +<h2 id="Methods">Methods</h2> + +<p><em>Inherits methods from its parent, </em><em>{{domxref("HTMLElement")}}.</em></p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Name & Arguments</th> + <th scope="col">Return</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>canPlayType(in </code>{{ domxref("DOMString") }}<code> type)</code></td> + <td> + <p>{{ domxref("DOMString") }}</p> + + <ul> + <li><code>probably</code>: if the specified type appears to be playable.</li> + <li><code>maybe</code>: if it's impossible to tell whether the type is playable without playing it.</li> + <li>The <em>empty string</em>: if the specified type definitely cannot be played.</li> + </ul> + </td> + <td>Determines whether the specified media type can be played back. + <div class="note"> + <p><strong>Note:</strong> Previously <code>canPlayType('video/webm')</code> returned <code>'probably'</code>. Starting with Gecko 28 {{geckoRelease(28)}}, it returns <code>'maybe'</code>. ({{ bug(884275) }})</p> + </div> + </td> + </tr> + <tr> + <td><code>fastSeek(double time)</code></td> + <td><code>void</code></td> + <td>Directly seek to the given time.</td> + </tr> + <tr> + <td><code>load()</code></td> + <td><code>void</code></td> + <td>Reset the media element and restart selecting the media resource. Any pending events are discarded. How much media data is fetched is still affected by the <code>preload</code> attribute. This method can be useful for releasing resources after any <code>src</code> attribute and <code>source</code> element descendants have been removed. Otherwise, it is usually unnecessary to use this method, unless required to rescan <code>source</code> element children after dynamic changes.</td> + </tr> + <tr> + <td><code>mozGetMetadata()</code>{{ non-standard_inline() }}</td> + <td><code>Object</code></td> + <td>The <code>mozGetMetadata</code> method returns a javascript object whose properties represent metadata from the playing media resource as {key: value} pairs. A separate copy of the data is returned each time the method is called.<br> + This method must be called after the <code>loadedmetadata</code> event fires.</td> + </tr> + <tr> + <td><code>mozLoadFrom(HTMLMediaElement other)</code>{{ non-standard_inline() }} {{ deprecated_inline() }}</td> + <td><code>void</code></td> + <td>This method, available only in old Mozilla's implementation, loads data from another media element. This works similarly to <code>load()</code> except that instead of running the normal resource selection algorithm, the source is simply set to the <code>other</code> element's <code>currentSrc</code>.<br> + This is optimized so this element gets access to all of the <code>other</code> element's cached and buffered data; in fact, the two elements share downloaded data so that data downloaded by either element is available to both.</td> + </tr> + <tr> + <td><code>pause()</code></td> + <td><code>void</code></td> + <td>暂停播放。</td> + </tr> + <tr> + <td><a id="play" name="play"><code>play()</code></a></td> + <td><code>void</code></td> + <td>开始播放。</td> + </tr> + <tr> + <td>setMediaKeys {{experimental_inline}}</td> + <td>{{jsxref("Promise")}}</td> + <td>Sets the {{domxref("MediaKeys")}} keys to use when decrypting media during playback.</td> + </tr> + <tr> + <td>setSinkId {{experimental_inline}}</td> + <td>{{jsxref("Promise")}}</td> + <td>Sets the ID of the audio device through which audio output should be rendered if the application is authorized to play out of a given device.</td> + </tr> + </tbody> +</table> + +<h2 id="Events">Events</h2> + +<p>Audio and Video elements can fire quite a few different <a href="/en-US/docs/Web/Guide/Events/Media_events">events</a>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('Encrypted Media Extensions', '#introduction', 'Encrypted Media Extensions')}}</td> + <td>{{Spec2('Encrypted Media Extensions')}}</td> + <td>Adds <span style="background-color: rgba(212, 221, 228, 0.14902); line-height: 19.0909080505371px;">{{domxref("MediaKeys")}}, </span>{{domxref("MediaEncryptedEvent")}}, and setMediaKeys.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("api.HTMLMediaElement")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>References + <ul> + <li>{{ HTMLElement("video") }} and {{HTMLElement("audio")}} HTML elements.</li> + <li>{{ domxref("HTMLVideoElement") }} and {{ domxref("HTMLAudioElement") }} interfaces, derived from <code>HTMLMediaElement</code>.</li> + </ul> + </li> + <li>Articles + <ul> + <li><a class="internal" href="/en-US/docs/Using_HTML5_audio_and_video" title="Using HTML5 audio and video">Using HTML5 audio and video</a></li> + <li><a class="internal" href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a></li> + <li><a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a></li> + </ul> + </li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/load/index.html b/files/zh-cn/web/api/htmlmediaelement/load/index.html new file mode 100644 index 0000000000..eb674466d9 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/load/index.html @@ -0,0 +1,74 @@ +--- +title: HTMLMediaElement.load() +slug: Web/API/HTMLMediaElement/load +translation_of: Web/API/HTMLMediaElement/load +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary"> <code><strong>load()</strong></code> 方法重置媒体成初始化状态，选择一个播放源， 为载入媒体重新播放做准备。</span> 媒体预播放的信息是由 <span class="seoSummary"><code><strong>preload</strong></code></span> 这个参数决定的。</p> + +<p>此方法只在对媒体做动态更改时管用，要么更改<code>src</code>属性，要么添加或删除<code>source</code> 。 <code>load()</code> 将会重置元素重新扫描可用的源，从而让改动生效。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>mediaElement</em>.load();</pre> + +<h3 id="参数">参数</h3> + +<p>None.</p> + +<h3 id="返回值">返回值</h3> + +<p><code>undefined</code>.</p> + +<h2 id="用法">用法</h2> + +<p>调用 <code>load()</code> 会使媒体上所有正在进行的操作中止，然后根据 <code>audio</code> 或者 <code>video</code> 元素的 <code>src</code> 或者 <code>source</code> 属性里寻找合适的播放源并重新加载媒体内容。 更多查看 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content#Supporting_multiple_formats" title="And that's a wrap; we hope you had fun playing with video and audio in web pages! In the next article, we'll look at other ways of embedding content on the Web, using technologies like <iframe> and <object>.">Supporting multiple formats</a> 和 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content" title="And that's a wrap; we hope you had fun playing with video and audio in web pages! In the next article, we'll look at other ways of embedding content on the Web, using technologies like <iframe> and <object>.">Video and audio content</a> 。</p> + +<p>The process of aborting any ongoing activities will cause any outstanding {{jsxref("Promise")}}s returned by {{domxref("HTMLMediaElement.play", "play()")}} being resolved or rejected as appropriate based on their status before the loading of new media can begin. Pending play promises are aborted with an <code>"AbortError"</code> {{domxref("DOMException")}}.</p> + +<p>在load过程中 合适的事件会发生并通知给媒体本身，包括：</p> + +<ul> + <li>如果已经是 <code>load</code> 过了，则 <code>abort</code> 事件发送给媒体。</li> + <li>If the element has already been initialized with media, the <strong>{{event("emptied")}}</strong> event is sent.</li> + <li>如果重置播放位置到开始，通常指修改播放位置，<strong>timeupdate</strong> 事件触发。</li> + <li>当已经选择了源并且已经准备加载内容了，<strong>loadstart</strong> 事件触发。</li> + <li>之前的几点，媒体加载并且事件已经送达</li> +</ul> + +<h2 id="例子">例子</h2> + +<p>例子中有一个 {{HTMLElement("video")}} 元素然后重置它 <code>load()</code>.</p> + +<pre class="brush: js">var mediaElem = document.querySelector("video"); +mediaElem.load(); +</pre> + +<h2 id="说明">说明</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#dom-media-load", "HTMLMediaElement.load()")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "semantics-embedded-content.html#dom-htmlmediaelement-load", "HTMLMediaElement.load()")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.load")}}</p> diff --git a/files/zh-cn/web/api/htmlmediaelement/loadeddata_event/index.html b/files/zh-cn/web/api/htmlmediaelement/loadeddata_event/index.html new file mode 100644 index 0000000000..a512174e22 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/loadeddata_event/index.html @@ -0,0 +1,80 @@ +--- +title: 'HTMLMediaElement: loadeddata' +slug: Web/API/HTMLMediaElement/loadeddata_event +translation_of: Web/API/HTMLMediaElement/loadeddata_event +--- +<p><code>loadeddata</code> 事件在第一帧数据加载完成后触发。</p> + +<h2 id="基本信息">基本信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">规范</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/html5/media-elements.html#mediahttp://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadeddataevents">HTML5 media</a></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">Event</dd> + <dt style="float: left; text-align: right; width: 120px;">冒泡</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">可取消</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">目标</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0 0 0 120px;">None.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Related_Events">Related Events</h2> + +<ul> + <li>{{event("playing")}}</li> + <li>{{event("waiting")}}</li> + <li>{{event("seeking")}}</li> + <li>{{event("seeked")}}</li> + <li>{{event("ended")}}</li> + <li>{{event("loadedmetadata")}}</li> + <li>{{event("loadeddata")}}</li> + <li>{{event("canplay")}}</li> + <li>{{event("canplaythrough")}}</li> + <li>{{event("durationchange")}}</li> + <li>{{event("timeupdate")}}</li> + <li>{{event("play")}}</li> + <li>{{event("pause")}}</li> + <li>{{event("ratechange")}}</li> + <li>{{event("volumechange")}}</li> + <li>{{event("suspend")}}</li> + <li>{{event("emptied")}}</li> + <li>{{event("stalled")}}</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/loadstart_event/index.html b/files/zh-cn/web/api/htmlmediaelement/loadstart_event/index.html new file mode 100644 index 0000000000..189a2e97ad --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/loadstart_event/index.html @@ -0,0 +1,155 @@ +--- +title: 'HTMLMediaElement: loadstart event' +slug: Web/API/HTMLMediaElement/loadstart_event +translation_of: Web/API/HTMLMediaElement/loadstart_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>loadstart</code></strong> 事件当浏览器开始载入一个资源文件时fired.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>No</td> + </tr> + <tr> + <th scope="row">可撤销</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td>{{domxref("GlobalEventHandlers/onloadstart", "onloadstart")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Examples</h2> + +<h3 id="Live_example">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">Result</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '200px') }}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-loadstart", "loadstart media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-loadstart", "loadstart media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.HTMLMediaElement.loadstart_event")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/loop/index.html b/files/zh-cn/web/api/htmlmediaelement/loop/index.html new file mode 100644 index 0000000000..f53af6a025 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/loop/index.html @@ -0,0 +1,116 @@ +--- +title: HTMLMediaElement.loop +slug: Web/API/HTMLMediaElement/loop +translation_of: Web/API/HTMLMediaElement/loop +--- +<div>{{APIRef("HTML DOM")}}</div> + +<div> </div> + +<div><strong><code>HTMLMediaElement.loop</code></strong> 属性是 HTML 标签 {{htmlattrxref("loop", "video")}} 属性的映射，它决定了媒体元素播放结束时是否重新开始。</div> + +<div> </div> + +<div class="note"> +<p>原文：The <strong><code>HTMLMediaElement.loop</code></strong> property reflects the {{htmlattrxref("loop", "video")}} HTML attribute, which controls whether the media element should start over when it reaches the end.</p> +</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="brush: js">var <em>loop</em> = <em>video</em>.loop; +<em>audio</em>.loop = true; +</pre> + +<h3 id="返回值">返回值</h3> + +<p>一个布尔值 {{domxref("Boolean")}}.</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">var obj = document.createElement('video'); +obj.loop = true; // true +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement.loop")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.loop")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td><code>loop</code> property</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><code>loop</code> property</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("11.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_Also" name="See_Also">相关链接</h2> + +<ul> + <li>The interface defining it, {{domxref("HTMLMediaElement")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/muted/index.html b/files/zh-cn/web/api/htmlmediaelement/muted/index.html new file mode 100644 index 0000000000..402a057324 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/muted/index.html @@ -0,0 +1,59 @@ +--- +title: HTMLMediaElement.muted +slug: Web/API/HTMLMediaElement/muted +translation_of: Web/API/HTMLMediaElement/muted +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>HTMLMediaElement.muted</code></strong> 表示媒体元素是否被静音。</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>isMuted</em> = <em>audioOrVideo</em>.muted +<em>audio</em>.muted = true;</pre> + +<h3 id="Value">Value</h3> + +<p>A {{domxref("Boolean")}}. <code>true</code> 表示被静音， <code>false</code> 表示未被静音。</p> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">var obj = document.createElement('video'); +console.log(obj.muted); // false +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#dom-media-muted", "HTMLMediaElement.muted")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.muted")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.HTMLMediaElement.muted")}}</p> + +<h2 id="See_Also" name="See_Also">See also</h2> + +<ul> + <li>The interface defining it, {{domxref("HTMLMediaElement")}}.</li> + <li>{{domxref("HTMLMediaElement.defaultMuted")}}</li> + <li>{{domxref("HTMLMediaElement.volume")}}</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/networkstate/index.html b/files/zh-cn/web/api/htmlmediaelement/networkstate/index.html new file mode 100644 index 0000000000..09164c8b35 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/networkstate/index.html @@ -0,0 +1,161 @@ +--- +title: HTMLMediaElement.networkState +slug: Web/API/HTMLMediaElement/networkState +tags: + - API + - HTML DOM + - Web + - 只读 + - 属性 +translation_of: Web/API/HTMLMediaElement/networkState +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary"> <strong><code>HTMLMediaElement.networkState</code></strong> 属性表示在网络上获取媒体的当前状态。</span></p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">var networkState = audioOrVideo.networkState;</pre> + +<h3 id="取值">取值</h3> + +<p>一个 <code>unsigned short</code>。可能的值包括：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">常量</th> + <th scope="col"> 值 </th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>NETWORK_EMPTY</code></td> + <td>0</td> + <td>还没有数据。并且 <code>readyState</code> 的值是 <code>HAVE_NOTHING</code>。</td> + </tr> + <tr> + <td><code>NETWORK_IDLE</code></td> + <td>1</td> + <td>HTMLMediaElement 是有效的并且已经选择了一个资源,，但是还没有使用网络。</td> + </tr> + <tr> + <td><code>NETWORK_LOADING</code></td> + <td>2</td> + <td>浏览器正在下载 HTMLMediaElement 数据。</td> + </tr> + <tr> + <td><code>NETWORK_NO_SOURCE</code></td> + <td>3</td> + <td>没有找到 HTMLMediaElement src。</td> + </tr> + </tbody> +</table> + +<h2 id="例子">例子</h2> + +<p>这个例子监听audio元素以开始播放，然后检查是否仍然在加载数据。</p> + +<pre class="brush: html"><audio id="example" preload="auto"> + <source src="sound.ogg" type="audio/ogg" /> +</audio> + +</pre> + +<pre class="brush: js">var obj = document.getElementById('example'); + +obj.addEventListener('playing', function() { + + if (obj.networkState === 2) { + // Still loading... + } + +}); +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement.networkState")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>未对 {{SpecName('HTML5 W3C')}} 更改</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.networkState")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初始定义。</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}} [1]</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>NETWORK_LOADED</code> 已被移除以与Gecko 2.0的HTML规范一致。{{geckoRelease(2)}}. </p> + +<h2 id="See_Also" name="See_Also">另见</h2> + +<ul> + <li>定义它的接口, {{domxref("HTMLMediaElement")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/onerror/index.html b/files/zh-cn/web/api/htmlmediaelement/onerror/index.html new file mode 100644 index 0000000000..8589fdd95a --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/onerror/index.html @@ -0,0 +1,48 @@ +--- +title: HTMLMediaElement.onerror +slug: Web/API/HTMLMediaElement/onerror +translation_of: Web/API/HTMLMediaElement/onerror +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>The <strong><code>onerror</code></strong> property of the {{domxref("HTMLMediaElement")}} interface is the {{domxref("EventHandler")}} for processing {{event("error")}} events.</p> + +<p>The <code>error</code> event fires when some form of error occurs while attempting to load or perform the media.</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>HTMLMediaElement</em>.onerror = <em>EventListener</em>;</pre> + +<h3 id="Value">Value</h3> + +<p>A {{jsxref("function")}} which serves as the event handler for the {{event("error")}} event. When an error occurs, the specified function will be called. If <code>null</code>, no error handler is in effect.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onerror','onerror')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.HTMLMediaElement.onerror")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("HTMLMediaElement")}}</li> + <li>{{HTMLElement("audio")}} and {{HTMLElement("video")}}</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/pause/index.html b/files/zh-cn/web/api/htmlmediaelement/pause/index.html new file mode 100644 index 0000000000..75953aa012 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/pause/index.html @@ -0,0 +1,56 @@ +--- +title: HTMLMediaElement.pause() +slug: Web/API/HTMLMediaElement/pause +tags: + - 媒体 + - 视频 + - 音频 +translation_of: Web/API/HTMLMediaElement/pause +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p><strong><code>HTMLMediaElement.pause()</code></strong> 方法可用来暂停媒体的播放，如果媒体已经处于暂停状态，该方法没有效果.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate"><em>HTMLMediaElement</em>.pause()</pre> + +<h3 id="参数">参数</h3> + +<p>无.</p> + +<h3 id="返回值">返回值</h3> + +<p>无.</p> + +<h3 id="异常">异常</h3> + +<p>无.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-pause', 'pause()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition; living specification.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','embedded-content-0.html#dom-media-pause','pause()')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">本页面的兼容性表格是通过结构化数据生成的.如果你也想提交贡献, 请访问<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并给我们发送合并请求(PR).</div> + +<p>{{Compat("api.HTMLMediaElement.pause")}}</p> diff --git a/files/zh-cn/web/api/htmlmediaelement/pause_event/index.html b/files/zh-cn/web/api/htmlmediaelement/pause_event/index.html new file mode 100644 index 0000000000..824f4bb5ff --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/pause_event/index.html @@ -0,0 +1,127 @@ +--- +title: 'HTMLMediaElement: pause event' +slug: Web/API/HTMLMediaElement/pause_event +translation_of: Web/API/HTMLMediaElement/pause_event +--- +<div>{{APIRef("HTMLMediaElement")}}</div> + +<div></div> + +<p><span class="seoSummary">当暂停媒体播放时 <code>pause</code> 事件触发， 并且媒体进入暂停状态，最常见的是通过<code>pause()</code>方法来触发。</span> 当<code>pause()</code> 触发时<code>pause</code>状态只改变1次，并且媒体的<code>pause</code>变成 <code>true</code>。</p> + +<h2 id="General_info">General info</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th scope="row">Target</th> + <td>Element</td> + </tr> + <tr> + <th scope="row">Default Action</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td>{{domxref("GlobalEventHandlers.onpause")}}</td> + </tr> + <tr> + <th scope="row">Specification</th> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td> + </tr> + </tbody> +</table> + +<h2 id="例子">例子</h2> + +<p>下面例子给媒体添加 <code>pause</code> 事件监听handler，然后事件发生时会给handler发送一个提醒信息</p> + +<p>使用 <code>addEventListener()：</code></p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.addEventListener('pause', (event) => { + console.log('The Boolean paused property is now true. Either the ' + + 'pause() method was called or the autoplay attribute was toggled.'); +});</pre> + +<p>使用 <code>onpause</code> 事件监听属性：</p> + +<pre class="brush: js">const video = document.querySelector('video'); + +video.onpause = (event) => { + console.log('The Boolean paused property is now true. Either the ' + + 'pause() method was called or the autoplay attribute was toggled.'); +};</pre> + +<h2 id="说明">说明</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-pause", "pause media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-pause", "pause media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.pause_event")}}</p> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing event')}}</li> + <li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting event')}}</li> + <li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking event')}}</li> + <li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked event')}}</li> + <li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended event')}}</li> + <li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata event')}}</li> + <li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata event')}}</li> + <li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay event')}}</li> + <li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough event')}}</li> + <li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange event')}}</li> + <li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate event')}}</li> + <li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play event')}}</li> + <li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause event')}}</li> + <li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange event')}}</li> + <li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange event')}}</li> + <li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend event')}}</li> + <li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied event')}}</li> + <li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled event')}}</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> + <li>{{domxref("SpeechSynthesisUtterance")}}</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/paused/index.html b/files/zh-cn/web/api/htmlmediaelement/paused/index.html new file mode 100644 index 0000000000..3830dc9a7f --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/paused/index.html @@ -0,0 +1,104 @@ +--- +title: HTMLMediaElement.paused +slug: Web/API/HTMLMediaElement/paused +translation_of: Web/API/HTMLMediaElement/paused +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><code><font face="Open Sans, Arial, sans-serif">属性(只读)</font><strong>HTMLMediaElement.paused</strong></code> 告诉视频是否正在暂停</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">var <em>isPaused</em> = <em>audioOrVideo</em>.paused</pre> + +<h3 id="返回值">返回值</h3> + +<p>类型{{domxref("Boolean")}}. <code>true暂停中</code> <code>false</code> 没有暂停</p> + +<p><em>仅限暂停状态 因网络原因造成的缓冲状态仍然会告诉你不在暂停状态</em></p> + +<h2 id="例子">例子</h2> + +<pre class="brush: js">var obj = document.createElement('video'); +console.log(obj.paused); // true +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement.paused")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.paused")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}} [1]</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_Also" name="See_Also">参考文档</h2> + +<ul> + <li>The interface defining it, {{domxref("HTMLMediaElement")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/play/index.html b/files/zh-cn/web/api/htmlmediaelement/play/index.html new file mode 100644 index 0000000000..6f0b799471 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/play/index.html @@ -0,0 +1,134 @@ +--- +title: play() +slug: Web/API/HTMLMediaElement/play +tags: + - API + - HTMLMediaElement + - 参考 + - 媒体 + - 接口 + - 播放 + - 方法 + - 视频 + - 音频 +translation_of: Web/API/HTMLMediaElement/play +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p><strong><code>HTMLMediaElement.play()</code></strong> 方法会尝试播放媒体。这个方法返回一个 {{jsxref("Promise")}}，当媒体成功开始播放时被解决（resolved）。当播放因为任何原因失败时，这个 promise 被拒绝（rejected）。</p> + +<h2 id="语法">语法</h2> + +<pre class="notranslate">let <em>promise</em> = <em>HTMLMediaElement</em>.play();</pre> + +<h3 id="参数">参数</h3> + +<p>无</p> + +<h3 id="返回值">返回值</h3> + +<p> 一个 {{jsxref("Promise")}}，当媒体成功开始播放时被解决，当播放因为任何原因失败时则被被拒绝。</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong>旧版本的浏览器可能不会从 <code>play()</code> 返回值。</p> +</div> + +<h3 id="异常">异常</h3> + +<p>当 promise 接收到一个异常名称作为其唯一输入参数时（相对于传统的异常抛出），promise 的拒绝处理程序会被调用。可能的异常如下：</p> + +<dl> + <dt><code>NotAllowedError</code></dt> + <dd>用户代理（浏览器）或操作系统在当前上下文或当前情境下不允许媒体播放。例如，这会发生在浏览器要求用户显式按下播放按钮才播放媒体时。</dd> + <dt><code>NotSupportedError</code></dt> + <dd>媒体源（可能是{{domxref("MediaStream")}}、{{domxref("MediaSource")}}、{{domxref("Blob")}} 或 {{domxref("File")}} 等）不是一个支持的媒体格式。</dd> +</dl> + +<p>也可能报告其他异常，取决于浏览器的实现细节，媒体播放器的实现等等。</p> + +<h2 id="使用说明">使用说明</h2> + +<p>虽然“autoplay”这个词常常被用于描述当媒体加载完成时立即开始播放，浏览器的自动播放策略其实也应用于脚本驱动的媒体播放，包括调用 <code>play()</code>。</p> + +<p>如果 {{Glossary("user agent")}} 被设置为不允许自动或脚本驱动的媒体播放，调用 <code>play()</code> 会导致返回的 promise 被立即以 <code>NotAllowedError</code> 拒绝。网页应该对这种情况做好准备。举个例子，一个网页不应该假定播放已经自动开始而直接展示相应的用户界面，而应该在返回的 promise 被解决或拒绝后再更新用户界面。更多信息参见 {{anch("示例", "示例")}}。</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong><code>play()</code> 方法可能会让用户被询问是否给予播放媒体的权限，这可能会使返回的 promise 延迟解决。你应该确保你的代码不需要即时响应。</p> +</div> + +<p>关于自动播放和禁止自动播放的更多深度内容，参见我们的文章 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide">Autoplay guide for media and Web Audio APIs</a>。</p> + +<h2 id="示例">示例</h2> + +<p>这个例子展示了如何确认播放已经开始以及如何优雅地处理自动播放被禁止：</p> + +<pre class="notranslate">let videoElem = document.getElementById("video"); +let playButton = document.getElementById("playbutton"); + +playButton.addEventListener("click", handlePlayButton, false); +playVideo(); + +async function playVideo() { + try { + await videoElem.play(); + playButton.classList.add("playing"); + } catch(err) { + playButton.classList.remove("playing"); + } +} + +function handlePlayButton() { + if (videoElem.paused) { + playVideo(); + } else { + videoElem.pause(); + playButton.classList.remove("playing"); + } +}</pre> + +<p>在这个例子中，视频的播放由 <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async</a></code> <code>playVideo()</code> 函数控制。函数尝试播放视频，如果播放成功，将 <code>playButton</code> 元素的类名称设为 <code>"playing"</code>。如果播放失败，去除 <code>playButton</code> 元素的类名称，恢复其原来的样式。通过监视 <code>play()</code> 返回的 {{jsxref("Promise")}} 是被解决还是被拒绝以保证播放按钮的外观与实际的播放状态相匹配。</p> + +<p>上述代码开始执行时，先获取 {{HTMLElement("video")}} 元素和用于切换播放、暂停的 {{HTMLElement("button")}} 元素的引用。在切换按钮上添加 {{event("click")}} 事件的处理程序。最后调用 <code>playVideo()</code> 尝试自动开始播放。</p> + +<p>你可以在 <a href="https://media-play-promise.glitch.me/">这里</a> 查看或修改这个例子。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-play', 'play()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition; living specification.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','embedded-content-0.html#playing-the-media-resource','play()')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p>注意，WHATWG 版本和 W3C 版本的规范不一样（2016年4月20日），一个返回 {{jsxref("Promise")}}，一个不返回。</p> +</div> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.HTMLMediaElement.play")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media">Web media technologies</a></li> + <li>Learning: <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide">Autoplay guide for media and Web Audio APIs</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> +</ul> + +<div id="compat-mobile"></div> diff --git a/files/zh-cn/web/api/htmlmediaelement/play_event/index.html b/files/zh-cn/web/api/htmlmediaelement/play_event/index.html new file mode 100644 index 0000000000..c9b39495fd --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/play_event/index.html @@ -0,0 +1,120 @@ +--- +title: 'HTMLMediaElement: play event' +slug: Web/API/HTMLMediaElement/play_event +translation_of: Web/API/HTMLMediaElement/play_event +--- +<p>{{APIRef("HTMLMediaElement")}}</p> + +<p class="seoSummary">当 <code>paused</code> 属性由 <code>true</code> 转换为 <code>false</code> 时触发 <code>play</code> 事件，事件触发原因一般为 <code>play()</code> 方法调用，或者 <code>autoplay</code> 标签设置。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th scope="row">Target</th> + <td>Element</td> + </tr> + <tr> + <th scope="row">Default Action</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td>{{domxref("GlobalEventHandlers.onplay")}}</td> + </tr> + <tr> + <th scope="row">Specification</th> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Examples</h2> + +<p>下方的例子监听了 HTMLMediaElement 标签的 <code>play</code> 事件，并且在事件触发后在控制台打印相应的信息。</p> + +<p>Using <code>addEventListener()</code>:</p> + +<pre class="brush: js notranslate">const video = document.querySelector('video'); + +video.addEventListener('play', (event) => { + console.log('The Boolean paused property is now false. Either the ' + + 'play() method was called or the autoplay attribute was toggled.'); +});</pre> + +<p>Using the <code>onplay</code> event handler property:</p> + +<pre class="brush: js notranslate">const video = document.querySelector('video'); + +video.onplay = (event) => { + console.log('The Boolean paused property is now false. Either the ' + + 'play() method was called or the autoplay attribute was toggled.'); +};</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-play", "play media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-play", "play media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.HTMLMediaElement.play_event")}}</p> + +<h2 id="Related_Events">Related Events</h2> + +<ul> + <li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing event')}}</li> + <li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting event')}}</li> + <li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking event')}}</li> + <li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked event')}}</li> + <li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended event')}}</li> + <li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata event')}}</li> + <li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata event')}}</li> + <li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay event')}}</li> + <li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough event')}}</li> + <li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange event')}}</li> + <li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate event')}}</li> + <li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play event')}}</li> + <li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause event')}}</li> + <li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange event')}}</li> + <li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange event')}}</li> + <li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend event')}}</li> + <li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied event')}}</li> + <li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled event')}}</li> +</ul> + +<h2 id="See_Also">See Also</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/playbackrate/index.html b/files/zh-cn/web/api/htmlmediaelement/playbackrate/index.html new file mode 100644 index 0000000000..35534bedba --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/playbackrate/index.html @@ -0,0 +1,65 @@ +--- +title: HTMLMediaElement.playbackRate +slug: Web/API/HTMLMediaElement/playbackRate +tags: + - API + - HTML DOM + - HTMLMediaElement + - Property +translation_of: Web/API/HTMLMediaElement/playbackRate +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>HTMLMediaElement.playbackRate</code></strong> 属性设置媒体文件播放时的速率。这用于实现让用户控制快放、慢放等。 正常播放速率乘以该值表示当前的播放速率，所以1.0表示一个正常的播放速率。</p> + +<p>将 <code>playbackRate</code> 设为负值<strong>不可以</strong>实现倒播。</p> + +<p>媒体文件倒着播放时，或者播放速率低于或高于浏览器内核规定的可用范围（比如，Gecko约定范围是0.25～5.0）时，播放过程将静音。</p> + +<p>任意播放速率下，音频的音调将默认与其匹配。一些浏览器实现了非标准的 {{domxref("HTMLMediaElement.preservesPitch")}} {{non-standard_inline}} 属性来进行音调控制。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="brush: js notranslate">// video +<var>video</var>.playbackRate = 1.5; +// audio +<var>audio</var>.playbackRate = 1.0;</pre> + +<h3 id="赋值说明">赋值说明</h3> + +<p>浮点数1.0 是 "正常速度"， 比 1.0 小的值使媒体文件播放的慢于正常速度，比1.0大的值使播放变得快于正常速度.</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js notranslate">var obj = document.createElement('video'); +console.log(obj.playbackRate); // 1</pre> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">特性</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement.playbackRate")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.playbackRate")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.HTMLMediaElement.playbackRate")}}</p> + +<h2 id="See_Also" name="See_Also">请参阅</h2> + +<ul> + <li>接口定义 {{domxref("HTMLMediaElement")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/playing_event/index.html b/files/zh-cn/web/api/htmlmediaelement/playing_event/index.html new file mode 100644 index 0000000000..edcdb805ff --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/playing_event/index.html @@ -0,0 +1,80 @@ +--- +title: 'HTMLMediaElement: playing' +slug: Web/API/HTMLMediaElement/playing_event +translation_of: Web/API/HTMLMediaElement/playing_event +--- +<p><code>playing</code>事件，当播放准备开始时(之前被暂停或者由于数据缺乏被暂缓)被触发 </p> + +<h2 id="基本信息">基本信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">规范</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">Event</dd> + <dt style="float: left; text-align: right; width: 120px;">冒泡</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">可取消</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">目标</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0 0 0 120px;">None.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Related_Events">Related Events</h2> + +<ul> + <li>{{event("playing")}}</li> + <li>{{event("waiting")}}</li> + <li>{{event("seeking")}}</li> + <li>{{event("seeked")}}</li> + <li>{{event("ended")}}</li> + <li>{{event("loadedmetadata")}}</li> + <li>{{event("loadeddata")}}</li> + <li>{{event("canplay")}}</li> + <li>{{event("canplaythrough")}}</li> + <li>{{event("durationchange")}}</li> + <li>{{event("timeupdate")}}</li> + <li>{{event("play")}}</li> + <li>{{event("pause")}}</li> + <li>{{event("ratechange")}}</li> + <li>{{event("volumechange")}}</li> + <li>{{event("suspend")}}</li> + <li>{{event("emptied")}}</li> + <li>{{event("stalled")}}</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/progress_event/index.html b/files/zh-cn/web/api/htmlmediaelement/progress_event/index.html new file mode 100644 index 0000000000..7d0ad8a3e4 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/progress_event/index.html @@ -0,0 +1,153 @@ +--- +title: 'HTMLMediaElement: progress event' +slug: Web/API/HTMLMediaElement/progress_event +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">Bubbles</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td><code>onprogress</code></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h3 id="在线示例">在线示例</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="JavaScript">JavaScript</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="结果">结果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '200px') }}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + </tr> + <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="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.progress_event")}}</p> + +<h2 id="也可以看看">也可以看看</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/readystate/index.html b/files/zh-cn/web/api/htmlmediaelement/readystate/index.html new file mode 100644 index 0000000000..845b06d2aa --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/readystate/index.html @@ -0,0 +1,158 @@ +--- +title: HTMLMediaElement.readyState +slug: Web/API/HTMLMediaElement/readyState +translation_of: Web/API/HTMLMediaElement/readyState +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>HTMLMediaElement.readyState </code></strong>属性返回音频/视频的当前就绪状态。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">var readyState = audioOrVideo.readyState;</pre> + +<h3 id="返回值">返回值</h3> + +<p>无符号整型 An <code>unsigned short</code>.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Constant</th> + <th scope="col">Value</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>HAVE_NOTHING</td> + <td>0</td> + <td>没有关于音频/视频是否就绪的信息</td> + </tr> + <tr> + <td>HAVE_METADATA</td> + <td>1</td> + <td>音频/视频已初始化</td> + </tr> + <tr> + <td>HAVE_CURRENT_DATA</td> + <td>2</td> + <td>数据已经可以播放(当前位置已经加载) 但没有数据能播放下一帧的内容</td> + </tr> + <tr> + <td>HAVE_FUTURE_DATA</td> + <td>3</td> + <td>当前及至少下一帧的数据是可用的(换句话来说至少有两帧的数据)</td> + </tr> + <tr> + <td>HAVE_ENOUGH_DATA</td> + <td>4</td> + <td> 可用数据足以开始播放-如果网速得到保障 那么视频可以一直播放到底</td> + </tr> + </tbody> +</table> + +<h2 id="实例">实例</h2> + +<p>这个例子会监听id为example的 audio 的数据. 他会检查当前位置是否可以播放, 会的话执行播放。</p> + +<pre class="brush: html"><audio id="example" preload="auto"> + <source src="sound.ogg" type="audio/ogg" /> +</audio> + +</pre> + +<pre class="brush: js">var obj = document.getElementById('example'); + +obj.addEventListener('loadeddata', function() { + + if(obj.readyState >= 2) { + obj.play(); + } + +}); +</pre> + +<p> </p> + +<h2 id="参考文档">参考文档</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement.readyState")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.readyState")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}} [1]</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] The <code>NETWORK_LOADED</code> state was removed to align with the HTML spec in Gecko 2.0 {{geckoRelease(2)}}. </p> + +<h2 id="See_Also" name="See_Also">你或许还可以看看</h2> + +<ul> + <li>The interface defining it, {{domxref("HTMLMediaElement")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/seekable/index.html b/files/zh-cn/web/api/htmlmediaelement/seekable/index.html new file mode 100644 index 0000000000..cd23bfc3e9 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/seekable/index.html @@ -0,0 +1,71 @@ +--- +title: HTMLMediaElement.seekable +slug: Web/API/HTMLMediaElement/seekable +translation_of: Web/API/HTMLMediaElement/seekable +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>{{domxref("HTMLMediaElement")}}的只读属性<strong><code>seekable</code></strong>返回一个包含了用户可以跳转到的时刻的区域（如果有）的{{domxref('TimeRanges')}}对象。</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var seekable = audioOrVideo.seekable;</pre> + +<h3 id="值">值</h3> + +<p>一个{{domxref('TimeRanges')}}对象。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html">var video = document.querySelector("video"); +var timeRangesObject = video.seekable; +var timeRanges = []; +//遍历所有时间区域并输出数组 +for (let count = 0; count < timeRangesObject.length; count ++) { + timeRanges.push([timeRangesObject.start(count), timeRangesObject.end(count)]); +} +</pre> + + + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "the-video-element.html#dom-media-seekable", "HTMLMediaElement")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#dom-media-seekable", "HTMLMediaElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('Media Source Extensions','#htmlmediaelement-extensions','HTMLMediaElement extensions, like for seekable')}}</td> + <td>{{Spec2('Media Source Extensions')}}</td> + <td>Specifies a new algorithm for returning the seekable time range of a media element whose source is a {{domxref("MediaSource")}} object.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.HTMLMediaElement.seekable")}}</p> +</div> + +<h2 id="See_Also" name="See_Also">See also</h2> + +<ul> + <li>The interface defining it, {{domxref("HTMLMediaElement")}}.</li> + <li><a href="/en-US/docs/Web/API/Media_Source_Extensions_API">Media Source Extensions API</a></li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/src/index.html b/files/zh-cn/web/api/htmlmediaelement/src/index.html new file mode 100644 index 0000000000..f02d765c3b --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/src/index.html @@ -0,0 +1,60 @@ +--- +title: HTMLMediaElement.src +slug: Web/API/HTMLMediaElement/src +translation_of: Web/API/HTMLMediaElement/src +--- +<div>{{APIRef("HTML DOM")}}</div> + +<div><strong><code>HTMLMediaElement.src</code></strong>属性反映HTML媒体元素的<code>src</code> 属性的值，该属性指示要在元素中使用的媒体资源的URL。</div> + +<div class="note"> +<p><strong>Note:</strong> 了解此元素中当前正在使用的媒体资源的URL的最佳方法是查看 {{domxref("HTMLMediaElement.currentSrc", "currentSrc")}}属性的值，该属性还考虑从 {{domxref("HTMLSourceElement")}} (代表 {{HTMLElement("source")}} 元素)中提供的列表中选择最佳或首选媒体资源</p> +</div> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>mediaUrl</em> = <em>HTMLMediaElement</em>.src;</pre> + +<h3 id="Value">Value</h3> + +<p>一个{{domxref("USVString")}}对象，包含要在元素中使用的媒体资源的URL;此属性反映HTML元素的<code>src</code> 属性的值。</p> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">var obj = document.createElement('video'); +console.log(obj.src); // "" +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "embedded-content.html#dom-media-src", "HTMLMediaElement.src")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#dom-media-src", "HTMLMediaElement.src")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.HTMLMediaElement.src")}}</p> + +<h2 id="See_Also" name="See_Also">See also</h2> + +<ul> + <li>The interface defining it, {{domxref("HTMLMediaElement")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/srcobject/index.html b/files/zh-cn/web/api/htmlmediaelement/srcobject/index.html new file mode 100644 index 0000000000..9377ebf1a9 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/srcobject/index.html @@ -0,0 +1,102 @@ +--- +title: srcObject +slug: Web/API/HTMLMediaElement/srcObject +translation_of: Web/API/HTMLMediaElement/srcObject +--- +<p>{{SeeCompatTable}}{{APIRef("")}}</p> + +<p>{{domxref("HTMLMediaElement")}} 接口的 <strong><code>srcObject</code></strong> 属性设定或返回一个对象，这个对象提供了一个与{{domxref("HTMLMediaElement")}}关联的媒体源，这个对象通常是 {{domxref("MediaStream")}} ，但根据规范可以是 {{domxref("MediaSource")}}， {{domxref("Blob")}} 或者 {{domxref("File")}}。</p> + +<div class="note"> +<p><strong>注意:</strong> 截至 2020 年 3 月, 只有Safari 支持设置 <code>MediaStream</code> 之外的对象。在其他浏览器跟上之前, 对<code>MediaSource</code>, <code>Blob</code> 和 <code>File</code>, 请考虑返回创建具有{domxref("URL.createObjectURL()")}} 的 URL， 并将其赋值给{{domxref("HTMLMediaElement.src")}} 有关示例，请参阅下文。</p> +</div> + + + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">var <em>mediaStream</em> = <em>HTMLMediaElement</em>.srcObject +<em>HTMLMediaElement</em>.srcObject = <em>mediaStream</em> +</pre> + +<h3 id="值">值</h3> + +<p>一个 {{domxref('MediaStream')}}，{{domxref('MediaSource')}}，{{domxref('Blob')}} 或者 {{domxref('File')}} 对象（具体支持请参见兼容表）。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">论述</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#media-elements', 'srcObject')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>原始定义。</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(52.0)}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("18.0")}}<sup>[1][2]</sup><br> + {{CompatGeckoDesktop("42.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>39<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(52.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>39</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(52.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 目前只有 {domxref("MediaStream")}} 对象是支持的。 {domxref("MediaSource")}} ， {{domxref("Blob")}} 和 {{domxref("File")}} 对象尚待支持，并会抛出一个类型错误（TypeError）。</p> + +<p>[2] Firefox 的早期版本通过非标准化的名称 <code>mozSrcObject 来实现。</code></p> diff --git a/files/zh-cn/web/api/htmlmediaelement/timeupdate_event/index.html b/files/zh-cn/web/api/htmlmediaelement/timeupdate_event/index.html new file mode 100644 index 0000000000..2ae353f7f7 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/timeupdate_event/index.html @@ -0,0 +1,128 @@ +--- +title: 'HTMLMediaElement: timeupdate' +slug: Web/API/HTMLMediaElement/timeupdate_event +tags: + - Audio + - Event + - HTMLMediaElement + - Reference + - Video +translation_of: Web/API/HTMLMediaElement/timeupdate_event +--- +<div>{{APIRef("HTMLMediaElement")}}</div> + +<p>当<code>currentTime</code>更新时会触发<code>timeupdate</code>事件。</p> + +<p>这个事件的触发频率由系统决定，但是会保证每秒触发4-66次（前提是每次事件处理不会超过250ms）。鼓励用户代理根据系统的负载和处理事件的平均成本来改变事件的频率，保证UI更新不会影响视频的解码。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th scope="row">Target</th> + <td>Element</td> + </tr> + <tr> + <th scope="row">Default Action</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td>{{domxref("GlobalEventHandlers.ontimeupdate")}}</td> + </tr> + <tr> + <th scope="row">Specification</th> + <td> + <p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></p> + </td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<p>These examples add an event listener for the HTMLMediaElement's <code>timeupdate</code> event, then post a message when that event handler has reacted to the event firing. Remember, the event frequency is dependant on the system load.</p> + +<p>Using <code>addEventListener()</code>:</p> + +<pre class="brush: js notranslate">const video = document.querySelector('video'); + +video.addEventListener('timeupdate', (event) => { + console.log('The currentTime attribute has been updated. Again.'); +});</pre> + +<p>Using the <code>ontimeupdate</code> event handler property:</p> + +<pre class="brush: js notranslate">const video = document.querySelector('video'); + +video.ontimeupdate = (event) => { + console.log('The currentTime attribute has been updated. Again.'); +};</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "media.html#event-media-timeupdate", "timeupdate media event")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-timeupdate", "timeupdate media event")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>{{Compat("api.HTMLMediaElement.timeupdate_event")}}</p> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li>{{domxref("HTMLMediaElement.playing_event", 'HTMLMediaElement: playing event')}}</li> + <li>{{domxref("HTMLMediaElement.waiting_event", 'HTMLMediaElement: waiting event')}}</li> + <li>{{domxref("HTMLMediaElement.seeking_event", 'HTMLMediaElement: seeking event')}}</li> + <li>{{domxref("HTMLMediaElement.seeked_event", 'HTMLMediaElement: seeked event')}}</li> + <li>{{domxref("HTMLMediaElement.ended_event", 'HTMLMediaElement: ended event')}}</li> + <li>{{domxref("HTMLMediaElement.loadedmetadata_event", 'HTMLMediaElement: loadedmetadata event')}}</li> + <li>{{domxref("HTMLMediaElement.loadeddata_event", 'HTMLMediaElement: loadeddata event')}}</li> + <li>{{domxref("HTMLMediaElement.canplay_event", 'HTMLMediaElement: canplay event')}}</li> + <li>{{domxref("HTMLMediaElement.canplaythrough_event", 'HTMLMediaElement: canplaythrough event')}}</li> + <li>{{domxref("HTMLMediaElement.durationchange_event", 'HTMLMediaElement: durationchange event')}}</li> + <li>{{domxref("HTMLMediaElement.timeupdate_event", 'HTMLMediaElement: timeupdate event')}}</li> + <li>{{domxref("HTMLMediaElement.play_event", 'HTMLMediaElement: play event')}}</li> + <li>{{domxref("HTMLMediaElement.pause_event", 'HTMLMediaElement: pause event')}}</li> + <li>{{domxref("HTMLMediaElement.ratechange_event", 'HTMLMediaElement: ratechange event')}}</li> + <li>{{domxref("HTMLMediaElement.volumechange_event", 'HTMLMediaElement: volumechange event')}}</li> + <li>{{domxref("HTMLMediaElement.suspend_event", 'HTMLMediaElement: suspend event')}}</li> + <li>{{domxref("HTMLMediaElement.emptied_event", 'HTMLMediaElement: emptied event')}}</li> + <li>{{domxref("HTMLMediaElement.stalled_event", 'HTMLMediaElement: stalled event')}}</li> +</ul> + +<h2 id="更多">更多</h2> + +<ul> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> + <li>{{HTMLElement("audio")}}</li> + <li>{{HTMLElement("video")}}</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/videotracks/index.html b/files/zh-cn/web/api/htmlmediaelement/videotracks/index.html new file mode 100644 index 0000000000..20ed194746 --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/videotracks/index.html @@ -0,0 +1,51 @@ +--- +title: HTMLMediaElement.videoTracks +slug: Web/API/HTMLMediaElement/videoTracks +translation_of: Web/API/HTMLMediaElement/videoTracks +--- +<div>{{APIRef("HTML DOM")}}{{draft}}</div> + +<p><span class="seoSummary"> <strong><code>videoTracks</code></strong> 为 {{DOMxRef("HTMLMediaElement")}} 的只读属性，它是一个 {{DOMxRef("VideoTrackList")}} 列表，列表中包含相应媒体元素的视频轨, 视频轨为{{DOMxRef("VideoTrack")}} 类型对象。</span></p> + +<p>它是一个实时列表; 当相应的媒体元素增加或删除视频轨时，返回列表会发生动态的改变。由此你可以监控和检测视频轨发生的变化。学习 {{SectionOnPage("/en-US/docs/Web/API/VideoTrackList", "Event handlers")}} 可以获得更多关于media element 视频轨的知识.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>videoTracks</em> = <em>mediaElement</em>.videoTracks;</pre> + +<h3 id="返回值">返回值</h3> + +<p>返回的是一个{{DOMxRef("VideoTrackList")}} 类型值，为相应媒体元素的视频轨列表。可以用访问数组的方法访问这个值，或 {{domxref("VideoTrackList.getTrackById", "getTrackById()")}} 方法访问它.</p> + +<p>列表中包含的每一个 {{DOMxRef("VideoTrack")}} 代表其中的一个视频轨。</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "#dom-media-videotracks", "HTMLMediaElement.videoTracks")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>No change from {{SpecName("HTML5 W3C")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.HTMLMediaElement.videoTracks")}}</p> + +<h2 id="See_Also" name="See_Also">See also</h2> + +<ul> + <li>The interface defining it, {{DOMxRef("HTMLMediaElement")}}.</li> + <li>{{HTMLElement("video")}}</li> + <li>{{DOMxRef("VideoTrack")}} and {{DOMxRef("VideoTrackList")}}</li> +</ul> diff --git a/files/zh-cn/web/api/htmlmediaelement/volume/index.html b/files/zh-cn/web/api/htmlmediaelement/volume/index.html new file mode 100644 index 0000000000..0c762ebc4b --- /dev/null +++ b/files/zh-cn/web/api/htmlmediaelement/volume/index.html @@ -0,0 +1,57 @@ +--- +title: HTMLMediaElement.volume +slug: Web/API/HTMLMediaElement/volume +translation_of: Web/API/HTMLMediaElement/volume +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p><strong><code>HTMLMediaElement.volume</code></strong> 属性可设置媒体播放时的音量。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">var <em>volume</em> = <em>video</em>.volume; //1</pre> + +<h3 id="值">值</h3> + +<p>取值为 0 到 1 的双精度值。0 为静音，1 为音量最大时的值。</p> + +<h2 id="示例">示例</h2> + +<pre>var obj = document.createElement('audio'); +console.log(obj.volume); // 1 +obj.volume = 0.75;</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "#dom-media-volume", "HTMLMediaElement.volume")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.volume")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.HTMLMediaElement.volume")}}</p> + +<h2 id="See_Also" name="See_Also">更多</h2> + +<ul> + <li>定义该属性的接口 {{domxref("HTMLMediaElement")}}.</li> + <li>{{domxref("HTMLMediaElement.muted")}}</li> +</ul> |