阿ken的HTML、CSS的学习笔记_多媒体技术（笔记八）_到目前为止，很多浏览器已经实现了对html5中video和audio元素的支持，支持情况错误的是哪个-CSDN博客

本文链接：https://blog.csdn.net/kenken_/article/details/110398436

欢迎光临
你好
我是阿ken

在这里插入图片描述
不管我说了这句话是否等于白说
但是我还是想要说一句
想要成功首先做成为一个有规矩的人
房间都不敞亮做起事来也很难规矩

8.1 HTML5 多媒体的特性

在 HTML5 出现之前并没有将视频和音频嵌入到页面的标准方式，多媒体内容在大多数情况下都是通过第三方插件或集成在 Web 浏览器的应用程序置于页面中。

例如，目前最流行的方法是通过 Adobe 的 FlashPlayer 插件将视频和音频嵌入到网页中。

通过这样的方式实现的音视频功能，不仅需要借助第三方插件而且实现代码复杂冗长，运用 HTML5 中新增的 video 标签和 audio 标签可以避免这样的问题。在 HTML5 语法中，video 标签用于为页面添加视频，audio 标签用于为页面添加音频，这样用户就可以不用下载第三方插件，直接观看网页中的多媒体内容。

8.2 多媒体的支持条件

虽然 HTML5 提供的音视频嵌入方式简单易用，但在实际操作中却要考虑视频音频编解码器、浏览器等众多因素。

8.2.1 视频和音频编解码器

由于视频和音频的原始数据一般都比较大，如果不对其进行编码就放到互联网上，传播时会消耗大量时间，无法实现流畅的传输或播放。这时通过视频和音频编解码器对视频和音频文件进行压缩，就可以实现视频和音频的正常传输和播放。

1.视频编解码器

视频编解码器定义了多媒体数据流编码和解码的算法。其中编码器主要是对数据流进行编码操作，用于存储和传输。解码器主要是对视频文件进行解码，例如使用视频播放器观看视频，就需要先进行解码，然后再播放视频。目前，使用最多的 HTML5 视频解码文件是H.264、Theora 和 VP8，对它们的具体介绍如下：

H.264
_
H.264 是国际标准化组织( ISO )和国际电信联盟( ITU )共同提出的继 MPEG4 之后的新一代数字视频压缩格式，是 ITU-T 以 H.26x 系列为名称命名的视频编解码技术标准之一。
Theora
_
Theora 是免费开放的视频压缩编码技术，可以支持从 VP3 HD 高清到 MPEG-4/DiVX 视频格式。
VP8
_
VP8 是第八代的 On2 视频，能以更少的数据提供更高质量的视频，而且只需较小的处理能力即可播放视频。

2.音频编解码器

音频编解码器定义了音频数据流编码和解码的算法。与视频编解码器的工作原理一样，音频编码器主要用于对数据流进行编码操作，解码器主要用于对音频文件进行解码。目前，使用最多的 HTML5 音频解码文件是 AAC、MP3 和 Ogg，对它们的具体介绍如下。

AAC
_
AAC 是高级音频编码 ( Advanced Audio Coding ) 的简称，该音频编码是基于 MPEG-2 的音频编码技术。目的是取代 MP3 格式。2000年 MPEG-4 标准出现后，AAC 重新集成了其特性，加入了 SBR 技术和 PS 技术。
MP3
_
MP3是 “ MPEG-1 音频层 3” 的简称。它被设计用来大幅度地降低音须数据量。利用该技术，可以将音乐以 1 : 10 甚至 1 : 12 的压缩率压缩成容量较小的文件。而音质并不会明显地下降。
Ogg
_
Ogg 全称为 Ogg Vorbis, 是一种新的音频压缩格式，类似于 MP3 等现有的音乐格式。OGG Vorbis 有一个很出众的特点，就是支持多声道。

8.2.2 多媒体的格式

运用 HTML5 的 video 和 audio 标签可以在页面中嵌入视频或音频文件，如果想要这些文件在页面中加载播放，还需要设置正确的多媒体格式，下面具体介绍 HTML5 中视频和音频的一些常见格式。

