音频和视频

来源：互联网发布：手机淘宝清缓存的作用编辑：程序博客网时间：2024/06/06 03:18

通过两个原生的媒体元素向HTML页面中嵌入音频和视频

一.音频和视频概述

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

1.视频容器

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

2.编解码器

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

3.浏览器支持情况

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

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

WEBM VP8 Vorbis F T T

OGG Theora Vorbis F T T

MPEG-4 H.264 AAC T F 疑问？

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

目前，Chrome浏览器，为了推广WebM格式的视频，声称未来将放弃H.256编码的视频，所以有可能在以后的版本中无法播放MP4的视频，当然，目前演示的版本还是支持的

二.video视频元素

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

<video>元素的属性

属性名称说明

src 视频资源的URL

width 视频宽度

height 视频高度

autoplay 设置后，表示立即开始播放视频

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

controls 设置后，表示显示播放控件

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

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

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

1.嵌入一个WebM视频

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

2.附加一些属性

解释：<autoplay>表示自动开始播放，controls表示显示播放控件，loop表示循环比方，muted表示静音

3.预加载设置

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

4.使用预览图

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

5.兼容多个浏览器

解释：通过<source>元素引入多种格式的视频，让更多的浏览器保持兼容。

二.audio音频元素

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

属性名称：

src:音频资源的URL

autoplay：设置后，表示立刻开始播放视频

preload：设置后，表示预先载入音频

controls：设置后，标识显示播放控件

1.嵌入一个音频

解释：和嵌入视频一个道理

2.兼容多个浏览器

解释：略

更多涉及到API的JavaSript控制，将在以后的基于JAVASCript基础后讲解

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视频和音频</title>
</head>
<body>






<video width="640" height="680" controls="" >
<source src="video.mkv"></source>
<source src="video.webm"></source>
<source src="video.mp4"></source>
<source src="video.ogg"></source>
<object>这里引入flash播放器实现IE9以下，但没必要了</object>
</video>
<audio src="test.mp3" controls "></audio>
</body>
</html>

阅读全文

0 0