Hi i,m JinXiang
⭐ 前言 ⭐
本篇文章主要介绍在HTML中插入音频和视频以及部分理论知识
🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁
🍉博主收将持续更新学习记录获，友友们有任何问题可以在评论区留言
目录
一、音频标签：audio
1、简介
2、使用
二、视频标签：video
1、简介
2、使用
三、使用音频（audio）和视频（video）需要注意事项：
一、音频标签：audio
1、简介
在HTML中，`<audio>`标签用于嵌入音频文件，使其可以在网页中播放。`<audio>`标签具有以下特点：
- `<audio>`标签可以嵌入多种音频格式，如MP3、OGG、WAV等。
- 通过`src`属性指定音频文件的URL，通过`controls`属性指定是否显示播放器控件。
- 可以使用`<source>`标签指定多个音频文件，浏览器会选择支持的格式进行播放。
- 可以使用`<track>`标签添加音频描述、字幕等元数据。
- 支持JavaScript操作，如控制播放、暂停、音量等。
- 可以通过CSS样式控制音频的外观。
- 支持事件，如播放、暂停、结束等。
总的来说，`<audio>`标签是在网页中嵌入音频文件的一种简单而方便的方式，可以帮助网页设计师更加灵活的设计网页。
2、使用
1. 创建`<audio>`标签，并设置`src`属性，指定音频文件的URL。
<audio src="music.mp3"></audio>2. 添加`controls`属性，显示播放器控件。
<audio src="music.mp3" controls></audio>3. 添加`<source>`标签指定多个音频文件，浏览器会选择支持的格式进行播放。
<audio controls><source src="music.mp3" type="audio/mpeg"><source src="music.ogg" type="audio/ogg"><source src="music.wav" type="audio/wav">
</audio>4. 使用JavaScript来控制音频的播放、暂停和音量等操作。
<audio id="music" src="music.mp3"><p>Your browser does not support the audio element.</p>
</audio>
<button onclick="document.getElementById('music').play()">Play</button>
<button onclick="document.getElementById('music').pause()">Pause</button>
<button onclick="document.getElementById('music').volume += 0.1">Increase Volume</button>
<button onclick="document.getElementById('music').volume -= 0.1">Decrease Volume</button>除了上述基本用法外，`<audio>`标签还支持多种其他属性和事件，如`autoplay`属性、`loop`属性、`ended`事件等等，根据需要进行设置即可。
二、视频标签：video
1、简介
HTML中`<video>`标签用于添加视频到网页中。通过`<video>`标签，我们可以在网页上播放本地或者在线的视频。
- `<video>`标签可以添加多个属性和事件，其中一些常用的属性和事件如下：
- `src`: 视频文件的 URL 地址。
- `autoplay`: 自动播放音频。
- `controls`: 显示播放器控件。
- `loop`: 循环播放视频。
- `width` 和 `height`: 视频的宽度和高度。
- `poster`: 设定视频的封面。
在使用`<video>`标签时，可以嵌套`<source>`标签，这样可以添加多个视频文件，浏览器会自动选择支持的视频格式进行播放。
2、使用
1. 在`<video>`标签中设置视频文件的`src`属性，指定视频文件的URL地址。如果有多个格式的视频文件，在`<video>`标签中添加多个`<source>`标签，浏览器会自动选择支持的格式进行播放。
<video width="640" height="360" controls><source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm"><source src="video.ogg" type="video/ogg">
</video>2. 可以使用`controls`属性来显示播放器控件，例如播放、暂停、音量、全屏等。
<video width="640" height="360" controls><source src="video.mp4" type="video/mp4">
</video>3. 如果不想使用浏览器默认的控件，可以使用JavaScript控制播放器，在播放器上添加自定义控件。可以使用事件`play`, `pause`, `seeked`, `volumechange`等来处理播放器的行为。
<video id="myVideo" width="640" height="360"><source src="video.mp4" type="video/mp4">
</video>
<button onclick="playPause()">播放/暂停</button>
<script>var video = document.getElementById("myVideo");function playPause() {if (video.paused) {video.play();} else {video.pause();}}
</script>4. 还可以设置视频的尺寸、自动播放、循环等属性。
<video width="640" height="360" autoplay loop><source src="video.mp4" type="video/mp4">
</video>上面这段代码将视频设置为自动播放，并且设置为循环播放。
三、使用音频（audio）和视频（video）需要注意事项：
- 1、浏览器支持的音频和视频格式不同，需要在`<source>`标签中提供不同格式的文件来兼容不同的浏览器。
- 2、在设置`src`属性时，应该使用相对路径或绝对路径，避免使用相对于当前页面的路径。
- 3、使用`controls`属性会显示默认的播放器控件，但是在移动设备上默认控件可能无法显示或不够友好。此时可以使用JavaScript自定义控件。
- 4、在不同的浏览器和操作系统下，对于媒体的支持情况也可能不同，因此需要在不同的浏览器和设备上进行测试。
- 5、如果使用自定义控件，需要注意控件的可用性和兼容性，避免在某些浏览器或设备上无法使用。
- 6、浏览器默认情况下不会自动播放媒体文件，需要用户手动点击播放按钮。如果希望实现自动播放的效果，需要在设置`<audio>`或`<video>`标签时添加`autoplay`属性。
- 7、使用媒体文件会占用网站的带宽，需要注意使用合适的压缩方法来减小文件大小，避免对网站性能造成负面影响。
总之，在使用
<audio>和<video>标签时，需要进行充分的测试和优化，以提供良好的用户体验和兼容性。
总结不易，希望uu们不要吝啬亲爱的👍哟(＾Ｕ＾)ノ~ＹＯ！！如有问题，欢迎评论区批评指正😁
)
