HTML5的audio标签和video标签怎么使用

这篇文章主要介绍了HTML5的audio标签和video标签怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇HTML5的audio标签和video标签怎么使用文章都会有所收获，下面我们一起来看看吧。

audio和video标签的推出，可以说是填补了HTML对音频和视频播放标签的空白。一直以来，HTML都没有适合自己的播放标签，而统一采用<embed>这样的标签来播放。

audio 标签

audio标签支持HTML页面中的音频，我们可以自由地在HTML页面中嵌入音乐和音频流，下面从4个方面详细介绍audio标签。

1. 检测浏览器是否支持audio标签

无论如何，我们推荐读者在使用新一代HTML5标签的时候，应该检测浏览器的能力，例如下面的代码：

<audio>你的浏览器目前不支持HTML5的audio标签。</ audio >

如果此浏览器显示了文字“你的浏览器目前不支持HTML5的audio标签”，则说明此浏览器对HTML5的audio标签不支持，反之则支持。

这样的检测方法适用于很多新增闭合标签，无须通过JavaScript脚本去判断。

2. audio标签的相关属性

audio标签的属性与HTML4时代的embed标签有很多类似的地方，应用起来也比较容易，

下面列出audio标签的相关属性：

属性名称           值的格式                  描 述

class="lazy" data-src                    xs:anyURI                指定音频源文件的URL地址

autoplay           autoplay                   在页面载入时自动播放

loop                  loop                          自动循环播放此标签下指定的文件

controls            controls                    用户可以对音频进行控制

preload             preload                     这是预加载处理属性，只要标签被处理，就会自动加载相关数据。但是如果使用 "autoplay"，则忽略该属性

3. audio标签的浏览器兼容问题

由于目前音频、视频标准尚未在浏览器上获得统一，各个厂商都有自己的立场和态度，而且可能会在较长时间内不会完全统一，因此，我们建议读者采用兼容性写法，这可以有效地覆盖大多数支持音视频标签的浏览器。

<audio controls>

<!--如果浏览器支持ogg格式，则优先使用song.ogg-->

<source class="lazy" data-src="song.ogg">

<!--如果浏览器不支持ogg格式，则降级使用song.mp3-->

<source class="lazy" data-src="song.mp3">

</audio>

4. 使用audio标签的常见问题

对于audio标签，我们把大家常见的问题归纳如下。

audio标签可以像Flash播放器一样拖动播放吗？

audio标签是可以跳跃播放的。只要直接定位到目标位置，执行播放方法即可。

代码大致如下：

var audio = document.getElementById('audio');//获得audio标签对象

audio.currentPosition; //得到要播放的位置

audio.play();

audio标签有音量控制吗？

audio标签是可以直接调控播放时的音量的，使用方法为audio.volume。

audio标签可以获得音频文件的信息吗？

audio标签是不可以读取音频内容信息的。

audio标签可以进行预读或预载吗？

audio标签是可以进行预载处理的，使用起来也很简单，只需要在标签中加入preload属性即可：

<audio preload>您的浏览器不支持audio标签</audio>

audio标签可以制造出声音吗？

audio标签是不可以直接操作并制造出新音频内容信息的。

video 标签

HTML5通过video标签直接支持视频的播放，使广大浏览器终于脱离了Flash的枷锁。在Linux和Mac OS中，对Flash的支持比较差。在非Windows操作系统的环境下，Flash对CPU的消耗是非常巨大的。这是众多非Windows应用者的痛苦经历，虽然最近这种情况有所改善。

另外，虽然移动设备有了广泛应用与普及，但是却没有一个可以完整支持的Flash技术（除Symbian能支持简单的Flash外）。全球最大的视频网站YouTube率先推出了HTML5版，有很多网站为了迎合移动设备全都开发了没有Flash的版本。

1. 检测浏览器是否支持video

与audio标签一样，我们在使用新一代HTML5标签的时候，都应该使用浏览器能力检测标准方法去检测浏览器的能力，比如下面的代码：

