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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.bigaody.com" controls="controls"></video>< video class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="文件地址" controls="controls"> 您的浏览器暂不支持video标签。播放视频</ video >< video controls="controls" width="300"> <source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="move.ogg" type='video/ogg; codecs="theora, vorbis"'> <source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="move.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' ><source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="文件地址" controls="controls"></audio>< audio class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="文件地址" controls="controls"> 您的浏览器暂不支持audio标签。播放视频</ audio>< audio controls="controls" > <source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="happy.MP3" type="video/mpeg" > <source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="happy.ogg" type="video/ogg" > 您的浏览器暂不支持audio标签。播放视频</ audio>
10、audio常见属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮 |
| loop | loop | 如果出现该属性，则每当音频结束重新开始播放 |
| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用"autoplay",则忽略该属性 |
| src | url | 要播放的音频的URL |
作者：梧桐叶_
链接：https://www.jianshu.com/p/7264442b1ef2
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