多媒体元素
video 视频
audio 音频
video元素
src:资源地址
controls:控制控件的显示,取值只能为controls(布尔属性)
某些属性只有两种状态:1.不写(不使用该属性) 2.取值为属性名,这种属性叫做布尔属性
布尔属性在HTML5中,可以不用书写属性值
autoplay:布尔属性,表示自动播放。(某些浏览器在设置里面不允许自动播放)
muted:布尔属性,静音播放。
loop:布尔属性,循环播放
<!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>Document</title>
</head>
<body>
这是一个搞笑视频
<video controls autoplay muted loop src="./media/视频.mp4" >
<source src="./media/open.mp4">
<source src="media/open.webm">
<p>
对不起,你的浏览器不支持,请点击这里下载最新版本的浏览器
</p>
</video>
</body>
</html>
audio元素
和视频完全一致
<!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>Document</title>
</head>
<body>
<audio controls src="./暧昧..mp3"></audio>
</body>
</html>
兼容性
1.旧版本的浏览器不支持这两个元素
2.不同的浏览器支持的音视频格式可能不一致
通常视频格式:mp4,webm 音频:mp3