HTML5 中的视频 Video 和音频 Audio 使用方法

Question

这篇文章主要讲解了 HTML5 中内置的 <audio> 和 <video> 元素，可以很方便的嵌入多媒体到网页中。

嵌入媒体

使用 HTML5 编写网页，在你的网页中嵌入媒体是非常方便的：

<video src="https://www.wenjiangs.com/wp-content/uploads/2018/10/320x240.ogg" controls>
Your browser does not support the <code>video</code> element.
</video>

这个例子是在网页中加载一段视频，这里是你的 HTML 文档中嵌入音频为例：

<audio src="/test/audio.ogg">
<p>Your browser does not support the audio element.</p>
</audio>

src 属性可以是一个音频文件的远程 URL 地址，也可以是你网站本地的地址。

<audio src="audio.ogg" controls autoplay loop>
<p>Your browser does not support the audio element </p>
</audio>

此代码示例使用 <audio> 元素的属性：

• controls : 是否显示网页上的音频标准HTML5的控制。
• autoplay : 是否自动播放
• loop : 循环次数，默认只播放一次，设置为负数为无限循环。

<audio src="audio.mp3" preload="auto" controls></audio>

preload 属性用于缓冲媒体打文件，提供3个参数。

• "none" 不缓冲文件
• "auto" buffers the media file
• "metadata" buffers only the metadata for the file

多个源文件可以使用 <source> 元件以提供视频或音频在不同的浏览器不同格式编码的规定。例如：

<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4" type="video/mp4">
Your browser does not support the <code>video</code> element.
</video>

这个 ogg 文件需要浏览器支持 Ogg 格式。如果浏览器不支持 ogg，浏览器使用 MPEG-4 文件。参见媒体格式在不同的浏览器的音频和视频元素的支持。

您还可以指定该编解码器的媒体文件要求；这可以让浏览器更加明智的决定：

<video controls>
<source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
Your browser does not support the <code>video</code> element.
</video>

在这里，我们指定的视频使用 Dirac 和 Speex 编解码器。如果浏览器支持 ogg，但没有指定的编解码器，视频将不加载。

如果没有指定 type 属性，那么该媒体类型是从服务器检索和查看浏览器可以处理它，如果无法识别，那么将检查下一个文件源，如果指定的源元素不可以用，一个错误事件发送到视频元件。

控制媒体的播放

一旦你在你的HTML文档中嵌入的媒体使用新的元素，你可以以编程方式从 JavaScript 代码控制他们。例如，开始（或停止）播放，你可以这样做：

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

第一行代码获取视频元素，第二行代码控制其播放。

控制一个 HTML5 音频播放器播放，暂停，增加和减少的体积是直接使用一些 JavaScript。

<audio id="demo" src="audio.mp3"></audio>
<button onclick="document.getElementById('demo').play()">Play the Audio</button>
<button onclick="document.getElementById('demo').pause()">Pause the Audio</button>
<button onclick="document.getElementById('demo').volume+=0.1">Increase Volume</button>
<button onclick="document.getElementById('demo').volume-=0.1">Decrease Volume</button>

停止媒体下载

而停止媒体播放很容易调用元素的 pause() 方法，浏览器会继续下载媒体到媒体元素设置通过垃圾收集。

这里有一个技巧，停止一次下载：

var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src='';
//or
mediaElement.removeAttribute("src");

通过删除媒体元素的 src 属性（或设置为空字符串，这可能取决于浏览器），你移除了元件的内部解码器，它停止网络下载。

设置播放时间

媒体文件支持提供当前播放的位置，这是通过设置媒体文件播放时间的值实现的，简单的设置。

你可以使用元素的可搜索的属性来确定是当前可寻求媒体的范围。这是返回一个对象的 timeranges 监听时间的范围：

var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start(); // Returns the starting time (in seconds)
mediaElement.seekable.end(); // Returns the ending time (in seconds)
mediaElement.currentTime = 122; // Seek to 122 seconds
mediaElement.played.end(); // Returns the number of seconds the browser has played

指定播放范围

当指定媒体的 URI 为 <audio> 和 <video> 元素，你可以选择包含附加的信息来指定要发挥媒体的部分。为此附加一个哈希标记 #，其次是媒体片段的描述。

一种是使用语法指定的时间范围：

#t=[starttime][,endtime]

