音频和视频的编码/解码器是一组算法,用来对一段特定的音频或视频流进行编码和解码,以便音频和视频能够播放。原始的媒体文件体积非常大,假如不对其进行编码,那么构成一段视频和音频的数据可能会非常庞大,以至于在因特网上传播需耗费无法忍受的时间。若没有解码器的话,接收方就不能把编码过的数据重组为原始的媒体数据。编解码器可以读懂特定的容器格式,并且对其中的音频轨道和视频轨道解码。
3.2.2 理解媒体元素
1、基本操作:声明媒体元素
<audio controls src="Adele-Set Fire To The Rain.mp3">
您所使用的浏览器不支持HTML5 audio
</audio>
代码中的controls 特性是告诉浏览器显示通用的用户控件,包括开始、停止、跳播以及音量控制。如果不指定controls属性,用户将无法播放页面上的音频。
2、使用source元素。
最简单的情况下,src属性直接指向媒体文件就可以了,但是,万一浏览器不支持相关容器或者编码器呢?这就需要用到备用声明了。备用声明中可以包含多种来源,浏览器可以从这么多的来源中进行选择:
<audio controls>
<source src="Adele-Set Fire To The Rain.mp3" >
<source src="Adele-Set Fire To The Rain.ogg" >
</audio>
对于来源,浏览器会按照声明顺序判断,如果支持的不止一种,那么浏览器会选择支持的第一个来源。
3、媒体的控制
在audio元素或video元素中通过设置特性autoplay,不需要任何用户交互,音频或视频文件就会在加载完成后自动播放。
表3-3 常用的控制函数
函数
|
动作
|
load()
|
加载音频/视频文件,为播放做准备,通常情况下不必调用,除非是动态生成的元素。用来在播放前预加载。
|
play()
|
加载(有必要的话)并播放音频/视频文件。除非音频/视频已经暂停在其他位置了,否则默认从头开始播放
|
pause()
|
暂停处于播放状态的音频/视频文件
|
canPlayType(type)
|
测试video元素是否支持给定MIME类型的文件
|
表3-4 只读的媒体特性
只读特性
|
值
|
duration
|
整个媒体文件的播放时长,以s为单位。如果无法获取时长,则返回NaN
|
paused
|
如果媒体文件当前被暂停,则返回true。如果还未开始播放,则返回false。
|
ended
|
如果媒体文件已经播放完毕,则返回true
|
startTime
|
返回最早的播放起始时间,一般是0.0,除非是缓冲过的媒体文件,并且一部分内容已经不在缓冲区
|
error
|
在发生了错误的情况下返回的错误代码
|
currentSrc
|
以字符串形式返回当前正在播放或已加载的文件。对应于浏览器在source元素中选择的文件。
|
表3-5 可脚本控制的特性值
特性
|
值
|
autoplay
|
将媒体文件设置为创建后自动播放,或者查询是否已设置为autoplay
|
loop
|
如果媒体文件播放完毕后能重新播放则返回true,或者将媒体文件设置为循环播放(或者不循环播放)
|
currentTime
|
以s为单位返回从开始播放到现在所用的时间。在播放过程中,设置currentTime来进行搜索,并定位到媒体文件的特定位置
|
controls
|
显示或隐藏用户控制界面,或者查询用户控制界面当前是否可见
|
volume
|
在0.0到1.0之间设置音频音量的相对值,或者查询当前音量的相对值。
|
muted
|
为音频文件设置静音或者消除静音,或者渐层当前是否为静音
|
autobuffer
|
通知播放器在媒体文件开始播放前,是否进行缓冲加载。如果媒体文件已经设置为autoplay,则忽略测特性。
|
3.2.3 使用audio元素
3.2.4 使用video
HTML5 video元素同audio元素非常类似,只是比audio元素多了一些特性。
表3-6 video元素的额外特性
特性
|
值
|
poster
|
在视频加载完成之前,代表视频内容的图片的URL地址,可以想象一下“电影海报”。该特性不仅可读,而且可以修改,以便更换图片
|
width、height
|
读取或设置显示尺寸。如果设置的宽度与视频本身大小不匹配,可能导致居中显示,上下或左右可能出现黑色条状区域。
|
videoWidth、videoHeight
|
返回视频固有的或自适应的宽度和高度。只读
|
video元素还有一个audio元素不支持的关键特性:可被HTML5 Canvas的函数调用。
提示 当canvas使用视频作为绘制来源时,画出来的只是当前播放的帧。
分享到:
相关推荐
Flash CC 标准课程第十三章 音频与视频的使用在flash中导入视频
Flash CC 标准课程第十三章 音频与视频的使用动画预览及动画的优化
Flash CC 标准课程第十三章 音频与视频的使用导出Flash作品及动画的发布
“视频篇”(第3章至第7章)重点讲解MPEG-2、H.263、MPEG-4、H.264等视频标准的编码、解码技术;“音频篇”(第8章至第14章),重点讲解G.711、G.721、G.723、GSM、G.728和G.729等语音编码的原理和实现方法;“案例篇”...
”(第3章至第7章)重点讲解MPEG-2、H.263、MPEG-4、H.264等视频标准的 编码、解码技术;“音频篇”(第8章至第14章),重点讲解G.711、G.721、 G.723、GSM、G.728和G.729等语音编码的原理和实现方法;“案例篇”(第 ...
第3章 DirectSound开发基础 93 3.1 Microsoft DirectSound SDK 94 3.1.1 比较DirectSound与DirectMusic 94 3.1.2 DirectSound SDK能做什么 95 3.1.3 如何获取DirectSound SDK 96 3.1.4 DirectSound SDK的基本...
”(第3章至第7章)重点讲解MPEG-2、H.263、MPEG-4、H.264等视频标准的 编码、解码技术;“音频篇”(第8章至第14章),重点讲解G.711、G.721、 G.723、GSM、G.728和G.729等语音编码的原理和实现方法;“案例篇”(第 ...
第3章 DirectSound开发基础 93 3.1 Microsoft DirectSound SDK 94 3.1.1 比较DirectSound与DirectMusic 94 3.1.2 DirectSound SDK能做什么 95 3.1.3 如何获取DirectSound SDK 96 3.1.4 DirectSound SDK的基本...
”(第3章至第7章)重点讲解MPEG-2、H.263、MPEG-4、H.264等视频标准的 编码、解码技术;“音频篇”(第8章至第14章),重点讲解G.711、G.721、 G.723、GSM、G.728和G.729等语音编码的原理和实现方法;“案例篇”(第 ...
《VC音频/视频技术开发与实战》案例源码
第3章 DirectSound开发基础 93 3.1 Microsoft DirectSound SDK 94 3.1.1 比较DirectSound与DirectMusic 94 3.1.2 DirectSound SDK能做什么 95 3.1.3 如何获取DirectSound SDK 96 3.1.4 DirectSound SDK的基本结构 98...
第3章 DirectSound开发基础 93 3.1 Microsoft DirectSound SDK 94 3.1.1 比较DirectSound与DirectMusic 94 3.1.2 DirectSound SDK能做什么 95 3.1.3 如何获取DirectSound SDK 96 3.1.4 DirectSound SDK的基本结构 98...
Visual_C++音频视频处理技术及工程实践_05_第05章_P163_P188语音3D特效器制作
第3章 DirectSound开发基础 93 3.1 Microsoft DirectSound SDK 94 3.1.1 比较DirectSound与DirectMusic 94 3.1.2 DirectSound SDK能做什么 95 3.1.3 如何获取DirectSound SDK 96 3.1.4 DirectSound SDK的基本结构 98...
”(第3章至第7章)重点讲解MPEG-2、H.263、MPEG-4、H.264等视频标准的 编码、解码技术;“音频篇”(第8章至第14章),重点讲解G.711、G.721、 G.723、GSM、G.728和G.729等语音编码的原理和实现方法;“案例篇”(第 ...
”(第3章至第7章)重点讲解MPEG-2、H.263、MPEG-4、H.264等视频标准的 编码、解码技术;“音频篇”(第8章至第14章),重点讲解G.711、G.721、 G.723、GSM、G.728和G.729等语音编码的原理和实现方法;“案例篇”(第 ...
”(第3章至第7章)重点讲解MPEG-2、H.263、MPEG-4、H.264等视频标准的 编码、解码技术;“音频篇”(第8章至第14章),重点讲解G.711、G.721、 G.723、GSM、G.728和G.729等语音编码的原理和实现方法;“案例篇”(第 ...