<video>你的浏览器目前不支持HTML5的video标签。</video>

如果此浏览器显示了文字“你的浏览器目前不支持HTML5的video标签”，则说明此浏览器不支持HTML5的video标签，反之则支持。

2. video标签的浏览器兼容性问题

对于人们通常关心的兼容性问题，其实可以用非常简单的办法来实现，本书在这里给出一段进行“优雅降级”的范例代码，供读者思考与借鉴：

<video>

<!--如果浏览器支持video，也支持H.264，用movie.mp4-->

<source class="lazy" data-src="movie.mp4">

<!--如果浏览器支持video，仅支持Ogg，用movie.ogv-->

<source class="lazy" data-src="movie.ogv">

<!--如果浏览器不支持video，尝试Flash-->

<object data="videoplayer.swf" type="application/x-shockwave-flash">

<param name="movie" value="movie.swf"/>

</object>

<!--如果浏览器不支持video，也不支持Flash，给出下载链接-->

<a href="下载链接">你的浏览器啥都不支持，只能下载</a>

</video>

3. video的相关属性介绍

属性名称                值的格式                           描 述

class="lazy" data-src                          xs:anyURI                       指定视频源文件的URL地址

autobuffer              autobuffer                       允许自动缓冲

autoplay                 autoplay                          允许自动播放

loop                        loop                                允许自动循环播放

controls                 controls                           允许用户对视频进行控制

width                    cm|em|en|in|px|pt|%       视频图像的显示宽度当高度未指明时，其值将与视频宽度成一定比例

height                  cm|em|en|in|px|pt|%        视频图像的显示高度。当宽度未指明时，其值将与视频高度成一定比例

poster                 xs:anyURI                           当视频未响应或缓冲不足时，该属性值链接到一个图像。该图像将以一定比例被显示出来

source                标签格式                             这是与video配套的子标签，专门用于描述class="lazy" data-src属性和源文件的type属性

4. video支持的视频格式

目前，video支持的视频格式还处于变动之中。在对大多数浏览器进行检测后，我们总结了如下3种可以解决工程实际需要的格式。

 Ogg。带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件。

 MPEG4。带有 H.264 视频编码和 AAC 音频编码的 MPEG-4 文件。

 WebM。带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件。

5. 通用接口标准

video和audio标签均使用基于抽象HTMLMediaElement的相同DOM接口。

下面介绍了标准的IDL规范接口，方便读者学习控制各种视频及音频流。

事件：

loadstart加载开始

浏览器开始寻找媒体数据，作为资源选择算法的一部分

使用前提条件：网络状态为加载状态（NETWORK_LOADING）

progress进度

浏览器获取媒体数据 

使用前提条件：网络状态为加载状态（NETWORK_LOADING）

suspend挂起

浏览器有意不在当前获取媒体数据，但是也不全部下载媒体资源

使用前提条件：网络状态为空闲状态（NETWORK_IDLE）

abort终止

在媒体数据完全下载完之前，浏览器停止获得媒体数据。这不能归因于一个错误的发生

使用前提条件：错误是一个对象，表示媒体错误终止的MEDIA_ERR_ABORTED代码。此时，网络是处于空载状态，还是处于空闲状态，取决于什么时候下载终止

error错误

当取得数据时，错误发生 

使用前提条件： 错误是一个对象，表示媒体错误终止的MEDIA_ERR_NETWORK代码或更高层次的代码。此时，网络是处于空载状态，还是处于空闲状态，取决于什么时候下载终止

emptied空闲

先前网络状态不是处于空载状态的媒体要素刚刚转向了这种状态（或者是因为下载时被报告了一个致命的错误，或者是因为资源选择算法已经运行时，load()方法被调用，这种情况下emptied事件是与load()方法的调用同时发生的）

使用前提条件： 网络状态为空载状态，所有的IDL属性都是初始化状态

stalled迟延

浏览器正在获取数据，但是数据有点出乎意料，没有到来

使用前提条件：网络状态为装载状态（NETWORK_LOADING）

