当清晨第一缕阳光温柔地爬上窗台，泡一杯热气腾腾的咖啡，窝在舒适的角落。此时打开这篇文章，就像和老友闲聊般，咱们一起聊聊 HTML 中<video>和<audio>标签的那些事儿。面试里那些让人头疼的媒体标签问题，在这温暖的氛围里，都会变得清晰又简单。

面试题：HTML 中的<video>和<audio>标签有哪些常用属性？如何实现视频和音频的自动播放与循环播放？

一看到这道题，是不是感觉既熟悉又有点迷糊？别着急，我们把这些属性想象成操控媒体播放的 “小遥控器”，看看它们都有哪些神奇功能。

<video>标签：网页中的 “迷你放映厅”

<video>标签就像是在网页里搭建了一个 “迷你放映厅”，能让视频直接在页面上播放。

<!-- 设置视频源文件，controls属性显示播放控制条 -->
<video src="movie.mp4" controls width="640" height="360">
您的浏览器不支持video标签，请升级浏览器。
</video>
<!-- 注释：src指定视频文件路径，controls添加播放控制按钮，
width和height设置视频显示尺寸，标签内文字为不支持时的提示 -->

常用属性解析：

• controls：就像给放映厅装上播放按钮，包括播放、暂停、音量调节等，让用户能轻松操控视频播放。
• width和height：用来调整放映厅的 “大小”，也就是视频显示的宽度和高度，让视频在页面上看起来更协调。
• autoplay：如果加上这个属性，就像电影开场自动播放，页面加载完成后视频会自动开始播放。不过要注意，很多浏览器为了节省流量和优化体验，默认禁止自动播放有声音的视频，需要用户手动触发。

<video src="movie.mp4" controls autoplay muted>
<!-- muted属性让视频静音自动播放 -->
</video>

• loop：这个属性就像无限循环的 “魔法”，视频播放结束后会自动从头开始，适合展示循环动画等内容。

<video src="loop_video.mp4" controls loop>
</video>

<audio>标签：网页中的 “随身听”

<audio>标签就好比网页里的 “随身听”，能让用户在页面上收听各种音频。

<!-- 引入音频文件，controls属性显示音频播放控制条 -->
<audio src="music.mp3" controls>
您的浏览器不支持audio标签。
</audio>
<!-- 注释：src指定音频文件地址，controls添加播放、暂停、音量等控制按钮，
标签内文字是不支持时的提示 -->

和<video>类似，<audio>也有autoplay和loop属性：

• autoplay：让音频在页面加载后自动播放，但同样受浏览器策略限制，通常需要静音才能自动播放。

<audio src="bg_music.mp3" autoplay muted>
</audio>

• loop：让音频无限循环播放，比如网页的背景音乐，就很适合设置这个属性。

<audio src="bg_music.mp3" loop>
</audio>

面试回答范本

“面试官您好！<video>和<audio>标签是网页里播放视频和音频的好帮手。<video>的controls属性是播放按钮，width和height调整视频大小。想让视频自动播放可以加autoplay，不过很多浏览器不让有声音的视频自动播，得静音才行；loop能让视频循环播放。<audio>和它差不多，autoplay能自动播放音频，loop可以让音频一直循环。实际开发中，我会根据具体需求来设置这些属性，比如网页背景音乐就用<audio>加上autoplay和loop，让音乐一直播放；视频播放就合理调整尺寸和控制条，给用户更好的体验。”

网页中大量使用自动播放的视频和音频，是提升体验还是打扰用户？

有人觉得自动播放能快速抓住用户注意力，提升页面吸引力；也有人认为这会突然打断用户操作，甚至造成流量浪费，体验很差。各位前端开发者，你在项目中是如何权衡的？快来评论区分享你的看法，一起讨论出更好的方案！