html(8)-视频和音频标签_html视频放哪个文件-优快云博客

本文链接：https://blog.youkuaiyun.com/enjoy_code_/article/details/112724570

本文介绍了HTML5中的视频和音频标签，通过添加controls属性实现播放控制，autoplay属性则让视频自动播放。音频标签的使用方式与视频标签相似，属性含义相同。初学者可重点掌握controls和autoplay属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例如，我们在bilibili上面点击可以播放的视频或者音频，都是可以通过这个标签初步把结构展现出来。
先在resource目录下创建音频和视频的存放路径：
在这里插入图片描述
video目录下存放你的视频文件
audio目录下存放你的音频文件

首先来学习视频标签，<video>

<video src="../resources/video/1609313883.mp4"></video>

这样是最简单的写法，但是这时候浏览器只会出现视频的封面，用户会觉得这就是张图片，而不是视频页。

这时候改成这种样式即可：

<video src="../resources/video/1609313883.mp4" controls></video>

controls代表控制视频播放的工具，有了它就能出现我们熟悉的视频页面样式了。
在这里插入图片描述
如果写成这样，视频页加载完成后会自动播放。

<video src="../resources/video/1609313883.mp4" controls autoplay></video>

音频标签和视频标签的属性内容一致，<audio>
同样的属性，意义是一样的。

<audio src="../resources/audio/T-KT%20-%20泽野弘之.mp3" controls autoplay></audio>

在这里插入图片描述

总结:入门先记住controls和autoplay吧，其他先等等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频视频标签学习</title>
</head>
<body>
<video src="../resources/video/1609313883.mp4" controls autoplay></video>
<br/>
<audio src="../resources/audio/T-KT%20-%20泽野弘之.mp3" controls autoplay></audio>
</body>
</html>