加入收藏 | 设为首页 | 会员中心 | 我要投稿 湖南网 (https://www.hunanwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程 > 正文

HTML5中视频音频的行使详解

发布时间:2020-03-16 15:32:04 所属栏目:编程 来源:站长网
导读:副问题#e# 1.1 video支持视频名目 常见的视频名目 视频的构成部门:画面、音频、编码名目 视频编码:H.264、Theora、VP8(google开源) HTML5支持的视频名目: 1、Ogg 带有Theora视频编码+Vorbis音频编码的Ogg文件 支持的赏识器:F、C、O 2、MEPG4 带有H.264视
副问题[/!--empirenews.page--]

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 要领

(编辑:湖南网)

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

热点阅读