HTML5文档的多媒体特性以及支持条件 嵌入视频和音频

HTML5文档的多媒体特性以及支持条件 嵌入视频和音频

在HTML5出现之前,并没有将视频、音频嵌入到页面中的标准方式。多媒体的应用大多都是通过第三方插件(Falsh),实现方式比较复杂。在HTML5中新增了video标签(为页面添加视频)audio标签(为页面添加音频),但是在使用的时候会受到浏览器和音频编码解码器的影响。

多媒体特性

由于音频视频的原始数据,一般都比较大,如果不对其进行编码,那么在进行传播时就会消耗大量的时间,影响用户体验!所以在音视频加载之前,必须对原始数据进行压缩编码,于是就产生了视频音频编码和解码器。视频数据流编码和解码的算法

  • H.264是国际标准化组织(ISO)和国际电信联盟(ITU)共同提出的继MPEG4之后的新一代数字视频压缩格式。
  • Theor是免费开放的视频压缩编码技术,可以支持从VP3 HD高清到MPEG 4/DiVX视频格式。
  • VP8 是第八代的On2视频,能以更少的数据提供更高质量的视频,而且只需较小的处理能力即可播放视频。

音频数据流编码编码和解码算法:

  • ACC是高级 音频编码(Advanced Audio Coding)的简称,该音频编码是基于MPEG-2的音频编码技术,目的是取代MP3格式。
  • MP3是“MPEG-1 音频层3”的简称,它被设计用来大幅度地降低音频数据量。
  • Ogg全称Ogg Vorbis,是一种新的音 频压缩格式,类似于MP3等现有的音乐格式。OGG Vorbis支持多声道。

在HTML5中常见的视频格式:OggMPEGWebM;音频格式:VorbisMP3Wav。随着HTML5技术的普及,很多浏览器已经实现了对HTML5中video和audio元素的支持。音视频中source元素的支持情况:

格式IE 9Firefox 4.0Opera10.6Chrome 6.0Safari 3.0
视频格式
OGG
MPEG 4
WebM
音频格式
Ogg Vorbis
MP3
Wav

嵌入视频和音频

● video标签,用于定义播放视频文件的标准

<video src="视频文件路径" controls="controls"> </video>

常用属性值:

属性属性值描述
autoplayautoplay当页面载入完成后自动播放视频
looploop视频结束时重新开始播放
preloadpreload如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用autoplay,则忽略该属性。
posterurl当视频缓冲不足时,该属性值链接一个图像,并将图像按照一定的比列显示出来

● audio标签,用于定义播放音频文件的标准

<audio src="音频文件路径" controls="controls"> </audio>

常用属性值:

属性属性值描述
autoplayautoplay当页面载入完成后自动播放视频
looploop视频结束时重新开始播放
preloadpreload如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用autoplay,则忽略该属性。

我们不可能让用户去选择支持音视频的浏览器,所以需要做好兼容效果,就需要提供多种格式的音视频文件。

● source元素可以为video元素或audio元素提供多个备用文件

<audio controls="controls">
    <source src="music/1.mp3" type="audio/mp3">
    <source src="music/1.wav" type="audio/wav">
    ...
</audio>

src:指定媒体文件的URL地址

type:指定媒体文件的类型

音视频的方法

● load(),加载媒体文件,为播放做准备。通常用于播放前的预加载,也会用语重新加载媒体文件。

● paly(),播放媒体文件。如果视频没有加载,则加载并播放;如果视频是暂停的,则变为播放。

● pause()暂停播放媒体文件。

● canPlayType()测试浏览器是否支持指定的媒体文件。

音视频的事件

方法描述
play当执行方法play()时触发
playing正在播放时触发
pause当执行方法pause()时触发
timeupdate当播放位置被改变时触发
ended当播放结束后停止播放时触发
waiting在等待加载下一帧时触发
ratechange在当前播放速率改变时触发
canplay以当前播放速率,需要缓冲时触发
canplaythrough以当前播放速率,不需要缓冲时触发
durationchange当播放时长改变时触发
loadstart在浏览器开始在网上寻找数据时触发
progress当浏览器正在获取媒体文件时触发
suspend当浏览器暂停获取媒体文件,且文件获取并没有正常结束时触发
abort当终止获取媒体数据时触发,但这种终止不是由错误引起的
error当获取媒体过程中出错时触发
emptied当所在网络变为初始化状态时触发
stalled浏览器尝试获取媒体数据失败时触发
loadedmetadata在加载完媒体元素数据时触发
seeking浏览器正在请求数据时触发
seeked浏览器停止请求数据时触发
分享到 :

发表评论

登录... 后才能评论