HTML5音频与视频

tianqi 2015-10-09

根据HTTML5的官方标准,并不需要为任何特定的音频或视频格式提供支持,所以浏览器厂商可以选择他们希望支持的格式。

一、HTML5中播放音频

1. audio元素

HTML5中,使用新增的audio元素来播放声音文件或音频流,支持Ogg Vorbis、MP3和WAV等音频格式。其用法如下

<audio src="sample.mp3" controls="controls">
    您的浏览器不支持audio标签
</audio>

2.播放音频

下面是一段完整的播放音频的代码

<audio controls="controls" autoplay loop>
    <source src="sample.ogg" type="audio/ogg">
    <source src="sample.mp3" type="audio/mpeg">
    您的浏览器不支持audio标签
</audio>

 注:

    *audio之间的内容是为不支持audio元素的浏览器准备的替换内容;

    *src直接指向媒体文件,如果浏览器不支持相关内容或编解码器时,需要用到备用声明,浏览器从这些数据源中进行选择(如上多个source);

    *srouce用type声明的媒体属性如果与媒体文件不匹配,浏览器可能拒绝播放,如果不明确type类型,可以省略。

二、HTML5中播放视频

1. video元素

HTML5中,使用新增的video元素来播放视频文件或视频流,支持Ogg、MPEG-4、WebM等视频格式,用法如下:

<video src="sample.mp4" controls="controls">
    您的浏览器不支持HTML5视频
</video>

2. 播放视频 

下面是播放视频的一个完整示例,浏览器会选择source列表中第一个可以识别的格式。

<video controls="controls" autoplay>
    <source src="sample.mp4" type="video/mp4">
    <source src="sample.ogg" type="video/ogg">
    您的浏览器不支持HTML5视频
</video>

三、音频&视频相关属性、方法与事件

下面只介绍一些视频、音频相关的

1.相关属性

  • autobuffer - 自动缓冲,可读写属性,true/false
  • autoplay - 自动播放,可读写属性,true/false
  • buffered - 只读属性,返回TimeRanges对象,确认浏览器已经缓存媒体文件
  • controls - 为媒体文件提供控制条,可读写属性,controls
  • currentSrc - 媒体数据的URL地址,,只读属性,无默认值
  • currentTime - 当前播放位置,可读写属性,返回值为时间(单位:秒)
  • duration - 媒体的持续时间,只读属性,返回值为时间(单位:秒)
  • ended - 是否播放结束,只读属性,返回布尔值
  • error - 返回一个MediaError对象表明错误状态,只读属性(MEDIA_ERR_ABORTED媒体资源获取异常,MEDIA_ERR_NETWORK网络错误,MEDIA_ERR_DECODE媒体解码错误,MEDIA_ERR_SRC_NOT_SUPPORTED媒体格式不支持)
  • initialTime - 获取最早的可用于回放的位置,只读属性,返回值为时间(单位:秒)
  • loop - 播放结束是否重新开始播放,可读写属性
  • muted - 播放时是否开启静音,可读写属性,true/false(开启静音/未开启静音)
  • networkState - 返回媒体的网络状态,只读属性
  • paused - 媒体是否暂停播放,只读属性,true/fase(暂停/正在播放)
  • playbackRate - 读取或设置媒体资源播放的当前速率,可读写属性
  • played - 媒体在浏览器中已播放的时间范围,只读属性
  • preload - 定义视频是否预加载,可读写属性,none/metadata/auto
  • readyState - 当前播放位置的就绪状态,只读属性
  • seekable - 可以对当前媒体资源进行请求,只读属性
  • seeking - 浏览器是否正在请求某一播放位置的的媒体数据,只读属性,true/false
  • src - 指定媒体资源的URL位置,可读写属性
  • volume - 获取或设置音量,可读写属性,范围0.0~1.0

2.相关方法

  • canPlayType - 返回一个字符串以表明客户端是否能够播放指定的媒体,probably/maybe/空字符串
  • load - 重置媒体元素并重新载入媒体,方法可宗旨任何正在进行的任务或事件
  • pause - 用于暂停媒体的方法,并设置paused属性为true
  • play - 播放媒体,并设置paused属性设置为false

3.相关事件

用addEventListener或者直接赋值方式添加事件监听,下面仅列出部分事件:

  • canplay - 浏览器能够开始播放媒体数据,但以当前速率不能直接将媒体播放完
  • ended - 媒体播放已抵达结尾
  • error- 在元素加载期间发生错误
  • loadeddata - 已经加载当前播放位置的媒体数据
  • pause - 媒体数据暂停播放
  • play - 媒体数据简要开始播放
  • playing - 媒体数据已经开始播放
  • progress - 浏览器正在获取媒体数据
  • readystatechange - 就绪状态改变
  • stalled - 浏览器获取媒体数据过程中出现异常
  • waiting - 媒体已停止播放但打算继续播放
4. 检测音频&视频格式支持情况

相关推荐