HTML5中视频音频的使用详解

1.1 video支持视频格式

常见的视频格式
 

视频的组成部分：画面、音频、编码格式

视频编码：H.264、Theora、VP8(google开源)

HTML5支持的视频格式：

1、Ogg 

带有Theora视频编码+Vorbis音频编码的Ogg文件 

支持的浏览器:F、C、O 

2、MEPG4 

带有H.264视频编码+AAC音频编码的MPEG4文件 

支持的浏览器: S、C 

3、WebM 

带有VP8视频编码+Vorbis音频编码的WebM格式 

支持的浏览器: I、F、C、O 

劣势：视频少、转码器几乎没有，不好转码 

想要video能自动填充慢父div的大小，只要给video标签加上style="width= 100%; height=100%; object-fit: fill"即可

1.2 标签原型

指定一种视频格式，不能播就提示

<video id="media" src=http://www.jb51.net/html5/"examp.mp4" width="500" poster="examp1.jpg" >您的浏览器不支持video</video>

给定多种视频格式，浏览器根据自身支持程度选择播放哪一种
 

注意：多个source标签，浏览器会从第一个开始识别，如果第一个不被识别，则会继续识别第二个；如果第一个识别成功，则会直接播放第一种格式视频

<video controls = “controls”> <source src=http://www.jb51.net/html5/”1.mp4” type=”video/mp4” /> //src属性写到source标签中，要指定视频的type类型，例如MP4的即为type=“video/mp4” <source src = “2.ogg” type=”video/ogg” /> //ogg格式 <source src=http://www.jb51.net/html5/”3.webm” type=”video/webm” /> //webm格式 </video>

1.3 重要的video标签属性

属性(常用) 值 功能描述
controls   controls   是否显示播放控件  
autoplay   autoplay   设置是否打开浏览器后自动播放  
width   Pilex（像素）   设置播放器的宽度  
height   Pilex（像素）   设置播放器的高度  
loop   loop   设置视频是否循环播放（即播放完后继续重新播放）  
preload   preload   设置是否等加载完再播放  
src   url   设置要播放视频的url地址  
poster   imgurl   设置播放器初始默认显示图片  
autobuffer   autobuffer   设置为浏览器缓冲方式，不设置autoply才有效  

API 属性 

属性 描述
audioTracks   返回表示可用音轨的 AudioTrackList 对象  
buffered   返回表示音频/视频已缓冲部分的 TimeRanges 对象  
controller   返回表示音频/视频当前媒体控制器的 MediaController 对象  
crossOrigin   设置或返回音频/视频的 CORS 设置  
currentSrc   返回当前音频/视频的 URL  
currentTime   设置或返回音频/视频中的当前播放位置（以秒计）  
defaultMuted   设置或返回音频/视频默认是否静音  
defaultPlaybackRate   设置或返回音频/视频的默认播放速度  
duration   返回当前音频/视频的长度（以秒计）  
ended   返回音频/视频的播放是否已结束  
error   返回表示音频/视频错误状态的 MediaError 对象  
mediaGroup   设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）  
muted   设置或返回音频/视频是否静音  
networkState   返回音频/视频的当前网络状态  
paused   设置或返回音频/视频是否暂停  
playbackRate   设置或返回音频/视频播放的速度  
played   返回表示音频/视频已播放部分的 TimeRanges 对象  
readyState   返回音频/视频当前的就绪状态  
seekable   返回表示音频/视频可寻址部分的 TimeRanges 对象  
seeking   返回用户是否正在音频/视频中进行查找  
startDate   返回表示当前时间偏移的 Date 对象  
textTracks   返回表示可用文本轨道的 TextTrackList 对象  
videoTracks   返回表示可用视频轨道的 VideoTrackList 对象  
volume   设置或返回音频/视频的音量  
常用API属性

duration：返回当前音频/视频的长度（以秒计）

paused：设置或返回音频/视频是否暂停

currentTime：设置或返回音频/视频中的当前播放位置（以秒计）

ended：返回音频/视频的播放是否已结束

1.4 Video API

1.4.1 Video 方法

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!