play播放

重新播放已经开始。当play()方法返回后，接着播放

使用前提条件：最近的暂停为假

pause暂停

重新播放已被停止。当pause()方法返回后，接着播放

使用前提条件：最近的暂停为真

loadedmetadata装载媒体数据

浏览器决定媒体资源的持续时间和尺度 

使用前提条件： 准备状态最近处于拥有当前的全部数据或第一次装载大于所需数据的状态

loadeddata装载数据

浏览器能够返回的数据位于第一次处于当前重播的位置

使用前提条件：准备状态最近提升到拥有的数据或第一次大于所需的数据的状态

waiting等待

因为不能得到下一个帧，所以重新播放被停止，但是浏览器希望在这个过程中能得到这个架构

使用前提条件：准备状态最近等于或少于当前的数据，暂停则为假。其状态为要么搜索为真，要么当前回放位置不包含在缓冲的数据中

playing正在播放

回放被启动 

准备状态最近等于或多于未来的数据，暂停则为假，搜索也为假；或者当前回放位置包含在缓冲的数据中

canplay能够播放

浏览器能够继续回放媒体数据，但如果回放操作现在就开始的话，不用停下来等待进一步的缓冲，媒体资源则不能以当前的回放速率一直工作到结束

使用前提条件：准备状态最近增加到未来的数据或更多

canplaythrough能够从头到尾播放

如果浏览器现在就开始回放操作的话，媒体资源能以当前的回放速率一直工作，而不用停下来等待进一步的缓冲

使用前提条件： 准备状态最近等于足够的数据

seeking正在寻找

寻找IDL的属性被修改为真，搜索操作用去的时间很长

seeked寻找

寻找IDL的属性被修改为假

timeupdate时间更新

作为正常回放的一部分，当前回放位置被改变；或是以一种有趣的方式进行回放，如间断进行

ended结束

因为到达了媒体资源的终点，所以回放被停止

使用前提条件： 当前的时间等同于媒体资源结束的时间；结束为真

ratechange交换率

defaultPlaybackRate或是playbackRate属性已被更新

durationchange持续期的交换

duration属性已被更新

volumechange卷交换

volume属性或是muted属性被修改。在相关属性的安装已经返回后，开始工作

6. video存在的问题

Web的多媒体应用前景非常广阔，但是HTML5也有自身的问题：到目前为止，网页上的视频格式标准一直没有统一，苹果公司和微软支持H.264标准（MPEG4），谷歌公司、Mozilla和Opera支持Ogg Theora（Ogg）和WebM。

视频格式标准之争，已经不是一两天的事情了，而且这些争论及其带来的后果已经大大影响了各大平台和开发者对video标签的使用。而采用video标签的平台，必然面临着使用H.264还是使用Ogg的问题，如果两者都使用，又必须对同一个资源文件采用两种格式，由此带来了大量重复的格式转换工作，这恐怕是很多人头疼的问题。

7. Audio Data API 

浏览器厂商对Audio API的扩展是抱有巨大希望的，Mozilla对Audio的研究更加超前，在他们看来，浏览器不仅可以播放声音，还应该可以制造声音。

Audio Data API是 HTML5 规范中的媒体元素 <audio> 与 <video> 的补充功能，它让开发者可以存储和读取音效的外部数据（也有人将之称为后设数据）以及音频本身的原生数据。开发者可以具象化这些音效数据，分析这些数据，甚至创造出新的音效数据。这是对浏览器进行音频领域的一个巨大探索和拓展。

Moz下的事件

 loadedMetadata事件。当一个媒体的数据传至用户计算机的时候，此事件会被触发。它有3个属性，具体如下所示。

  mozChannels。声道的数量。

  mozSampleRate。取样频率（次/秒）。

  mozFrameBufferLength。每次事件所有声道的总样本数。

