1、常见的视频格式
视频的组成部分:画面、音频、编码格式
视频编码:H.264、theora、VP8(google开源)
2、常见的音频格式
编码:AAC、MP3、Vorbis
3、HTML5虽然能在完全脱离插件的情况下播放音视频,但不是支持所有的格式
支持的视频格式:
OGG = 带有Theora视频编码+Vorbis音频编码的ogg文件
浏览器支持:F,C,O
MPEG4 = 带有H.264视频编码+AAC音频编码的MPEG4文件
浏览器支持:S,C
WebM = 带有VP8视频格式编码+Vorbis音频编码的WebM格式
浏览器支持:I、F、C、O
4、视频Video的使用方法
<video src="http://www.bigaody.com" controls="controls"></video>
< video src="文件地址" controls="controls">
您的浏览器暂不支持video标签。播放视频
</ video >
< video controls="controls" width="300">
<source src="move.ogg" type='video/ogg; codecs="theora, vorbis"'>
<source src="move.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
<source src="move.webm" type='video/webm; codecs="vp8, vorbis"' >
您的浏览器暂不支持video标签。播放视频
</ video >
5、video常见属性
| 属性 |
值 |
描述 |
| autoplay |
autoplay |
视频就绪自动播放 |
| controls |
controls |
向用户显示播放控件 |
| width |
pixels(像素) |
设置播放器宽度 |
| height |
pixels(像素) |
设置播放器高度 |
| loop |
loop |
播放完是否继续播放该视频,循环播放 |
| preload |
preload |
是否等加载完再播放 |
| src |
url |
视频url地址 |
| poster |
imgurl |
等待加载的画面图片 |
| autobuffer |
autobuffer |
设置为浏览器缓冲方式,不设置autoplay才有 |
6、video常见方法
| 方法 |
属性 |
事件 |
| play() |
currentSrc |
play |
| pause() |
currentTime |
pause |
| load() |
videoWidth |
progress |
| canPlayType |
videoHeight |
error |
|
全屏 |
退出全屏 |
| Webkit(Safari5.1/Chrome15) |
element.webkitRequestFullScreen() |
document.webkitCancelFullScreen() |
| Firefox(works in nightly) |
element.mozRequestFullScreen() |
document.mozCancelFullScreen() |
| W3C提议 |
element.requestFullscreen() |
document.exitFullscreen() |
7、video的API属性
| 属性 |
说明 |
| audioTracks |
返回可用的音轨列表(MultipleTrackList对象) |
| autoplay |
媒体加载后自动播放 |
| buffered |
返回缓冲部件的时间范围(TimeRanges对象) |
| controller |
返回当前的媒体控制器(MediaController对象) |
| controls |
显示播控控件 |
| crossOrigin |
CORS设置 |
| currentSrc |
返回当前媒体的URL |
| currentTime |
当前播放的时间,单位秒(快进快退10秒) |
| defaultMuted |
缺省是否静音 |
| defaultPlaybackRate |
控件的缺省倍速 |
| 属性 |
说明 |
| duration |
返回媒体的播放总时长,单位秒 |
| ended |
返回当前播放是否结束标志 |
| error |
返回当前播放的错误状态 |
| initialTime |
返回初始播放的位置 |
| loop |
是否循环播放 |
| mediaGroup |
当前音频所属媒体组(用来链接多个音视频标签) |
| muted |
是否静音 |
| networkState |
返回当前网络状态 |
| paused |
是否暂停 |
| playbackRate |
播放的倍速(加速、减速播放) |
| played |
当前播放部件已经播放的时间范围(TimeRanges对象) |
| preload |
页面加载时是否同时加载音视频 |
| readyState |
返回当前的准备状态 |
| seekable |
返回当前可跳转部件的时间范围(TimeRanges对象) |
| 属性 |
说明 |
| seeking |
返回用户是否做了跳转操作 |
| src |
当前音视频源的URL |
| startOffsetTime |
返回当前的时间偏移(Date对象) |
| textTracks |
返回可用的文本轨迹(TextTrackList对象) |
| videoTracks |
返回可用的视频轨迹(VideoTrackList对象) |
| volume |
音量值 |
8、audio支持的格式
HTML5支持的音频格式:
Ogg 免费 支持的浏览器:C、F、O
MP3 收费 支持的浏览器: I、C、S
Wav 收费 支持的浏览器: F、O、S
9、audio的使用
<audio src="文件地址" controls="controls"></audio>
< audio src="文件地址" controls="controls">
您的浏览器暂不支持audio标签。播放视频
</ audio>
< audio controls="controls" >
<source src="happy.MP3" type="video/mpeg" >
<source src="happy.ogg" type="video/ogg" >
您的浏览器暂不支持audio标签。播放视频
</ audio>
10、audio常见属性
| 属性 |
值 |
描述 |
| autoplay |
autoplay |
如果出现该属性,则音频在就绪后马上播放 |
| controls |
controls |
如果出现该属性,则向用户显示控件,比如播放按钮 |
| loop |
loop |
如果出现该属性,则每当音频结束重新开始播放 |
| preload |
preload |
如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用"autoplay",则忽略该属性 |
| src |
url |
要播放的音频的URL |