文档
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>
谷歌浏览器显示
![CA834F4F-382F-4FFE-BF28-175B43D3A466.png](http://upload-images.jianshu.io/upload_images/1293851-100140f2bb07fdfb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Safari显示
![B4BF0365-FB1E-47DB-9680-9711871D472F.png](http://upload-images.jianshu.io/upload_images/1293851-3ce909198c3aee56.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
如果是从服务器获取的视频的话,会有缓存。第一次缓存之后,以后就会直接播放了。
预加载设置preload
preload属性有三个值:
none表示播放器什么都不加载
metadata表示播放之前只能加载元数据(宽高、第一帧画面等信息)
auto表示请求浏览器尽快下载整个视频
浏览器支持
浏览器不支持的时候可以多准备集中类型的视频,写法如下
![688B8F8E-DD64-4C7A-91AE-1B1686310821.png](http://upload-images.jianshu.io/upload_images/1293851-2e630ba4b4283be9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
<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>
![688B8F8E-DD64-4C7A-91AE-1B1686310821.png](http://upload-images.jianshu.io/upload_images/1293851-ab6be35792559add.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
如果不加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>