9.HTML音频和视频

第九章 音频和视频

一、音频和视频的概念

首先，要先了解两个概念：容器(container)和编解码器（codec）

1、视频容器：视频文件包含音频轨道，视频轨道，其他的元数据。

视频在播放时音频轨道和视频轨道绑在一起

主流视频格式为：.avi/.flv/.mp4/.mkv/.ogg/.webm

2、编解码器：是一组算法，

主流的音频解码器：AAC/MPEG-3/Ogg/Voribs

视频解码器：H.264/VP8/Ogg/Theora

3、浏览器支持情况

容器格式             视频解码器     音频编解码   IE9+    Firefox5+   Chrome13+

WebM（主流）              VP8          Vorbis      ×        √          √

OGG（）               Theora         Vorbis      ×        √          √

MPEG-4（兼容性最好）        H.264          AAC        √        ×         疑问？（现在支持，以后可能不支持）

WebM不但清晰度高，还免费，不受限制许可的使用源码和专利权。

二、video视频元素

1、src/width/height  上面讲过。

2、autoplay  设置后，表示立刻开始播放视频。

3、preload   设置后，表示预先载入视频。

*预加载设置：preload有三个属性，none  表示播放器什么都不加载，第一帧也不加载，只有点击进去后才会慢慢加载。

metadata  表示播放之前只能加载元数据（宽高，第一帧等信息）。

auto  表示请求浏览器尽快下载整个视频。（未点进去之前就已经在加载了）

<video src="http://li.cc/text.webm" width="640" height="480" controls preload></video>   //进去后会先缓存后面的视频内容。

4、controls  设置后，表示显示播放控制。

5、loop      设置后，表示反复播放视频。

6、muted     设置后，表示视频处于静音状态。

7、poster    指定视频数据载入时显示的图片。

例一、<video src="text.webm" width="640" height="480" controls autoplay loop muted></video>

<video src="text.webm" width="640" height="480" controls poster="图片"></video>     //视频未点进去时的画面

*兼容多个浏览器

例二、<video width="640" height="480" controls>

<source src="text.webm">                 }

<source src="text.mp4">                  } 里边可以写多个同一个视频格式，来保证可以在大多数浏览器支持播放

<source src="text.ogg">                  }

</video>

三、audio 音频元素：除了没有宽高，和视频元素基本一样。

ps：更多设计到API的JavaScript控制，将在以后的基于JavaScript基础后讲解。

让视频在页面水平居中

<center><video class="video" src="cehui.mp4" width="640" height="400" controls loop preload poster=".."></video></center>

原文地址：https://www.cnblogs.com/keshuai752100461/p/8485061.html