【系列】html5多媒体组件的使用

发表于2014-09-26 20:17  |  次阅读  |  0条评论  |   作者:siru90

一、html5多媒体组件的使用
html5多媒体组件指的是video(视频)组件和audio(音频)组件。HTML5多媒体组件可以在不借助诸如Flash Player等第三方插件的情况下,直接在你的网页上嵌入多媒体组件。浏览器提供原生支持视频的新能力使得网页开发人员更易于在不依赖于外置插件有效性的情况下,在他们的网站上添加视频组件。由于苹果公司现阶段在iPhone和iPad上使用的Flash技术的局限性,HTML5多媒体组件的能力就显得尤为重要了。

二、html5支持的视频格式
视频格式
当前,video 元素支持三种视频格式:
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

三、视频编码和解码
1、视频编码
所谓视频编码方式就是指通过特定的压缩技术,将某个视频格式的文件转换成另一种视频格式文件的方式。
2、视频解码
用特定方法把已经编码的视频还原成它原有的格式,进行播放
3、编码说明
1)Theora 视频编码,Theora是开放而且免费的视频压缩编码技术,由Xiph基金会发布。做为该基金会Ogg项目的一部分,从VP3 HD高清到MPEG-4/DiVX格式都能够被Theora很好的支持。 使用Theora无、需任何专利许可费。Firefox和Opera将通过新的HTML5元素提供了对Ogg/Theora视频的原生支持。
2) H.264 视频编码,H.264是在MPEG-4技术的基础之上建立起来的,H.264与以前的国际标准如H.263和MPEG-4相比,为达到高效的压缩,充分利用了各种冗余,统计冗余和视觉生理冗余。蓝光技术、(Blu-ray)就采用这种格式
3) VP8 视频编码,视频压缩解决方案厂商On2 Technologies公司现已推出最新的视频压缩格式On2 VP8。On2 VP8是第八代的On2视频,能以更少的数据提供更高质量的视频,而且只需较小的处理能力、即可播放视频

四、video标签属性
1、autoplay :autoplay 
如果出现该属性,则视频在就绪后马上播放。
2、controls :controls
如果出现该属性,则向用户显示控件,比如播放按钮。
3、height :pixels
设置视频播放器的高度。
4、loop :loop
如果出现该属性,则当媒介文件完成播放后再次开始播放。
5、preload :preload 
如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
6、poster:图片地址
置显示默认图片,而不是视频的第一帧
7、src:url 
要播放的视频的 URL
8、width :pixels
设置视频播放器的宽度

五、source标签属性
音频文件提供至少两种不同的解码器才能覆盖所有支持HTML5的浏览器。
如同对视频元素的处理一样,你需要使用source元素来实现该功能。
一个audio元素能包含多种source元素,因此你能为你的音频提供多种格式支持
属性:
1、media :media query
定义媒介资源的类型,供浏览器决定是否下载。
2、src :url 
媒介的 URL。
3、type :numeric value 
定义播放器在音频流中的什么位置开始播放。默认,音频从开头播放。

六、videoAPI方法
addTextTrack() :向音频/视频添加新的文本轨道(没有浏览器支持)
canPlayType() :检测浏览器是否能播放指定的音频/视频类型
load() :重新加载音频/视频元素
play() :开始播放音频/视频
requestFullscreen() :全屏。webkit内核:webkitRequestFullScreen() 。moz内核:mozRequestFullScreen()
document.exitFullscreen :退出全屏。webkit内核:webkitCancelFullScreen()。moz内核:mozCancelFullScreen()
pause() :暂停当前播放的音频/视频
 
七、videoAPI属性
audioTracks :返回表示可用音轨的 AudioTrackList 对象
autoplay : 设置或返回是否在加载完成后随即播放音频/视频
buffered :返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller :返回表示音频/视频当前媒体控制器的 MediaController 对象
controls :设置或返回音频/视频是否显示控件(比如播放/暂停等)
crossOrigin :设置或返回音频/视频的 CORS 设置
currentSrc :返回当前音频/视频的 URL
currentTime :设置或返回音频/视频中的当前播放位置(以秒计)
defaultMuted : 设置或返回音频/视频默认是否静音
defaultPlaybackRate :设置或返回音频/视频的默认播放速度
duration : 返回当前音频/视频的长度(以秒计)
ended :返回音频/视频的播放是否已结束
error :返回表示音频/视频错误状态的 MediaError 对象
loop :设置或返回音频/视频是否应在结束时重新播放
mediaGroup :设置或返回音频/视频所属的组合(用于连接多个音频/视频元素)
muted : 设置或返回音频/视频是否静音
networkState :返回音频/视频的当前网络状态
paused :设置或返回音频/视频是否暂停
playbackRate :设置或返回音频/视频播放的速度
played :返回表示音频/视频已播放部分的 TimeRanges 对象
preload : 设置或返回音频/视频是否应该在页面加载后进行加载
readyState : 返回音频/视频当前的就绪状态
seekable :返回表示音频/视频可寻址部分的 TimeRanges 对象
volume :声音的大小
seeking :返回用户是否正在音频/视频中进行查找

八、videoAPI事件
abort :当音频/视频的加载已放弃时
canplay :当浏览器可以播放音频/视频时
canplaythrough :当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange :当音频/视频的时长已更改时
emptied :当目前的播放列表为空时
ended : 当目前的播放列表已结束时
error :当在音频/视频加载期间发生错误时
loadeddata : 当浏览器已加载音频/视频的当前帧时
loadedmetadata :当浏览器已加载音频/视频的元数据时
loadstart :当浏览器开始查找音频/视频时
pause :当音频/视频已暂停时
play :当音频/视频已开始或不再暂停时
playing :当音频/视频在已因缓冲而暂停或停止后已就绪时
progress : 当浏览器正在下载音频/视频时
ratechange :当音频/视频的播放速度已更改时
seeked :当用户已移动/跳跃到音频/视频中的新位置时
seeking :当用户开始移动/跳跃到音频/视频中的新位置时
stalled :当浏览器尝试获取媒体数据,但数据不可用时
suspend :当浏览器刻意不获取媒体数据时
timeupdate :当目前的播放位置已更改时
volumechange : 当音量已更改时
waiting :当视频由于需要缓冲下一帧而停止

九、html5支持的音频格式
视频格式 :当前, Audio元素支持三种音频格式:

本站关键字:sunny90 web开发 数据库 移动开发 服务器 Nginx Mysql PHP
Copyright © sunny90版权所有 power by sunny90.com  
湘ICP备14012284号-1,粤公网安备 44030602000307号