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 |
网友评论