首页 > 六六互联 > 嵌入视频和音频

嵌入视频和音频

作者:zhushican 丨时间:2022年11月02日丨分类：六六互联

长期出售外贸服务器

嵌入视频和音频

1.在HTML5中嵌入视频

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

在上面的语法格式中，src属性用于设置视频文件的路径，controls 属性用于为视频提供播放控件，这两个属性是video元素的基本属性。

下面通过案例2-47来演示嵌入视频的方法，如图2-50所示。

例2-47 example47

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <title>在HTML5中嵌入视频</title>
</head>
<body>
     <video src="video/pian.mp4" controls="controls">

浏览器不支持video标签</video>
<video src="video/mailang.webm" controls="controls" width="300px" height="300px">浏览器不支持video标签</video>
</body>
</html>

嵌入视频和音频

图2-50 HTML5中嵌入视频

值得一提的是，在video元素中还可以添加其他属性，来进一步优化视频的播放效果，具体如下表2-12所示。

表2-12video元素中还可以添加其他属性

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

2.在HTML5中嵌入音频

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

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

下面通过案例2-48来演示嵌入音频的方法，如例2-51所示。

例2-48 example48.html

<!DOCTYPE html>

<html>

<head>

<title>在HTML5中嵌入音频</title>

</head>

<body>

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

</body>

</html>

嵌入视频和音频

图2-51 HTML5中嵌入音频

值得一提的是，在audio元素中还可以添加其他属性，来进一步优化音频的播放效果，具体如下表2-13所示。

表2-13audio元素中还可以添加其他属性

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