这些属性下的数据，在解码音频数据流时会用到。

 mozAudioAvailable事件。当播放一个音频源时，音频数据会被传送至音频处理层级而这些内容也会被输入进音频缓冲区（大小取决于mozFrameBufferLength）。当缓冲区被填满的时候，一个mozAudioAvailable事件会被触发。音频的播放、暂停和跳跃都会影响音频数据串流。该事件有两个属性，具体如下所示。

    frameBuffer。含有解码后的音频数据（浮点数）的frame缓冲区（一个数组）。（注意：内容不会照对应的声道分隔，而是混在一起，比如一个双声道信号：声道1-内容1，声道2-内容1，声道1-内容2，声道2-内容2，声道3-内容1，声道3-内容2。）

    time。时间戳，从开始时间计（计量单位：秒）。

下面代码是对上述两个事件进行说明用的源码：

<audio id="myaudio" class="lazy" data-src="song.ogg" controls="true"></audio>

<pre id="raw">hello</pre>

<script type="text/javascript">

function loadedMetadata(){

channels = audio.mozChannels; //声道的数量

rate = audio.mozSampleRate; //取样频率（次/秒）

frameBufferLength = audio.mozFrameBufferLength; //总样本数

}

function audioAvailable(event){

var frameBuffer = event.frameBuffer;

var t = event.time;

var text = "当前位置：" + t + "\n";

text += frameBuffer[0] + " " + frameBuffer[1];

raw.innerHTML = text;

}

var raw = document.getElementById('raw');

var audio = document.getElementById('myaudio');

audio.addEventListener('mozAudioAvailable',audioAvailable, false); //对事件进行监听

audio.addEventListener('loadedMetadata',loadedMetadata, false); //对事件进行监听

</script>

制造音频流

根据本API，我们可以用JavaScript脚本设定音频流的格式，然后写入音频数据。开发人员只需要建立一个音频对象，然后使用mozSetup()方法来设定声道的数量跟频率（Hz）即可。

下面请看源码：

var testA = new Audio(); //实例化一个audio对象

testA.mozSetup(2,44100); //设定此对象的格式为「双声道，44.1kHz」

var ADU = [0.242, 0.127, 0.0,-0.058,-0.242,...]; //用JavaScript数组来存放声音的数据（当然，

//你也可以使用你熟悉的其他方法来存放声音

//数据）

var audio_Stream = testA.mozWriteAudio(ADU); //用mozWriteAudio()方法来写入音频流

注意 并不是所有的样本都会被写入串流。函数会回传被写入串流的样本数，这对于下一次要写入数据很好用。

修改音频流

由于mozAudioAvailable 事件与mozWriteAudio()方法都是使用Float32Array传值，因此，把一个音频流的输出直接接上（或是处理过后接上）另一个音频流是可以做到的。办法很简单，只需要修改数组中的内容即可。同时，你也可以做到随时屏蔽、合成、分轨音量和并轨音频等。

8. Web Audio API

此API由Google公司提供，目前的最佳试验环境为Chrome 11及其以上版本的浏览器。

Web Audio API有很多接口：源、参数、缓冲区、进程事件、监听器、放大器、延迟效果、空间效果、折积效果、实时分析、动态比较器、过滤器和声道分离器等。这里根据W3C工作组的翻译文件，略作一些介绍。

 放大器（AudioGainNode）。主要是放大音频效果，它有两个参数，numberOfInputs和numberOfOutputs，只有一个Gain（增益）属性。

 延迟效果（AudioDelayNode）。主要是放大音频效果，它有两个参数，numberOfInputs和numberOfOutputs，只有一个delayTime（延迟时间）属性。

 空间效果（AudioPannerNode）。主要是对维度空间的音频消散计算，包括声音方向、多普勒效应的计算等。

 折积效果（AudioConvolverNode）。主要用于模拟环境的音效。

 实时分析（AudioRealtimeAnalyserNode）。主要是用于快速傅立叶转换，以用于可视化视频。它有5个属性，分别是fftSize、frequencyBinCount、minDecibels、max-Decibels、smoothingTimeConstant。

关于“HTML5的audio标签和video标签怎么使用”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“HTML5的audio标签和video标签怎么使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。