主流的视频文件格式
1、MPEG-4：通常以.mp4为拓展名
2、Flash视频：通常以.flv为拓展名
3、Ogg：通常以.ogv为拓展名
4、WebM：通常以.webm为拓展名
5、音频视频交错：通常以.avi为拓展名
音频格式
1、Ogg .ogg
2、MP3 .mp3
3、ACC .acc
编码器
音频和视频编码/解码是一种算法，用来对于特定的视频或音频进行解码和编码，以便音频和视频能够播放，原始的媒体文件体积非常庞大，如果不对其进行解码，那么数据量很大，在互联网上传播非常耗时。
视频编解码器
1、H.264
2、VP8(google开源)
3、Ogg Theora
音频编解码器
1、AAC
2、MPEG-3
3、Ogg Vorbis
1、视频音频的基本使用
// 视频
<video src='视频地址' controls></video>
// 音频
<audio src='音频地址' controls></video>
视频video
- video的标签属性
| 标签名 | 标签属性 |
|---|---|
| src | 视频url地址 |
| width | 设置播放器宽度 |
| height | 设置播放器的高度 |
| controls | 向用户显示播放控件 |
| autoplay | 视频就绪自动播放 |
| loop | 是否循环播放 |
| muted | 视频静音 |
| poster | 加载等待的画面图片 |
| preload | 是否需要加载 |
| autobuffer | 设置为浏览器缓冲方式，不设置autoplay才有效 |
- Video的API方法
| 方法名 | 内容 |
|---|---|
| play() | 开始播放视频 |
| pause() | 停止播放视频 |
| load() | 重新加载 |
| element.webkitRequestFullScreen() | 全屏 |
| document.webkitCancelFullScreen() | 退出全屏 |
- Video的API属性
| 属性 | 属性值 |
|---|---|
| currentTime | 开始到播放现在所用的时间 |
| duration | 媒体的总时间 |
| volume | 0~1的音量相对值 |
| muted | 是否静音(布尔值) |
| paused | 媒体是否暂停(只读) |
| ended | 媒体是否播放完毕 |
| error | 媒体发生错误的时候，返回错误代码 |
| currentSrc | 以字符串的形式返回媒体地址 |
| poster | 视频播放前的预览图片 |
| videoWidth | 视频的实际宽度 |
| videoHeight | 视频的实际高度 |
video基本事件
| 事件名 | 事件触发时间节点 |
|---|---|
| onplay | 视频播放时触发的事件 |
| onpause | 视频暂停时触发的事件 |
| ontimeupdate | 视频在播放时持续触发事件 |
| onended | 视频播放结束时触发的事件 |
| canplay | 视频加载完成，开始播放的时候 |
- 示例：
video.onplay = function(){
console.log('播放了')
}
video.onpause = function(){
console.log('暂停了')
}
video.ontimeupdate= function(){
console.log('一直播放')
}
video.onended = function(){
console.log('播放结束')
}
video示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#container {
width: 600px;
height: 400px;
border: 1px solid #ccc;
margin: 100px auto 0;
}
video {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div id=container>
<!--设置浏览器的缓存不能配合autoplay同时使用-->
<video src="d3dSampleFile.mp4" poster="load.png" autobuffer controls muted>浏览器版本较低，请升级!</video>
</div>
</body>
<script>
let video = document.querySelector('#container video');
video.volume = 0.001;
</script>
</html>
image.png
手动添加播放/暂停的按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#container {
width: 600px;
height: 400px;
border: 1px solid #ccc;
margin: 100px auto 0;
}
video {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div id=container>
<!--设置浏览器的缓存不能配合autoplay同时使用-->
<video src="d3dSampleFile.mp4" poster="load.png" autobuffer controls muted>浏览器版本较低，请升级!</video>
<input type="button" name="play" id="play" value="播放" />
</div>
</body>
<script>
let video = document.querySelector('#container video');
video.volume = 0.001;
//获取播放按钮
let playbtn = document.querySelector('#play');
playbtn.onclick = function(){
if(video.paused){
video.play();
this.value = '暂停'
}else{
video.pause();
this.value = '播放'
}
}
</script>
</html>
2、audio音频标签
audio音频标签属性
| 标签名 | 标签属性 |
|---|---|
| src | 要播放的音频url |
| autoplay | 自动播放 |
| controls | 向用户显示播放控件 |
| loop | 循环 |
| preload | 是否等加载完再播放 |
| muted | 静音 |
audio音频API属性
| 属性 | 属性值 |
|---|---|
| duration | 音乐的总时间（只读） |
| currentTime | 音乐当前的时间 |
| volume | 0~1的音量绝对值 |
| play | 音乐播放 |
| pause | 音乐暂停 |
| error | 媒体发生错误的时候，返回错误的代码 |
| currentSrc | 以字符串的形式返回媒体地址 |
3、兼容性处理
由于浏览器视频格式的编码器不一样，导致有兼容性的问题，w3c提供了source标签解决这个问题
video视频兼容性处理：
<video>
<source src="./demo.mp4" type="audio/mp4">
<source src="./demo.ogg" type="audio/ogg">
你的浏览器不支持video标签，<a href="./demo.mp4">点击下载视频</a>
</video>
audio音频兼容性处理：
<audio>
<source src="./demo.mp3" type="audio/mp3">
<source src="./demo.ogg" type="audio/ogg">
你的浏览器不支持audio标签，<a href="./demo.mp3">点击下载音频</a>
</audio>
image.png
打开一个视频网页页面，就可以看到，使用了source进行兼容性处理。
