HTML5 音频和视频（20160808-0008）

来源：互联网发布：唐望知乎编辑：程序博客网时间：2024/06/16 04:37

一、音频和视频概述

首先，要理解两个概念：容器（container）和编解码器（codec）。

1、视频容器

音频文件或视频文件，都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其它一些元数据。视频播放时，视频轨道和音频轨道是绑定在一起的。元数据包含了视频封面、标题、子标题、字幕等相关信息。主流视频容器支持的格式为： .avi .flv .mp4 .mkv .ogg .webm。

2、编解码器

音频和视频编码/解码是一组算法，用来对一段特定音频或视频进行解码和编码，以便音频和视频能够播放。原始的媒体文件体积非常巨大，如果不对其进行编码，那么数据量是非常惊人的，在互联网上传播则要耗费无法忍受的时间；如果不对其进行解码，就无法将编码后的数据重组为原始的媒体数据。主流的音频编解码器：ACC、MPEG-3、Ogg Voribs，视频编解码器：H.264、VP8、Ogg Theora。

3、浏览器支持情况

起初，HTML5 规范本来打算指定编解码器，但实施起来极为困难。部分厂商已有自己的标准，不愿实现标准；一些编解码器受专利保护，需要支付昂贵费用。最终放弃了统一规范的要求，导致各个浏览器实现自己的标准。

除了上面三款浏览器，还有 Safari5+ 支持 MPEG-4，Oprall 支持 WebM 和 OGG，通过这组数据，只要备好 MP4 和 OGG 格式即可，但对于新的高清标准 WebM，当然是非常必要的，因为 WebM 不但清晰度高，而且免费，不受限制许可的使用源码和专利权。

二、video 视频元素

以往的视频播放，需要借助 Flash 插件才可以实现。但 Flash 插件的不稳定性经常让浏览器导致崩溃，因此很多浏览器或系统厂商开始抛弃它。而取代他的正式 HTML5 的video 元素。

video 属性名称说明src视频资源的URLwidth视频宽度height视频高度autoplay设置后，立刻开始播放视频preload设置后，预先载入视频controls设置后，显示播放控件loop设置后，反复播放视频muted设置后，视频处于静音状态poster指定视频数据载入时显示的图片

1、嵌入一个 WebM 视频

解释：<video> 插入一个视频，主流的视频为 .webm .mp4 .ogg等。src 表示资源URL；width 表示宽度；height 表示高度。

2、附加一些属性

3、预加载设置

解释：preload 属性有三个值：none表示播放器什么都不加载；metadata 表示播放之前只能加载元数据（宽高、第一帧画面等信息）；auto 表示请求浏览器尽快下载整个视频。

4、使用预览图

解释：poster 属性表示在视频的第一帧，做一张预览图。

5、兼容多个浏览器

<video src="xxx.webm" width="200" height="300" autoplay controls poster="xx.png">      <source src="xx.webM">      <source src="xx.mp4">      <source src="xx.ogg">     <object>实现flash插件播放，如果屏蔽IE9以下则不需要</object>  </video>

三、audio 音频元素

和 video 元素一样，audio 元素用于嵌入音频内容，而音频元素的属性和视频元素的类似。视频支持度和视频类似，使用 <source> 元素引入多种格式兼容即可。主流的视频格式有： .mp3 .m4a .ogg .wav。

属性名称说明src音频资源的URLautoplay设置后，立刻开始播放preload设置后，预先载入音频controls设置后，显示播放器控件

1、嵌入一个音频

2、兼容多个浏览器

<audio><source src="xx.mp3">      <source src="xx.m4a">      <source src="xx.wav"> </audio>

解释：略

示例代码地址

0 0