在Firefox中使用音频与视频

  • 版本网址缩略名: 在Firefox中使用音频与视频
  • 版本标题: 在Firefox中使用音频与视频
  • 版本 id: 248148
  • 创建于:
  • 创建者: Cnf1980
  • 是否是当前版本?
  • 评论 page created, 516 words added

修订内容

{{ gecko_minversion_header("1.9.1") }}

Firefox 3.5 支持 HTML 5 audiovideo 元素, 提供能非常方便嵌入媒体到 HTML 文档的方法.  目前仅支持 Ogg 与 WAV 格式的媒体, 但预计未来会支持更多的格式re.

嵌入媒体

在HTML 文档中嵌入媒体未不足道:

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" autoplay>
  您的浏览器不支持 <code>video</code> 元素.
</video>

这个是播放Theora网站上的示例视频的例子.

要指定多个源文件要用 source 元素以便为不同的浏览器提供不同格式的视频/音频。 来个实例:

<video autoplay>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mov">
  您的浏览器不支持 <code>video</code> 元素。
</video>

在支持Ogg格式的浏览器上将播放 OGG 文件. 如果浏览器不支持 OGG, 它将尝试使用 MOV 文件.

注意: source元素尝未被Firefox完全支持。 详情参见 {{ bug("449363") }} 。

媒体播放控制

一旦您在HTML文档中用新元素嵌入了媒体, 您就可以用JavaScript代码控制它们。  例如, 开始 (重新) 播放, 你可以这样:

var v = document.getElementsByTagName("video")[0];
v.play();

第一行取得文档中第一个 video 元素标签, 第二行调用元素的 play() 方法, 定义在 {{ interface("nsIDOMHTMLMediaElement") }} 接口,用于实现媒体元素。

媒体事件

处理媒体是发送的不同事件:

事件 Description
abort Sent when playback is aborted; for example, if the media is playing and is restarted from the beginning, this event is sent.
canplay Sent when enough data is available that the media can be played, at least for a couple of frames.  This corresponds to the CAN_PLAY readyState.
canplaythrough Sent when the ready state changes to CAN_PLAY_THROUGH, indicating that the entire media can be played without interruption, assuming the download rate remains at least at the current level.
canshowcurrentframe The current frame has loaded and can be presented.  This corresponds to the CAN_SHOW_CURRENT_FRAME readyState.
dataunavailable Sent when the ready state changes to DATA_UNAVAILABLE.
durationchange The metadata has loaded or changed, indicating a change in duration of the media.  This is sent, for example, when the media has loaded enough that the duration is known.
emptied The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
empty Sent when an error occurs and the media is empty.
ended Sent when playback completes.
error Sent when an error occurs.  The element's error attribute contains more information.
load The media has been completely retrieved.
loadedfirstframe The first frame of the media has finished loading.
loadedmetadata The media's metadata has finished loading; all attributes now contain as much useful information as they're going to.
loadstart Sent when loading of the media begins.
pause Sent when playback is paused.
play Sent when playback starts or resumes.
ratechange Sent when the playback speed changes.
seeked Sent when a seek operation completes.
seeking Sent when a seek operation begins.
timeupdate The time indicated by the element's currentTime attribute has changed.
volumechange Sent when the audio volume changes (both when the volume is set and when the muted attribute is changed).
waiting Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).

使用如下代码, 你可以轻松的监听这些事件:

var v = document.getElementsByTagName("video")[0];

v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
v.currentTime = 10.0;

在这个例子,取出文档中的第一个视频vedio元素并附加一个事件侦听器, 监听寻道的seeked事件, 每当一个寻道操作完成时发送。  侦听器仅调用元素的 play() 方法, 开始播放。

然后, 在第 4 行, 设置示例中的元素的 currentTime 属性为 10.0, 在媒体的10秒钟加入一个寻道操作。 当操作开始的时候,这就发送一个 seeking 事件, 然后当寻道结束时发出一个 seeked 事件。

