html5中的video标签和audio标签

2022-07-11 16:53:49

不管是否承认，flash早已不像过往那样如日中天了。亚马逊全面放弃flash、苹果放弃flash、安卓也放弃了移动端的flash支持。事实上flash已经不太适合web开发了，因为HTML5中的video和audio这两个API为web开发提供了更高效的音频视频控制。或许你可以看看[这篇文章][flash]。

video标签

为何需要多个格式的视频文件

在HTML5页面中，我们可以使用video标签来实现对视频文件的控制。但是在浏览器中打开视频并没那么简单，不仅浏览器要支持标签，而且还要有编码译码器来播放视频。显然最好的解决方式是HTML5规范规定一个统一的编码译码器，然后让浏览器制造商去执行。
但是，那些这些制造商的尿性大家都是知道的，HTML5规范到最后也没有制定一个统一的视频编码译码器标准。
最后的情况是，如果要考虑视频在不同浏览器下的兼容性，开发者就要考虑好些情况了:
- Opera、Mozilla、Chrome浏览器支持的Ogg Theora或者VP8编码译码器所能处理的
- Safari、IE高版本（9++）、Chrome支持的H.264
- IE低版本（8--）

而.MP4后缀的视频文件是带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件； WebM是 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件；Ogg是带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件。

所以一般只需要Ogg、MP4和flv/swf格式的视频文件，也就是需要三个视频文件，就能完美地在各个浏览器间显示视频了。

当然，各浏览器支持一直在变动，所有脱离时间来谈支持的都是在耍流氓。可以在[caniuse][video]上查看下各浏览器对video的支持。

video标签的兼容代码

所以一般的<video>标签的内容，由简到繁的三种写法：
- 最简单的形式是:
```javascript

视频不支持时显示的文字

```
- 兼容Firefox的写法
```javascript

还用渣渣浏览器？？？

```

  • 兼容IE8的写法
<video width="400px" height="400px" controls>

<source src="video/ video.ogg" type="video/ogg" />

<source src="video/ video.mp4" type="video/mp4" />

<embed src="video/ movie.swf" type="application/x-shockwave-flash"

width="400" height="400px" allowscriptaccess="always" allowfullscreen="true"></embed>

 抱歉，本站不欢迎你...

</video>

HTML5中媒体的类型（video和audio）

规定要检测的音频/视频类型（和可选的编解码器）。

常用值：

  • video/ogg
  • video/my4
  • video/webm
  • audio/mpeg
  • audio/ogg
  • audio/mp4

常用值，包括编解码器：

  • video/ogg; codecs="theora, vorbis"
  • video/mp4; codecs="avc1.4D401E, mp4a.40.2"
  • video/webm; codecs="vp8.0, vorbis"
  • audio/ogg; codecs="vorbis"
  • audio/mp4; codecs="mp4a.40.5"

video标签中的属性

Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性，以及一个内部使用的标签<source>。
1. src属性和poster属性
你能想象src属性是用来干啥的。跟<img>标签的一样，这个属性用于指定视频的地址。而poster属性用于指定一张图片，在当前视频数据无效时显示（预览图）。视频数据无效可能是视频正在加载，可能是视频地址错误等等。
``` javascript

<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay"></video>

```
  1. preload属性

    此属性用于定义视频是否预加载。如果有这个属性有三个可选择的值：none（页面加载后不载入视频）、meta（页面加载后只载入元数据）、auto（页面加载后载入整个视频）。如果不使用此属性，默认为auto。如果<video>标签有autoplay属性的话，会忽略preload属性。 

    
<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>
  2. autoplay属性

    autoplay属性用于设置视频是否自动播放，是一个布尔属性。当出现时，表示自动播放，去掉是表示不自动播放。 

    
<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>
  3. loop属性

    指定视频是否循环播放，也是一个布尔属性 

    