1.视频格式

视频格式包含视频编码、音频编码和容器格式。在 HTML5 中嵌入的视频格式主要包括Ogg、MPEG4、WebM 等，具体介绍如下：

Ogg: 指带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件。
MPEG4: 指带有H.264视频编码和 AAC 音频编码的 MPEG4 文件。
WebM: 指带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件。

2.音频格式

音频格式是指要在计算机内播放或是处理音频文件。在 HTML5 中嵌入的音频格式主要包括 Vorbis、MP3、Wav 等，具体介绍如下：

Vorbis: 是类似 AAC 的另一种免费、开源的音频编码，是用于替代 MP3 的下一代音频压缩技术。
MP3: 是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3 ( MovingPicture Experts Group Audio Layer III)，简称为 MP3。它被设计用来大幅度地降低音频数据量。
Wav: 是录音时用的标准的 Windows 文件格式，文件的扩展名为 “WAV" ，数据本身的格式为 PCM 或压缩型，属于无损音乐格式的一种。

8.2.3 支持视频和音频的浏览器

到目前为止，很多浏览器已经实现了对 HTML5 中 video 和 audio 元素的支持。

浏览器对 video 和 audio 的支持情况

浏览器	支持版本
IE	9.0 及以上版本
Firefox	3.5 及以上版本
Opear	10.5 及以上版本
Chrome	3.0 及以上版本
Safari	3.2 及以上版本

上述表中列举了各主流浏览器对 video 和 audio 元素的支持情况。但在不同的浏览器上显示视频的效果也略有不同。在不同的浏览器中，相同的视频其播放控件的显示样式却不同。这是因为每一个浏览器对内置视频控件样式的定义不同，这也就导致了在不同浏览器中会显示不同的控件样式

8.3 嵌入视频和音频

接下来将进一步讲解视频和音频的嵌入方法以及多媒体文件的调用，使读者能够熟练运用 video 元素和 audio 元素创建视频音频文件。

8.3.1 在 HTML5 中嵌入视频

在 HTML5 中，video 标签用于定义播放视频文件的标准，它支持三种视频格式，分别为Ogg、WebM 和 MPEG4，其基本语法格式如下：

<video src="视频文件路径" controls="controls"></video>

在上面的语法格式中，src 属性用于设置视频文件的路径，controls 属性用于为视频提供播放控件，这两个属性是 video 元素的基本属性。并且 < video> 和 < /video> 之间还可以插入文字，用于在不支持 video 元素的浏览器中显示。

controls 属性规定浏览器应该为视频提供播放控件。
_
浏览器控件应该包括：
播放、暂停、定位、音量、全屏切换、字幕（如果可用）、音轨（如果可用）。

案例：演示嵌入视顿的方法，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在 HTML5 中嵌入视频</title>
</head>
<body>

<video src="video/pian.mp4" controls="controls">浏览器不支持 video 标签</video>

</body>
</html>

在这里插入图片描述

值得一提的是，在 video 元素中还可以添加其他属性，来进一步优化视频的播放效果：

video 元素常见属性

属性	值	描述
autoplay	autoplay	当页面载入完成后自动播放视频。
loop	loop	视频结束时重新开始播放。
preload	auto/meta/none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 " autoplay " ，则忽略该属性。
poster	url	当视频缓冲不足时，该属性值链接一个图像，并将该图像按照一定的比例显示出来。

在上述案例的基础上，对 video 标签应用新属性，来优化视频播放效果，代码如下：

<video src="video/pian.mp4" controls="ontrols" autoplay="autoplay" loop="loop">浏览器不支持 video 标签</video>

在这里插入图片描述

在上面的代码中，为 video 元素增加了 “ autoplay = " autoplay " " 和 “ loop = " loop " "两个样式，实现了页面加载后自动播放视频和循环播放视频的效果。

8.3.2 在 HTML5 中嵌入音频

在 HTML5 中，audio 标签用于定义播放音频文件的标准，它支持三种音频格式，分别为 Ogg、MP3 和 wav，其基本语法格式如下：

