前端入门-多媒体元素

170 阅读1分钟

多媒体元素

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>

效果

多媒体.png