<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" loop="loop"></video>
  4. controls

    布尔属性，用于向浏览器指明页面制作者没有使用脚本生成播放控制器，需要浏览器启用本身的播放控制栏。

    控制栏须包括播放暂停控制，播放进度控制，音量控制等等。

    不同浏览器显示的控制器样式不一样，而这些其实都是可以通过使用HTML5中的video API来自己设定的，比如这个[video.js自定义视频播放器][player]。
  5. width和height

    这个很清楚，不多说。
  6. <source>标签

    用于给video标签指定多个可选择的视频文件地址，标签最后会选择一个，而且要在<video>标签没有src属性时使用。

    浏览器按source标签的顺序检测指定的视频是否能播放，无法播放的原因可能是格式不支持，或者文件不存在等。如果不能播放，则尝试播放下一下。<source>标签不能单独出现，必须要放在媒体标签里面。

    - src属性 指定媒体的地址，和video标签里的一样

    - Type属性 说明src属性指定媒体的类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。具体的属性值，请参见[w3c的文档][w3c]。

    - Media属性 用于说明媒体在何种媒介中使用，不设置时默认值为all，表示支持所有媒介。 其实就是和<style>标签的media属性一模一样。

    注意：XHTML中属性不允许简写，比如controls必须写作<video src='src/myvideo' controls='controls'>

HTML中的媒体API

HTML5中的媒体API给我们更强大的媒体控制能力。可以在[ 轻松学会HTML5播放器开发][studyVideo]这个学习页面简单了解下媒体API中常用的几个属性和方法。
> HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement

关于媒体状态信息的媒体属性

只读属性

- error属性
只读。用于返回一个MediaError对象。MediaError对象的code属性包含了视频的错误状态，它是一个数字值（想想HTTP状态码），具体如下：
- 1 = MEDIA_ERR_ABORTED - 取回过程被用户中止
- 2 = MEDIA_ERR_NETWORK - 当下载时发生错误
- 3 = MEDIA_ERR_DECODE - 当解码时发生错误
- 4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音频/视频
使用方法：
``` javascript
var myVid=document.getElementById("video1");
alert(myVid.error.code);
```
- currentSrc属性
只读。myVid.currentSrc会返回该媒体播放的文件的URL，和src属性不同。就算<video>标签有src属性且为相对路径，myVid.getAttribute('src')会返回src的值，而currentSrc却是会返回绝对路径。
如果未设置媒体文件，会返回空字符串。
- networkState属性
只读。myVid.networkState 属性返回媒体的当前网络状态（activity）。具体如下：
- 0 = NETWORK_EMPTY - 音频/视频尚未初始化
- 1 = NETWORK_IDLE - 音频/视频是活动的且已选取资源，但并未使用网络
- 2 = NETWORK_LOADING - 浏览器正在下载数据
- 3 = NETWORK_NO_SOURCE - 未找到音频/视频来源
- readyState属性
只读。myVid.readyState返回媒体当前播放的就绪状态。
- 0 = HAVE_NOTHING - 没有关于音频/视频是否就绪的信息，或者说当前播放位置无有效媒介资源
- 1 = HAVE_METADATA - 已经获得了音频/视频就绪的元数据,媒介资源确认存在，但当前位置没有能够加载到有效媒介数据进行播放,等待后续加载
- 2 = HAVE_CURRENT_DATA - 虽然当前播放位置的数据是可用的，但没有足够的数据来播放
- 3 = HAVE_FUTURE_DATA - 已经获得了后续播放的数据，可以进行播放，但不足以播放到最后
- 4 = HAVE_ENOUGH_DATA - 可以进行播放，且且浏览器确认媒体数据以某一种速度进行加载，可以保证有足够的后续数据进行播放，而不会使浏览器的播放进度赶上加载数据的末端
- seeking属性
只读。myVid返回一个布尔值，表明浏览器是否在媒体中寻址。true表示浏览器正在寻址，false表示浏览器已停止寻址。
寻址（Seeking）指用户在视频中跳跃到新的位置。使用如下代码：
``` javascript
//当在视频进度条点击当前播放位置的后面时，span1的位置会显示'Seeking:true'，然后过一会变成'Seeking:false'
myVid=document.getElementById("video1");
function isSeeking()
{
document.getElementById("span1").innerHTML=("Seeking: " + myVid.seeking);
}
myVid.addEventListener('seeking',isSeeking;)
```
- seekable属性
只读。myDiv.seekable会返回一个TimeRanges对象，这个对象表示媒体文件中用户可寻址的范围。可寻址范围指的是用户在媒体中可寻址（移动播放位置）的时间范围。
对于非流视频，通常可以寻址到视频中的任何位置，即使其尚未完成缓冲。
TimeRanges对象([MDN][mdn]):表示音频/视频的缓冲范围。缓冲范围是指已经缓冲的音频/视频的时间范围。如果用户在音频/视频中跳跃播放，将会得到多个缓冲范围。它的属性有：
- length - 获得音频/视频中可寻址范围的数量
- start(index) - 获得可寻址范围的开始位置
- end(index) - 获得可寻址范围的结束位置
注意，第一个缓冲范围的下标index是0。
- played、paused、ended属性
均为只读。played返回一个TimeRanges对象，表明浏览器已播放的媒体的时间范围。
myVid.paused则返回一个布尔值，表明媒介是否暂停播放。因为只读，所以不能通过设置myVid.paused=false来继续播放。
myVid.ended返回一个布尔值，表明媒体是否已经结束。
- duration属性
只读。返回当前媒体文件的长度，以秒来计。
- buffered属性
只读。返回TimeRanges对象，确认浏览器已经缓存的文件。
可以看看[这个效果][tween]，就是靠JS操纵这些API来实现的

