一、video
1.1 video支持视频格式
常见的视频格式
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="examp.mp4" width="500" poster="examp1.jpg" >您的浏览器不支持video</video>
给定多种视频格式，浏览器根据自身支持程度选择播放哪一种
注意：多个source标签，浏览器会从第一个开始识别，如果第一个不被识别，则会继续识别第二个；如果第一个识别成功，则会直接播放第一种格式视频
<video controls = “controls”> <source src=”1.mp4” type=”video/mp4” /> //src属性写到source标签中，要指定视频的type类型，例如MP4的即为type=“video/mp4” <source src = “2.ogg” type=”video/ogg” /> //ogg格式 <source src=”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属性
1.4 Video API
1.4.1 Video 方法
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/htm5ctutorials/472048.html