时间可以被指定为一个秒数（作为一个浮点值）或作为一个小时/分钟/秒的时间间隔冒号（如2:05:01 2小时，5分钟，1秒），几个例子：

https://www.wenjiangs.com/wp-content/uploads/madagascar3.mp4#t=10,20
Specifies that the video should play the range 10 seconds through 20 seconds.

Specifies that the video should play from the beginning through 10.5 seconds.
https://www.wenjiangs.com/wp-content/uploads/madagascar3.mp4#t=,02:00:00
Specifies that the video should play from the beginning through two hours.

Specifies that the video should start playing at 60 seconds and play through the end of the video.

媒体元素的 URI 规范播放范围部分被添加到 Gecko 9.0，在这个时候，这是媒体片段的 URI 规范实施的 Gecko 唯一的一部分，它只能用于指定媒体元素来源的时候，而不是在地址栏。

替代方案

HTML之间包括，例如媒体元素的开始标记和结束标记是由浏览器不支持 HTML5 的媒体处理。你可以利用这个事实来为浏览器提供替代可选媒体。

本节提供视频两种替代方案。在每一种情况下，如果浏览器支持 HTML5 视频，则使用 HTML5 的播放方式，如果不支持 HTML5 视频，则改用其他兼容性方案。

使用Flash

你可以在 <audio> 元素不支持使用 Flash 播放 Flash 格式的电影：

<video src="video.ogv" controls>
<object data="flvplayer.swf" type="application/x-shockwave-flash">
<param value="flvplayer.swf" name="movie"/>
</object>
</video>

请注意，你不应该包括中以 object 标记要比其他 Internet Explorer 浏览器兼容。

利用 Java Applet 播放 OGG 格式的视频

没有所谓的 Java Applet 的，可以被使用到的视频播放 OGG 格式在浏览器的回退是别有 Java 支持，支持 HTML5 视频

<video src="my_ogg_video.ogg" controls width="320" height="240">
<object type="application/x-java-applet" width="320" height="240">
<param name="archive" value="cortado.jar">
<param name="code" value="com.fluendo.player.Cortado.class">
<param name="url" value="my_ogg_video.ogg">
<p>You need to install Java to play this file.</p>
</object>
</video>

如果你没有创建一种切割对象的子元素的元素，如 Firefox v3.5 以上，这样的视频设备的句柄，但 Java natively 没有安装 incorrectly 通知用户，他们将需要安装插件，以查看内容的页面。

错误处理

在 Gecko 2.0 开始，错误处理已修改的 HTML5 规范匹配的最新版本。相反的错误事件被派遣到媒体元素本身，它现在被运送到相应产生误差的来源孩子 <source> 元素。

这让你发现哪些资源加载失败，这可能是有用的。考虑这个HTML：

<video>
<source id="mp4_src" src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
<source id="3gp_src" src="video.3gp" type='video/3gpp; codecs="mp4v.20.8, samr"'></source>
<source id="ogg_src" src="video.ogv" type='video/ogg; codecs="theora, vorbis"'></source>
</video>

Since Firefox doesn't support MP4 and 3GP due to their patent-encumbered nature, the <source> elements with the IDs "mp4_src" and "3gp_src" will receive error events before the Ogg resource is loaded. The sources are tried in the order in which they appear, and once one loads successfully, the remaining sources aren't tried at all.

检测时无源加载

To detect that all child <source> elements have failed to load, check the value of the media element's networkState attribute. If this is HTMLMediaElement.NETWORK_NO_SOURCE, you know that all the sources failed to load.

If at that point you add another source by inserting a new <source> element as a child of the media element, Gecko attempts to load the specified resource.

显示内容时没有 source 可以解码

Another way to show the fallback content of a video when none of the sources could be decoded in the current browser is to add an error handler on the last source element. Then you can replace the video with its fallback content:

<video controls>
<source src="dynamicsearch.mp4" type="video/mp4"></source>
<a href="dynamicsearch.mp4">
<img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS">
</a>
<p>Click image to play a video demo of dynamic app search</p>
</video>

var v = document.querySelector('video'),
sources = v.querySelectorAll('source'),
lastsource = sources[sources.length-1];
lastsource.addEventListener('error', function(ev) {
var d = document.createElement('div');
d.innerHTML = v.innerHTML;
v.parentNode.replaceChild(d, v);
}, false);