可读写属性

  • defalutPlaybackRate

    设置或返回媒体的默认播放速度。

    注意：设置该属性仅会改变默认的播放速度，而不是当前的。要改变当前的播放速度，要用playbackRate属性。
  • playbackRate

    设置或返回媒体的当前播放速度。
  • currentTime属性

    可读写属性。用于设置或者读取媒体播放的当前位置（以秒计）。如果是设置该属性，则播放会跳跃到指定位置。
  • preload属性

    返回媒体标签的preload属性值，或者对其赋值。
  • autoplay属性

    可读写属性。布尔值，表示媒体是否设置了自动播放。
  • loop属性

    可读写属性。布尔值，表示媒体是否设置了循环播放。
  • controls属性

    可读写属性。布尔值，表示媒体是否使用了浏览器默认的播放控制栏。
  • src属性

    设置或返回媒体文件的当前来源。
  • volume属性

    设置或者返回当前媒体的音量值。范围为0~1，0相当于静音，1是最大音量。
  • muted属性

    布尔值。表示当前媒体是否开启了静音。

媒体API中的方法

  • play() 播放视频，并把myVid.paused强行设为false。
  • pause()暂停视频，并把myVid.paused强行设为true。
  • load() 重新载入视频，然后把myVid.playbackRate的值强行设为meVid.defaultPlaybackRate的值，且强行把media.error的值设为null。
  • canPlayType(type)

    测试浏览器是否支持特定的媒体类型。返回值有3个可能结果：空字符串（浏览器不支持此种媒体类型）、maybe（浏览器可能支持此种媒体类型）、probably（浏览器确定支持此种媒体类型）。

    可能type在前面的媒体类型一节已说明。如果是带编码译码器的，只会返回probably。

媒体API中的事件

完整的事件列表 [w3c][w3cEvent]
- loadstart事件：浏览器开始寻找指定的媒体时，即当加载过程开始时。
- durationchange事件：媒介时长（duration属性）改变。
比如：当音频/视频加载后，时长将由 "NaN" 变为音频/视频的实际时长。
- loadedmetadata事件：浏览器获取完媒介资源的时长和尺寸。
- loadeddata事件：已加载当前播放位置的媒介数据。
- progress事件：浏览器正在获取媒介。
- canplay事件：浏览器能够开始媒介播放，但估计以当前速率播放不能直接将媒介播放完（播放期间需要缓冲）。
- canplaythrough事件：浏览器估计以当前速率直接播放可以直接播放完整个媒介资源（期间不需要缓冲）。
- abort事件：浏览器在完全加载前中止获取媒介数据。这是在媒体数据终止下载时触发，而不是出错时触发。
- suspend事件：该事件在媒体数据被阻止加载时触发。 可以是完成加载后触发，或者因为被暂停的原因。
- error事件：获取媒介数据，也就是媒体加载时出错。
- emptied事件：媒介元素的网络状态突然变为未初始化。
- stalled事件：浏览器尝试获取媒体数据，但数据不可用时触发。
- play事件：即将开始播放。
- pause事件：暂停播放。
- waiting事件：在视频由于需要缓冲下一帧而停止时触发。
- playing事件：在媒体文件因为缓冲而停止或暂停之后已就绪时触发。
比如：拉动行动条时。
- seeking事件：浏览器正在请求数据（seeking属性值为true）。
- seeked事件：浏览器停止请求数据（seeking属性值为false）。
- timeupdate事件：当前播放位置（currentTime属性）改变。比如用来实现显示播放了的时间。
- ended事件：播放由于媒介结束而停止。
- ratechange事件：播放速率（playbackRate属性）改变时触发。
- volumechange事件：音量（volume属性）改变或静音（muted属性）。