<audio src="普通视频路径" controls="controls"></audio>

在上面的基本格式中，src 属性用于设置文件的路径，controls 属性用于为音频提供播放控件，这和 video 元素的属性非常相似。同样，< audio> 和 </ audio> 之间也可以插入文字，用于不支持 audio 元素的浏览器显示。

案例：演示嵌入音频的方法，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在HTML5中嵌入音频</title>
</head>
<body>

<audio src="music/1.mp3" controls="controls">浏览器不支持audio标签</audio>

</body>
</html>

在这里插入图片描述

值得一提的是，在audio元素中还可以添加其他属性，来进一步优化音频的播放效果：

audio 元素常见属性

属性	值	描述
autoplay	autoplay	当页面载入完成后自动播放音频
loop	loop	音频结束时重新开始播放
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 " autoplay " ，则忽略该属性

上表中列举的 audio 元素的属性和 video 元素是相同的，这些相同的属性在嵌入音视频时是通用的。

8.3.3 音、视频中的 source 元素

虽然 HTML5 支持 Ogg、MPEG4 和 WebM 的视频格式以及 Vorbis、MP3和 WAV 的音频格式，但各浏览器对这些格式却不完全支持，

为了使音、视颖能够在各个浏览器中正常播放，往往需要提供多种格式的音、视频文件，在 HTML5 中，运用 source 元素可以为 video 元素或 audio 元素提供多个备用文件。运用 source 元素添加音频的基本格式如下:

<audio controls="controls">
<source src="音频文件地址" type="媒体文件类型/格式">
<source src="音频文件地址" type="媒体文件类型/格式">
......
</audlo>

在上面的语法格式中，可以指定多个 source 元素为浏览器提供备用的音频文件。source 元素一般设置两个属性。

src：用于指定媒体文件的 URL 地址。
type：指定媒体文件的类型。

案例：为页面添加一个在火狐4.0和谷歌6.0都可以正常播放的添加一个音频文件，代码如下

<audio controls="controls">
<source src="music/1.mp3" type="audio/mp3">
<source src="music/1.wav" type="audio/wav">
</audio>

在这里插入图片描述

在上面的案例中，由于 Firefox4.0 不支持 MP3 格式的音频文件，因此在网页中嵌入音频文件时，还需要通过 source 元素指定一个 wav 格式的音频文件，使其能够在 Firefox 4.0 中正常播放。

source 元素添加视频的方法和音频类似，只需要把 audio 标签换成 video 标签即可，具体格式如下：

<video controls="controls">
<source src="视频文件地址" type="媒体文件类型/格式">
<source src="视频文件地址" type="媒体文件类型/格式">
</video>

例如，为页面添加一个在 Firefox4.0 和 IE9 中都可以正常播放的视频文件，代码如下。

<video controls="controls">
<source src="video/1.ogg" type="video/ogg">
<source src="video/1.mp4" type="video/mp4">
</video>

在这里插入图片描述

8.3.4 调用网页多媒体文件

在网页中调用多媒体文件的方法主要有两种。一种是上节介绍的调用本地多媒体文件，另一种是调用指定 url 地址的互联网多媒体文件。在网页设计中，运用 " src " 属性即可调用多媒体文件，该属性不仅可以指定相对路径的多媒体文件，还可以指定一个完整的 URL 地址。

下面以获取网络歌曲的 URL 地址为例，分步骤介绍调用互联网多媒体文件的方法。

(1) 获取音、视频文件的 URL

_
打开网页，在搜索工具栏输入搜索关键词 “ MP3 ”，页面中会出现下载歌曲的网站链接，下载时会弹出下载任务，上面显示的网址就是就是音、视频文件的 URL 地址。

(2) 将其 URL 地址插入到 audio 标签中的 src 属性中即可。

调用网络视频文件的方法和训用音频文件方法类似，也需要获取相关视频文件的URL地址，然后通过相关代的插入视频文件即可。

注意:

只有当互联网音、视频文件的 URL 地址确实存在时，音视频才能够正常播放。

