音视频历史
大家都有在网页中浏览视频的经历，但在HTML5之前，对视频乃至音频都还没有一个标准 因此在网页中看到的视频，都是通过第三插件的方式嵌入的，可能是QuickTime，也可能是RealPlayer 或者 Flash。浏览器很好的整合了这些插件，你完全意识不到它们的存在
音视频格式
- 大多数人会认为视频文件就是 .avi .mp4,但事实上 avi和mp4仅仅是容器的格式，它只决定怎么将视频存储起来，而不关系存储的内容。有点类似于.zip
- 不管是音频文件或视频文件，实际上都只是一个容器文件。这点类似于压缩了一组文件的ZIP文件，视频文件（视频容器）包含了音频轨道、视频轨道和其他一些元数据。
- 视频播放的时候，音频轨道和视频轨道是绑定在一起的。
- 元数据包含了视频的封面、标题、子标题、字幕、时间等相关信息
编解码器
-
音频和视频编码/解码是一组算法，用来对一段特定音频或视频进行解码和编码，以便音频和视频能够播放。
-
原始的媒体文件体积非常巨大，如果不对其进行编码，那么数据量是非常惊人的，在互联网上传播则要耗费无法忍受的时间；
-
如果不对其进行解码，就无法将编码后的数据重组为原始的媒体数据
不同浏览器对音视频的兼容性
目前还没有一种编解码和容器的组合能应用于所有的浏览器中！！！ 
音视频格式的转换
使用ffmpeg工具
1.安装，并找到bin目录 2.在计算机图标上右键 3.选择属性 4.更改设置 5.高级 6.环境变量 7.找到系统变量的 path 8.把ffmpeg 的 bin的路径添到后边 9.一直点确定完成
测试是否安装成功
1.window+r 2.输入CMD 3.打开命令行窗口 输入ffmpeg 检测是否安装成功
ffmpeg的使用
用 FFmpeg 制作MP4 视频 ffmpeg -i test.mp4 -c:v libx264 -s 1280x720 -b:v 1500k -profile:v high -level 3.1 -c:a aac -ac 2 -b:a 160k -movflags faststart OUTPUT.mp4
用 FFmpeg 制作 WebM 视频 ffmpeg -i test.mp4 -c:v libvpx -s 1280x720 -b:v 1500k -c:a libvorbis -ac 2 -b:a 160k OUTPUT.webm
FFmpeg 制作 Ogg 视频 ffmpeg -i test.mp4 -c:v libtheora -s 1280x720 -b:v 1500k -c:a libvorbis -ac 2 -b:a 160k OUTPUT.ogv
FFmpeg 制作Mp3音频 ffmpeg -i tt.mp3 -c:a libmp3lame -ac 2 -b:a 160k OUTPUT.mp3
FFmpeg 制作Ogg音频 ffmpeg -i tt.mp3 -c:a libvorbis -ac 2 -b:a 160k OUTPUT.ogg
FFmpeg 制作ACC音频
ffmpeg -i tt.mp3 -c:a aac -ac 2 -b:a 160k OUTPUT.aac
音视频旧格式
-
<object>标签的作用是在 HTML 页面中嵌入多媒体元素<object data="1.swf" width="400"></object> -
<embed>标签的作用是在 HTML 页面中嵌入多媒体元素<embed src="1.swf" width="400">
为什么淘汰：
- 需要flash，效率低
- 如果浏览器不支持 Flash，那么视频将无法播放
- iPad 和 iPhone 不能显示 Flash 视频
- 将视频转换为其他格式，仍然不能在所有浏览器中播放
- 目前安卓4.4也抛弃了flash......
html5的新音视频标签
-
视频基本标签用法 ：
-
<video width=" " height="" src=""> </video> -
src 属性：指定播放文件的URL。
-
width、height属性：
- 设置媒体元素的大小，单位为像素；
- 省略该属性，则使用播放源文件的大小；
- 仅设置宽度值，将根据播放源文件的长宽比例自动生成一个与之对应的高度值。
-
-
音频基本格式 ：
-
<audio src="" controls> </audio> -
src 属性：指定播放文件的URL。
-
其他和视频一样。
-
-
指定一种视频格式，不能播就提示：
<video src="examp.mp4" >您的浏览器不支持</video> -
给定多个source标签，给定多种视频格式，浏览器根据自身支持程度选择播放哪一种
<source src="1.mp4" type="video/mp4" />
音视频标签的属性
-
preload：
该属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么
- none: 提示作者认为用户不需要查看该视频，服务器也想要最小化访问流量；换句话说就是提示浏览器该视频不需要缓存。
- metadata: 提示尽管我们认为用户不需要查看该视频，不过抓取元数据（比如：长度）还是很合理的。
- auto: 用户需要这个视频优先加载；换句话说就是提示：如果需要的话，可以下载整个视频，即使用户并不一定会用它。
- 空字符串：也就代指 auto 值。