在HTML中插入音频和视频（详解）

Hi i,m JinXiang

---

⭐ 前言 ⭐

本篇文章主要介绍在HTML中插入音频和视频以及部分理论知识

---

欢迎点赞 收藏 ⭐留言评论 私信必回哟

博主收将持续更新学习记录获，友友们有任何问题可以在评论区留言

---

目录

一、音频标签：audio

1、简介

2、使用

二、视频标签：video

1、简介

2、使用

三、使用音频（audio）和视频（video）需要注意事项：

---

一、音频标签：audio

1、简介

在HTML中，`

•  `
•  通过`src`属性指定音频文件的URL，通过`controls`属性指定是否显示播放器控件。
•  可以使用``标签指定多个音频文件，浏览器会选择支持的格式进行播放。
•  可以使用``标签添加音频描述、字幕等元数据。
•  可以通过CSS样式控制音频的外观。
•  支持事件，如播放、暂停、结束等。

总的来说，`

2、使用

1. 创建`

2. 添加`controls`属性，显示播放器控件。

3. 添加``标签指定多个音频文件，浏览器会选择支持的格式进行播放。

除了上述基本用法外，`

二、视频标签：video

1、简介

HTML中`

• `
•  `src`: 视频文件的 URL 地址。
•  `autoplay`: 自动播放音频。
•  `controls`: 显示播放器控件。
•  `loop`: 循环播放视频。
•  `width` 和 `height`: 视频的宽度和高度。
•  `poster`: 设定视频的封面。

在使用`

2、使用

1. 在`

2. 可以使用`controls`属性来显示播放器控件，例如播放、暂停、音量、全屏等。

3. 还可以设置视频的尺寸、自动播放、循环等属性。

上面这段代码将视频设置为自动播放，并且设置为循环播放。

三、使用音频（audio）和视频（video）需要注意事项：

• 1、浏览器支持的音频和视频格式不同，需要在``标签中提供不同格式的文件来兼容不同的浏览器。
• 2、在设置`src`属性时，应该使用相对路径或绝对路径，避免使用相对于当前页面的路径。
• 3、使用`controls`属性会显示默认的播放器控件，但是在移动设备上默认控件可能无法显示或不够友好。此时可以使用JavaScript自定义控件。
• 4、在不同的浏览器和操作系统下，对于媒体的支持情况也可能不同，因此需要在不同的浏览器和设备上进行测试。
• 5、如果使用自定义控件，需要注意控件的可用性和兼容性，避免在某些浏览器或设备上无法使用。
• 6、浏览器默认情况下不会自动播放媒体文件，需要用户手动点击播放按钮。如果希望实现自动播放的效果，需要在设置`
• 7、使用媒体文件会占用网站的带宽，需要注意使用合适的压缩方法来减小文件大小，避免对网站性能造成负面影响。

总之，在使用和标签时，需要进行充分的测试和优化，以提供良好的用户体验和兼容性。

总结不易，希望uu们不要吝啬亲爱的哟(＾Ｕ＾)ノ~ＹＯ！！如有问题，欢迎评论区批评指正