多媒体元素
video 视频元素
audio 音频元素
video元素
src属性,资源路径,以及视频格式
在默认情况下是不会播放,需要右击视频,点击显示控件才显示播放按钮
controls属性是控制控件显示的属性,它的取值只有controls
布尔属性:只有两种状态:1.不写;2.取值为属性名;在HTML5中可以不用书写属性值
autoplay属性是布尔属性,表示自动播放。
muted属性是布尔属性,表示静音播放。
loop属性是布尔属性,表示循环播放。
audio元素
与video完全一致只是元素名不同。
兼容性
1.旧版本浏览器不支持这两个元素。(旧版本需要用到falsh)解决方案:(1)使用p元素显示超链接,下载最新版本浏览器;(2)嵌入falsh
2.不同的浏览器支持的音视频格式可能不一致。(常用视频格式mp4,webm格式)在书写的时候可以把资源地址用子元素source表示即可兼容 例如 <source src="./x.mp4"> <source src="./x.webm">
练习
<!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>多媒体元素</title>
</head>
<body>
<video style="height:500px ;" controls autoplay loop muted>
<source src="./x.mp4">
<source src="./x.webm">
</video>
<audio src="./洛先生-孤城.mp3" controls ></audio>
</body>
</html>