HTML音频和视频

Posted 2021-12-03 橘猫吃不胖～

html音频和视频

• 1.1 音频视频嵌入技术概述
• 1.2 嵌入音频
• 1.3 嵌入视频
• • 1.3.2 CSS控制视频的宽高
• 1.4 视频音频文件的兼容性问题
• 1.5 在网页中调用多媒体

1.1 音频视频嵌入技术概述

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

视频格式：视频格式包含视频编码、音频编码和容器格式。
音频格式：音频格式是指要在计算机内播放或是处理音频文件。

很多浏览器已经实现了对HTML5中video和audio元素的支持。

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

音频文件和视频文件的格式为：
音频格式：ogg、mp3，wav
视频格式：ogg、mpeg4(mp4)、webm

1.2 嵌入音频

在HTML5中，audio标签用于定义播放音频文件的标准。

基本语法格式：

<audio src="音频文件路径" controls autoplay loop preload="preload"></audio>

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

例如，.html文件中代码如下：

<audio src="" controls autoplay loop></audio>

1.3 嵌入视频

在HTML5中，video标签用于定义播放视频文件的标准。

基本语法格式

<video src="视频文件路径" autoplay loop preload="preload" poster="url(图片的地址)"></video>

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

例如，.html文件中代码如下：

<video src="../video/pian.mp4" controls autoplay loop></video>

当设置了autoplay时，可能会发现视频并不能进行自动播放，这是因为浏览器把自动播放关闭了，这是我们可以在< video >标签中加入muted，格式为：，这样视频就可以自动播放了。

1.3.2 CSS控制视频的宽高

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

注意：
通过width和height属性来缩放视频，这样的视频即使在页面上看起来很小，但它的原始大小依然没变，因此在实际工作中要运用视频处理软件（如“格式工厂”）对视频进行压缩。

例如，.html文件中写入以下代码：

<video src="../video/pian.mp4" controls height="600" width="300"></audio>

1.4 视频音频文件的兼容性问题

在HTML5中，运用source元素可以为video元素或audio元素提供多个备用文件。

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

1.5 在网页中调用多媒体

在网页中调用多媒体文件的方法主要有两种：
1、调用本地多媒体文件
2、调用指定url地址的互联网多媒体文件

调用本地音视频文件虽然方便，但需要使用者提前准备好文件，这样准备文件十分麻烦（需要下载文件，上传文件等操作），这时就可以为src属性设置一个完整的URL，直接调用网络中的音、视频文件。

格式：

<video src="网页中多媒体的网址" controls></video>