HTML|媒体元素（视频和音频）
这是我的资源路径：
可以看到我已经将科比退役视频的音频和视频分别放到了audio和video文件夹下，后面我们就用这个历经来讲解媒体元素。
1.视频元素（video）
使用video标签，将src属性改为视频的路径：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--
视频:
vedio标签，将src属性赋值为视频的路径即可
-->
<video src="../resource/video/科比退役.mp4"></video>
</body>
</html>
我们打开网页即可看到这个视频的页面，但是是无法播放的，这时候我们再为video标签添加一个controls就行了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--
视频:
vedio标签，将src属性赋值为视频的路径即可
controls属性是提供给人设置播放的
-->
<video src="../resource/video/科比退役.mp4" controls></video>
</body>
</html>
我们可以看到视频下方有了一个播放的进度条了，并且我们点击时可以进行播放了，也可以进行拖拉进度条、设置音量、全屏播放、选择下载等操作。
如果我们需要对该视频设置为打开网页时自动播放那么可以再添加一个autoplay属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--
视频:
vedio标签，将src属性赋值为视频的路径即可
controls属性是提供给人设置播放的
autoplay属性是设置视频为自动播放
-->
<video src="../resource/video/科比退役.mp4" controls autoplay></video>
</body>
</html>
也可以使用width和height为视频设置宽度和高度：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--
视频:
vedio标签，将src属性赋值为视频的路径即可
controls属性是提供给人设置播放的
autoplay属性是设置视频为自动播放
width和height可以设置视频的宽度和高度
-->
<video src="../resource/video/科比退役.mp4" controls autoplay width="200" height="200"></video>
</body>
</html>
2.音频元素（audio）
使用audio标签，将src填写为音频的路径即可，同样我们也加上controls属性可以设置播放，加上autoplay属性可以自动播放：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--
视频:
vedio标签，将src属性赋值为视频的路径即可
controls属性是提供给人设置播放的
autoplay属性是设置视频为自动播放
width和height可以设置视频的宽度和高度
-->
<video src="../resource/video/科比退役.mp4" controls autoplay width="200" height="200"></video>
<!--
音频：
audio标签，将src设置为音频路径即可
controls属性是提供给人设置播放的
autoplay属性是设置音频为自动播放
-->
<audio src="../resource/audio/科比退役.mp3" controls autoplay></audio>
</body>
</html>
我们可以看到有了一个音频播放条。
人生没有白走的路，每一步都算数！
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