事实上，当媒体加载时，会依次发下如下事件：

  • loadstart
  • durationchange
  • loadedmetadata
  • loadeddata
  • progress
  • canplay
  • canplaythrough

更完整的媒体API可以查看[video和audio参考手册][ref]

音频的相关内容

<audio>用于定义音频文件，比如音乐或者其他的音频流。
目前<audio>支持3种文件格式:MP3、Wav、Ogg。也可以在[caniuse][audio]上查看目前的支持情况。
之前说过，HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement，所以<audio>和<video>的API基本是通用的，而且两个标签能使用的属性也相同。

在HTML中播放音频

  • 不使用<audio>标签，使用插件：

    浏览器插件是一种扩展浏览器标准功能的小型计算机程序。

    插件可以使用 <object> 标签 或者 <embed> 标签添加在页面上.

    这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。

    使用插件的示例代码：
	<embed height="50" width="100" src="horse.mp3">

	<object height="50" width="100" data="horse.mp3"></object>
`<embed> `标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。
  • 最好的HTML5办法是使用audio标签，然后如果失败代码回退至<embed>。缺点是要把音频转换为不同的格式，且<embed>无法回退来显示错误消息。
  • 使用<a>标签。

    如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。

    以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"来播放该文件：
<a href="horse.mp3">Play the sound</a>
但是考虑到这种方式会显示成一个超链接，然后就需要对`<a>`元素进行处理了，因此不太推荐。
  • 终级方法，使用库。

    雅虎媒体播放器是一个免费的在线媒体播放器，只需要添加一行代码到页面底部就可以轻松地把HTML5页面制作成专业的播放列表：
	<a href="horse.mp3">Play Sound</a>

	<script src="http://mediaplayer.yahoo.com/latest"></script>
然后只需简单地把 MP3 文件链接到您的 HTML 中，JavaScript 会自动地为每首歌创建播放按钮。雅虎媒体播放器为您的用户提供的是一个小型的播放按钮，而不是完整的播放器。不过，当您点击该按钮，会弹出完整的播放器。

关于内联声音的说明

> 当您在网页中包含声音，或者作为网页的组成部分时，它被称为内联声音。

如果您打算在 web 应用程序中使用内联声音，您需要意识到很多人都觉得内联声音令人恼火。同时请注意，用户可能已经关闭了浏览器中的内联声音选项。

我们最好的建议是只在用户希望听到内联声音的地方包含它们。一个正面的例子是，在用户需要听到录音并点击某个链接时，会打开页面然后播放录音。

具体代码

- 最少的代码
``` javascript

```
- 带有不兼容提醒的代码
``` javascript

Your browser does not support the audio tag.

```
- 能平稳退化的代码
``` javascript

Your browser does not support the audio tag.

```

track标签

`` 标签为媒体元素（比如 `` and ``）规定外部文本轨道。它也是HTML5中的新标签。
用于规定字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的。
属性：
- default 规定该轨道是默认的。如果用户没有选择任何轨道，则使用默认轨道。
- kind规定文本轨道的文本类型。可用值：
- captions 该轨道定义将在播放器中显示的简短说明。
- chapters 该轨道定义章节，用于导航媒介资源。
- descriptions 该轨道定义描述，用于通过音频描述媒介的内容，假如内容不可播放或不可见。
- metadata 该轨道定义脚本使用的内容。
- subtitles 该轨道定义字幕，用于在视频中显示字幕。
- src 规定轨道文件的URL。
- srclang 规定轨道文本数据的语言。可用值应该是双字母的语言代码，规定轨道的语言。
- label 规定文本轨道的标题。比如，当用户选择了字幕轨道时，标题就会显示出来。

