一、新增的多媒体标签
音频:<audio>
视频:<video>
使用它们可以很方便的在页面中嵌入音频和视频,而不再去使用 flash 和其他浏览器插件。HTML5 在不使用插件的情况下,也可以原生的支持视频格式文件的播放,当然,支持的格式是有限的。
二、视频<video>
当前 元素支持三种视频格式: 尽量使用 mp4格式
语法:
<video src="文件地址" controls="controls"></video>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
视频——常见属性
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>video视频标签</title>
<style>
video{
width: 100%;
}
</style>
</head>
<body>
<video src="./media/mi.mp4" autoplay="autoplay" muted="muted" controls="controls" poster="./media/mi9.jpg"></video>
</body>
</html>
效果:
三、音频标签 <audio>
当前 <audio>
元素支持三种音频格式:
语法:
<audio src="文件地址" controls="controls"></audio>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
control 属性供添加播放、暂停和音量控件。
在<audio>
与 </audio>
之间你需要插入浏览器不支持的<audio>
元素的提示文本 。
<audio>
元素允许使用多个 <source>
元素. <source>
元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件
常见属性:
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音频标签audio</title>
</head>
<body>
<audio src="./media/music.mp3" controls="control"></audio>
</body>
</html>
效果:
四、总结
- 音频标签和视频标签使用方式基本一致
- 浏览器支持情况不同,谷歌浏览器把音频和视频自动播放禁止了
- 我们可以给视频标签添加 muted 属性来静音播放视频,音频不可以(可以通过JavaScript解决)
- 视频标签是重点,我们经常设置自动播放,不使用 controls 控件,循环和设置大小属性