文档
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'PingFang SC'}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'PingFang SC'; min-height: 17.0px}p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}li.li1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'PingFang SC'}span.s1 {font: 12.0px Helvetica}span.s2 {font: 12.0px 'PingFang SC'}span.Apple-tab-span {white-space:pre}ul.ul1 {list-style-type: square}ul.ul2 {list-style-type: check}
音频和视频
1、概述
a.容器（container）和编解码器（coder）
》视频容器
音频文件或视频文件，都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其他一些元数据。视频播放时，音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封面、标题、子标题、字幕等相关信息。主流视频容器支持的格式为：avi、flv、MP4、mkv、ogg、webm。
》编解码器
音频和视频编码/解码是一组算法，用来对一段特定音频或视频进行解码和编码，以便音频和视频能够播放。原始的媒体文件体积非常巨大，如果不对其进行编码，那么数据量是非常惊人的，在互联网上传播则要耗费无法忍受的时间。如果不对其进行解码，就无法将编码后的数据重组为原始的媒体数据。主流的音频编解码器：AAC，MPEG-3，0gg Voribs，视频编解码器：H.264,VP8,ogg Theora。
》浏览器的支持情况
2、video视频元素
src：视频资源的url，必需
width:视频宽度
heitgh:视频高度
autoplay:设置后，表示立刻开始播放视频
preload:设置后，表示预先载入视频
controls:设置后，表示显示播放控件
loop：设置后，表示反复播放视频
muted：设置后，表示视频处于静音状态
poster：置顶视频数据载入时显示的图片
<video src="loginmovie.mp4" width="500" height="300" controls></video>
谷歌浏览器显示
Safari显示
如果是从服务器获取的视频的话，会有缓存。第一次缓存之后，以后就会直接播放了。
预加载设置preload
preload属性有三个值：
none表示播放器什么都不加载
metadata表示播放之前只能加载元数据（宽高、第一帧画面等信息）
auto表示请求浏览器尽快下载整个视频
浏览器支持
浏览器不支持的时候可以多准备集中类型的视频，写法如下
<video width="640" height="480" controls>
<source src="test.webm">
<source src=test.mp4>
<source src=test.ogg>
</video>
这样不同的浏览器会选择自己支持的类型进行播放。
3、audio音频元素
》属性：
src：音频资源url
autoplay:设置后，表示立刻开始播放音频
preload：设置后，表示预先载入音频
controls：设置后，表示显示播放控件
》嵌入音频
<audio src="刘珂矣-风筝误.mp3" controls></audio>
如果不加controls，什么都不会显示，类似背景音乐的效果。
<audio src="刘珂矣-风筝误.mp3" autoplay></audio>
万一出现不支持的情况，就需要类似视频一样做兼容处理。
<audio>
<source src="刘珂矣-风筝误.mp3">
<source src="刘珂矣-风筝误.m4a">
<source src="刘珂矣-风筝误.wav">
</audio>
浏览器会自动选择支持的格式。
源码
html01:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>音频和视频</title>
</head>
<body>
<br><br>
音频和视频
<hr><br>
<!-- <video src="loginmovie.mp4" width="500" height="300" controls loop muted></video> -->
<video src="loginmovie.mp4" width="500" height="300" controls poster="../img/img.jpg"></video>
<br><br>
从网址上获取视频
<br><br>
<video src="http://video.myhaowai.cn/2016/11/29/2b2146d2cb3a9c7f56266e8ecd6be676.mp4" width="500" height="300" controls preload="auto"></video>
<br><br>
<video width="640" height="480" controls>
<source src="test.webm">
<source src=test.mp4>
<object>实现flash插件的播放，如果屏蔽IE9以下则不需要</object>
</video>
</body>
</html>
html02:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>音频和视频</title>
</head>
<body>
<br><br>
音频和视频
<hr><br>
<audio src="刘珂矣-风筝误.mp3" controls></audio>
<br>不兼容处理
<audio>
<source src="刘珂矣-风筝误.mp3">
<source src="刘珂矣-风筝误.m4a">
<source src="刘珂矣-风筝误.wav">
</audio>
</body>
</html>