8.4 CSS 控制视频的宽高

在 HTML5 中，经常会通过为 video 元素添加宽高的方式给视频预留一定的空间，这样浏览器在加载页面时就会预先确定视频的尺寸，为其保留合适的空间，使页面的布局不产生变化。

接下来将对视频的宽高属性进行讲解。

案例：运用 width 和 height 属性可以设置视频文件的宽度和高度，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 控制视频的宽高</title>
<style type="text/css">

* {
	margin: 0;
	padding: 0;
}

div {
	width: 600px;
	height: 300px;
	border: 1px solid #000;
}

video {
	width: 200px;
	height: 300px;
	background: #f90;
	float: left;
}

p {
	width: 200px;
	height: 300px;
	background: #999;
	float: left;
}

</style>
</head>
<body>

<h2>视频布局样式</h2>
<div>
	<p>占位色块</p>
	<video src="#" controls="controls">浏览器不支持video标签</video>
	<p>占位色块</p>
</div>

</body>
</html>

在这里插入图片描述

设置了盒子宽度和高度，在其内部嵌套一个 video 标签和两个 p 标签，设置宽度均为 200px，高度均为 300px，并运用浮动属性让它们排列在一排显示。

由于定义了视频的宽高，页面布局没有变化。

案例：更改案例中的代码，删除视频的宽度和高度属性，

video {
background: #F90;
float: left;
}

在这里插入图片描述

未定义视频宽度和高度时，视频按原始大小显示，此时浏览器因为没有办法预定义视频尺寸，只能按照正常尺寸加载视频，导致页面布局混乱。

注意:
_
通过 width 和 height 属性来缩放视频，这样的视频即使在页面上看起来很小，但它的原始大小依然没变，因此要运用相关软件对视频进行压缩。

8.5 视频和音频的方法和事件

video 元素和 audio 元素相关，它们的接口方法和接口事件也基本相同，

接下来本节将对video和audio元素的方法和事件进行详细讲解。

1. video 和 audio 的方法

HTML5 为 video 和 audio 提供了接口方法，

video 和 audio 的方法

方法	描述
load()	加载媒体文件，为播放做准备。通常用于播放前的预加载，也会用于重新加载媒体文件
play()	播放媒体文件。如果视频没有加载，则加载并播放；如果视频是暂停的，则变为播放
pause()	暂停播放媒体文件
canPlayType()	测试浏览器是否支持指定的媒体类型

2. video 和 audio 的事件

HTML5 还为 video 和 audio 元素提供了一系列的接口事件，

video 和 audio 的事件

事件	描述
play	当执行方法 play() 时触发
playing	正在播放时触发
pause	当执行了方法 pause() 时触发
timeupdate	当播放位置被改变时触发
ended	当播放结束后停止播放时触发
waiting	在等待加载下一帧时触发
ratechange	在当前播放速率改变时触发
volumechange	在音量改变时触发
canplay	以当前播放速率，需要缓冲时触发
canplaythrough	以当前播放速率，不需要缓冲时触发
durationchange	当播放时长改变时触发
loadstart	在浏览器开始在网上寻找数据时触发
progress	当浏览器正在获取媒体文件时触发
suspend	当浏览器暂停获取媒体文件，且文件获取并没有正常结束时触发
abort	当中止获取媒体数据时触发。但这种中止不是由错误引起的
error	当获取媒体过程中出错时触发
emptied	当所在网络变为初始化状态时触发
stalled	浏览器尝试获取媒体数据失败时触发
loadedmetadata	在加载完媒体元数据时触发
loadeddata	在加载完当前位置的媒体播放数据时触发
seeking	浏览器正在请求数据时触发
seeked	浏览器停止请求数据时触发

上述两表中列举了 video 和 audio 常用的方法和事件，在使用 video 和 audio 元素读取或播放媒体文件时，会触发一系列的事件，但这些事件需要用 JavaScript 脚本来捕获，可以进行相应的处理。因此在学习 JavaScript 之前，关于视频和音频的事件和方法了解即可无需掌握。