html5中的video标签和audio标签

时间  2019-12-13
标签 html5 html video 标签 audio 栏目 HTML5 繁體版
原文   原文链接

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

video标签

为什么须要多个格式的视频文件

在HTML5页面中，咱们可使用video标签来实现对视频文件的控制。可是在浏览器中打开视频并没那么简单，不只浏览器要支持标签，并且还要有编码译码器来播放视频。显然最好的解决方式是HTML5规范规定一个统一的编码译码器，而后让浏览器制造商去执行。
可是，那些这些制造商的尿性你们都是知道的，HTML5规范到最后也没有制定一个统一的视频编码译码器标准。
最后的状况是，若是要考虑视频在不一样浏览器下的兼容性，开发者就要考虑好些状况了:html

  • 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格式的视频文件，也就是须要三个视频文件，就能完美地在各个浏览器间显示视频了。html5

固然，各浏览器支持一直在变更，全部脱离时间来谈支持的都是在耍流氓。能够在caniuse上查看下各浏览器对video的支持。
java

video标签的兼容代码


因此通常的<video>标签的内容，由简到繁的三种写法：

  • 最简单的形式是:
<video width="400px" height="400px" src="video/ video.mp4" type="video/mp4"  controls>
视频不支持时显示的文字 
</video>
  • 兼容Firefox的写法
<video width="400px" height="400px" controls>
<source src="video/ video.ogg" type="video/ogg" /> 
<source src="video/ video.mp4" type="video/mp4" />
 还用渣渣浏览器？？？
</video>
  • 兼容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）

规定要检测的音频/视频类型（和可选的编解码器）。
经常使用值：web

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

经常使用值，包括编解码器：api

  • 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属性用于指定一张图片，在当前视频数据无效时显示（预览图）。视频数据无效多是视频正在加载，多是视频地址错误等等。缓存

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

  2. 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>

  3. 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>

  4. 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>
  5. controls
    布尔属性，用于向浏览器指明页面制做者没有使用脚本生成播放控制器，须要浏览器启用自己的播放控制栏。
    控制栏须包括播放暂停控制，播放进度控制，音量控制等等。
    不一样浏览器显示的控制器样式不同，而这些其实都是能够经过使用HTML5中的video API来本身设定的，好比这个video.js自定义视频播放器。
  6. width和height
    这个很清楚，很少说。

  7. <source>标签
    用于给video标签指定多个可选择的视频文件地址，标签最后会选择一个，并且要在<video>标签没有src属性时使用。
    浏览器按source标签的顺序检测指定的视频是否能播放，没法播放的缘由多是格式不支持，或者文件不存在等。若是不能播放，则尝试播放下一下。<source>标签不能单独出现，必需要放在媒体标签里面。
    - src属性 指定媒体的地址，和video标签里的同样
    - Type属性 说明src属性指定媒体的类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。具体的属性值，请参见w3c的文档。
    - Media属性 用于说明媒体在何种媒介中使用，不设置时默认值为all，表示支持全部媒介。 其实就是和<style>标签的media属性如出一辙。
    注意：XHTML中属性不容许简写，好比controls必须写做<video src='src/myvideo' controls='controls'>

HTML中的媒体API

HTML5中的媒体API给咱们更强大的媒体控制能力。能够在轻松学会HTML5播放器开发这个学习页面简单了解下媒体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 - 不支持音频/视频
      使用方法：
    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):表示音频/视频的缓冲范围。缓冲范围是指已经缓冲的音频/视频的时间范围。若是用户在音频/视频中跳跃播放，将会获得多个缓冲范围。它的属性有：
    • length - 得到音频/视频中可寻址范围的数量
    • start(index) - 得到可寻址范围的开始位置
    • end(index) - 得到可寻址范围的结束位置
      注意，第一个缓冲范围的下标index是0。
  • played、paused、ended属性
    均为只读。played返回一个TimeRanges对象，代表浏览器已播放的媒体的时间范围。
    myVid.paused则返回一个布尔值，代表媒介是否暂停播放。由于只读，因此不能经过设置myVid.paused=false来继续播放。
    myVid.ended返回一个布尔值，代表媒体是否已经结束。
  • duration属性
    只读。返回当前媒体文件的长度，以秒来计。
  • buffered属性
    只读。返回TimeRanges对象，确认浏览器已经缓存的文件。
    能够看看这个效果，就是靠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

  • 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参考手册

音频的相关内容

<audio>用于定义音频文件，好比音乐或者其余的音频流。
目前<audio>支持3种文件格式:MP三、Wav、Ogg。也能够在caniuse上查看目前的支持状况。
以前说过，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 应用程序中使用内联声音，您须要意识到不少人都以为内联声音使人恼火。同时请注意，用户可能已经关闭了浏览器中的内联声音选项。
咱们最好的建议是只在用户但愿听到内联声音的地方包含它们。一个正面的例子是，在用户须要听到录音并点击某个连接时，会打开页面而后播放录音。

具体代码

  • 最少的代码
<audio src="song.ogg" controls="controls"></audio>
  • 带有不兼容提醒的代码
<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>
  • 能平稳退化的代码
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

track标签

<track> 标签为媒体元素（好比 <audio> and <video>）规定外部文本轨道。它也是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媒体使用字幕

能够看看这个连接（msdn)。这甚至能作到用JS提取每一时刻的显示字幕,用的是TextTrackCue的API，前面未讲到过，也能够在这个页面上看看。
使用字幕的代码以下：

<video id="mainvideo" controls autoplay loop>  
  <track src="en_track.vtt" srclang="en" label="English" kind="caption" default>  
  <track src="cn_track.vtt" srclang="zh-cn" label="简体中文" kind="caption">  
</video>

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

WEBVTT  
  
00:00:01.878 --> 00:00:05.334  
曾经有一份真诚的爱情放在我面前，  
  
00:00:08.608 --> 00:00:15.296  
我没有珍惜，等我失去的时候我才后悔莫及，   
人世间最痛苦的事莫过于此。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程