媒体API中与track有关的内容

  • addTextTrack(kind,label,language)方法

    用于创建和返回新的TextTrack对象。新的TextTrack对象会被添加到媒体元素的文本轨道列表中。
  • videoTracks属性
  • 返回VideoTrackList对象，表示视频的可用视频轨道，每个可用的视频轨道是用VideoTrack对象表示的（主流浏览器暂不支持）。
  • audioTracks属性

    返回AudioTrackList对象。表示音频/视频的可用音频轨道。每个轨道用一个AudioTrack对象表示（主流浏览器暂不支持）。
  • textTracks属性

    返回TextTrackList对象，表示媒体的可用文本轨道。每个文本轨道是用TextTrack对象表示了。这个真能用！！

    TextTrack对象

    表示一个文本轨道。可用属性有：

    kind 获得文本轨道的类型（可以是 "subtitles"、"caption"、"descriptions"、"chapters" 或者 "metadata"）

    label 获得文本轨道的标签

    language 获得文本轨道的语言

    mode 获得或设置该轨道是否是活动的（"disabled"|"hidden"|"showing"）

    cues 获得 TextTrackCueList对象的cues列表

    activeCues 获得TextTrackCueList对象形式的当前活动文本轨道cues

    addCue(cue) 向cues列表添加一个cue

    removeCue(cue) 从cues列表删除一个cue

这一节提到的另外还有VideoTrackList对象和VideoTrack对象，略微了解一下。具体说明如下：

VideoTrackList 对象

  • videoTracks.length 获得视频中可用视频轨道的数量
  • videoTracks.getTrackById(id)通过id获得VideoTrack对象
  • videoTracks[index] 通过下标index获得VideoTrack对象
  • videoTracks.selectedIndex获得当前VideoTrack对象的下标

VideoTrack对象

表示一个视频轨道，可用属性有：

  • id 获得视频轨道的id
  • kind 获得视频轨道的类型（可以是"alternative"、"captions"、"main"、"sign"、"subtitles"、"commentary" 或 ""（空字符串））
  • label 获得视频轨道的标签
  • language 获得视频轨道的语言
  • selected 获得或设置视频轨道是否是活动的（true|false）

给HTML5媒体使用字幕

可以看看[这个链接][ie]（msdn)。这甚至能做到用JS提取每一时刻的显示字幕,用的是TextTrackCue的API，前面未讲到过，也可以在这个页面上看看。
使用字幕的代码如下：
``` html

```
视频给了两字幕文件，一个是中文的，一个是英文的，默认英文字幕。
常用字幕格式为vtt模式，是以UTF-8编码的文本文件，[MIME类型约定][mime]为'text/vtt'，需要在服务器端进行配置。内容格式如下：
```
WEBVTT

00:00:01.878 --> 00:00:05.334

曾经有一份真诚的爱情放在我面前，

00:00:08.608 --> 00:00:15.296

我没有珍惜，等我失去的时候我才后悔莫及，

人世间最痛苦的事莫过于此。



[mdn]:https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges

[ref]:http://www.w3cschool.cn/htmltags/ref-av-dom.html

[flash]:http://mt.sohu.com/20150822/n419491608.shtml

[audio]:http://caniuse.com/#search=audio

[video]:http://caniuse.com/#search=video

[player]:http://www.html5tricks.com/demo/video-js/demo.html

[studyVideo]:http://www.html5tricks.com/demo/html5-video-api/index.html

[w3cEvent]:https://www.w3.org/wiki/HTML/Elements/video

[w3c]:https://www.w3.org/TR/html/semantics-embedded-content.html#the-source-element

[ie]:https://msdn.microsoft.com/zh-cn/library/bg123962(v=vs.85).aspx

[mime]:http://www.cnblogs.com/benymor/p/6078820.html

[tween]:http://codepen.io/benymor/pen/ZLmqVQ
上一篇：MySQL模糊搜索的四种用法


下一篇：每个新手程序员都必须知道的Python技巧