也就是说, 这个例子搜索到媒体的 10-秒标记, 开始播放到结束.

参见

 

 {{ languages( { "fr": "fr/Utilisation_d'audio_et_video_dans_Firefox" } ) }}

 {{ languages( { "es": "es/Etiquetas audio y video en Firefox" } ) }}

修订版来源

<p>{{ gecko_minversion_header("1.9.1") }}</p>
<p>Firefox 3.5 支持 HTML 5 <a class="internal" href="/En/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a> 与 <a class="internal" href="/En/HTML/Element/Video" title="En/HTML/Element/Video"><code>video</code></a> 元素, 提供能非常方便嵌入媒体到 HTML 文档的方法.  目前仅支持 Ogg 与 WAV 格式的媒体, 但预计未来会支持更多的格式re.</p>
<h2>嵌入媒体</h2>
<p>在HTML 文档中嵌入媒体未不足道:</p>
<pre class="brush: html">&lt;video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" autoplay&gt;
  您的浏览器不支持 &lt;code&gt;video&lt;/code&gt; 元素.
&lt;/video&gt;
</pre>
<p>这个是播放Theora网站上的示例视频的例子.</p>
<p>要指定多个源文件要用 <a class="internal" href="/En/HTML/Element/Source" title="En/HTML/Element/Source"><code>source</code></a> 元素以便为不同的浏览器提供不同格式的视频/音频。 来个实例:</p>
<pre class="brush: html">&lt;video autoplay&gt;
  &lt;source src="foo.ogg" type="video/ogg"&gt;
  &lt;source src="foo.mov"&gt;
  您的浏览器不支持 &lt;code&gt;video&lt;/code&gt; 元素。
