目录
一、视频标签video介绍
- <video>有src，width，controls，autoplay，preload，muted，loop，poster等属性
- src属性值是视频路径，可以是本地也可以是网上
- width控制大小，等比缩放
- controls显示视频控制面板，播放、进度、音量等
- autoplay自动播放
- preload预加载，与autoplay相排斥
- muted静音
- loop循环播放
- poster设置视频封面图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<video src="magic.mov" controls width="500" autoplay loop poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539704068878&di=80aa783e1da4e3b87c529e3c01d1caf6&imgtype=0&src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3Daa4887c27ccb0a468577833d5e53da12%2F0b55b319ebc4b745e512d22ec8fc1e178a821507.jpg" muted></video>
</body>
</html>
网页显示效果：
二、音频标签audio介绍
- <audio>有src,controls，autoplay，preload，muted，loop
- src属性值是音频路径，可以是本地也可以是网上
- controls显示音频控制面板，播放、进度、音量等
- autoplay自动播放
- preload预加载，与autoplay相排斥
- muted静音
- loop循环播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<audio src="华山论剑.mp3" controls loop autoplay ></audio>
</body>
</html>