&lt;/video&gt;
</pre>
<p>在支持Ogg格式的浏览器上将播放 OGG 文件. 如果浏览器不支持 OGG, 它将尝试使用 MOV 文件.</p>
<div class="note"><strong>注意: </strong>source元素尝未被Firefox完全支持。 详情参见 {{ bug("449363") }} 。</div>
<h2>媒体播放控制</h2>
<p>一旦您在HTML文档中用新元素嵌入了媒体, 您就可以用JavaScript代码控制它们。  例如, 开始 (重新) 播放, 你可以这样:</p>
<pre class="brush: js">var v = document.getElementsByTagName("video")[0];
v.play();
</pre>
<p>第一行取得文档中第一个 video 元素标签, 第二行调用元素的 <a class="external" href="/En/NsIDOMHTMLMediaElement#play()" title="https://developer.mozilla.org/editor/fckeditor/core/editor/En/NsIDOMHTMLMediaElement#play()"><code>play()</code></a> 方法, 定义在 {{ interface("nsIDOMHTMLMediaElement") }} 接口,用于实现媒体元素。</p>
<h2>媒体事件</h2>
<p>处理媒体是发送的不同事件:</p>
<table class="standard-table"> <tbody> <tr> <td class="header">事件</td> <td class="header">Description</td> </tr> <tr> <td><code>abort</code></td> <td>Sent when playback is aborted; for example, if the media is playing and is restarted from the beginning, this event is sent.</td> </tr> <tr> <td><code>canplay</code></td> <td>Sent when enough data is available that the media can be played, at least for a couple of frames.  This corresponds to the <code>CAN_PLAY</code> <code>readyState</code>.</td> </tr> <tr> <td><code>canplaythrough</code></td> <td>Sent when the ready state changes to <code>CAN_PLAY_THROUGH</code>, indicating that the entire media can be played without interruption, assuming the download rate remains at least at the current level.</td> </tr> <tr> <td><code>canshowcurrentframe</code></td> <td>The current frame has loaded and can be presented.  This corresponds to the <code>CAN_SHOW_CURRENT_FRAME</code> <code>readyState</code>.</td> </tr> <tr> <td><code>dataunavailable</code></td> <td>Sent when the ready state changes to <code>DATA_UNAVAILABLE</code>.</td> </tr> <tr> <td><code>durationchange</code></td> <td>The metadata has loaded or changed, indicating a change in duration of the media.  This is sent, for example, when the media has loaded enough that the duration is known.</td> </tr> <tr> <td><code>emptied</code></td> <td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a class="internal" href="/En/nsIDOMMediaHTMLElement#load()" title="En/nsIDOMMediaHTMLElement#load()"><code>load()</code></a> method is called to reload it.</td> </tr> <tr> <td><code>empty</code></td> <td>Sent when an error occurs and the media is empty.</td> </tr> <tr> <td><code>ended</code></td> <td>Sent when playback completes.</td> </tr> <tr> <td><code>error</code></td> <td>Sent when an error occurs.  The element's <code>error</code> attribute contains more information.</td> </tr> <tr> <td><code>load</code></td> <td>The media has been completely retrieved.</td> </tr> <tr> <td><code>loadedfirstframe</code></td> <td>The first frame of the media has finished loading.</td> </tr> <tr> <td><code>loadedmetadata</code></td> <td>The media's metadata has finished loading; all attributes now contain as much useful information as they're going to.</td> </tr> <tr> <td><code>loadstart</code></td> <td>Sent when loading of the media begins.</td> </tr> <tr> <td><code>pause</code></td> <td>Sent when playback is paused.</td> </tr> <tr> <td><code>play</code></td> <td>Sent when playback starts or resumes.</td> </tr> <tr> <td><code>ratechange</code></td> <td>Sent when the playback speed changes.</td> </tr> <tr> <td><code>seeked</code></td> <td>Sent when a seek operation completes.</td> </tr> <tr> <td><code>seeking</code></td> <td>Sent when a seek operation begins.</td> </tr> <tr> <td><code>timeupdate</code></td> <td>The time indicated by the element's <code>currentTime</code> attribute has changed.</td> </tr> <tr> <td><code>volumechange</code></td> <td>Sent when the audio volume changes (both when the volume is set and when the <code>muted</code> attribute is changed).</td> </tr> <tr> <td><code>waiting</code></td> <td>Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).</td> </tr> </tbody>
</table>
<p>使用如下代码, 你可以轻松的监听这些事件:</p>
<pre>var v = document.getElementsByTagName("video")[0];

v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
v.currentTime = 10.0;
</pre>
<p>在这个例子,取出文档中的第一个视频vedio元素并附加一个事件侦听器, 监听寻道的seeked事件, 每当一个寻道操作完成时发送。  侦听器仅调用元素的 <code>play()</code> 方法, 开始播放。</p>
<p>然后, 在第 4 行, 设置示例中的元素的 <code>currentTime</code> 属性为 10.0, 在媒体的10秒钟加入一个寻道操作。 当操作开始的时候,这就发送一个 <code>seeking</code> 事件, 然后当寻道结束时发出一个 <code>seeked</code> 事件。</p>
<p>也就是说, 这个例子搜索到媒体的 10-秒标记, 开始播放到结束.</p>
<h2>参见</h2>
<ul> <li><a class="internal" href="/En/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a></li> <li><a class="internal" href="/En/HTML/Element/Video" title="En/HTML/Element/Video"><code>video</code></a></li> <li><a class="internal" href="/En/HTML/Element/Source" title="En/HTML/Element/Source"><code>source</code></a> </li> <li><a class="internal" href="/En/Manipulating_video_using_canvas" title="En/Manipulating video using canvas">Manipulating video using canvas</a></li> <li>{{ interface("nsIDOMHTMLMediaElement") }}</li>
</ul>
<p> </p>
<p> {{ languages( { "fr": "fr/Utilisation_d'audio_et_video_dans_Firefox" } ) }}</p>
<p> {{ languages( { "es": "es/Etiquetas audio y video en Firefox" } ) }}</p>
恢复到这个版本