在网页开发中，我们经常需要在页面中添加视频和音频来增加用户体验。HTML5提供了一些强大的标签和属性，使我们能够方便地在网页中嵌入视频和音频。
视频标签
HTML5的<video>标签允许我们在网页中嵌入视频。使用<video>标签非常简单，只需在HTML中添加如下代码：
<video src="视频地址" controls>
您的浏览器不支持 video 标签。
</video>
在上述代码中，我们使用了src属性来指定视频的地址。另外，我们还添加了controls属性，该属性会在视频下方显示播放按钮和进度条等控制按钮。
支持的视频格式
HTML5的<video>标签支持多种视频格式，包括MP4、WebM和Ogg。为了确保所有浏览器都能正常播放视频，我们可以给<video>标签添加多个<source>子标签，每个子标签通过src属性指定不同格式的视频文件。示例代码如下：
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
上述代码中，浏览器会按照<source>标签的顺序依次尝试播放视频文件，直到找到浏览器支持的格式为止。
音频标签
HTML5的<audio>标签允许我们在网页中嵌入音频。使用<audio>标签的方法与<video>标签类似，只需在HTML中添加如下代码：
<audio src="音频地址" controls>
您的浏览器不支持 audio 标签。
</audio>
在上述代码中，我们同样使用了src属性来指定音频的地址，并添加了controls属性来显示音频播放控制按钮。
支持的音频格式
HTML5的<audio>标签支持多种音频格式，包括MP3、wav和ogg。同样，为了确保所有浏览器都能正常播放音频，我们可以给<audio>标签添加多个<source>子标签，每个子标签通过src属性指定不同格式的音频文件。示例代码如下：
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.wav" type="audio/wav">
<source src="audio.ogg" type="audio/ogg">
您的浏览器不支持 audio 标签。
</audio>
自定义播放器样式
HTML5的播放器样式是浏览器默认的样式，并不一定符合我们的设计要求。因此，我们可以使用CSS来自定义播放器的样式。以下是一个简单的示例：
<style>
/* 自定义播放器样式 */
video {
width: 100%;
max-width: 500px;
outline: none;
}
</style>
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
在上述代码中，我们通过添加CSS样式来修改<video>标签的宽度和最大宽度，并去除了播放器的默认外边框。
总结
HTML5的<video>和<audio>标签使网页开发者能够方便地在网页中嵌入视频和音频，并提供了丰富的属性和格式支持。通过自定义样式，我们可以进一步美化播放器的外观，提升用户体验。希望本篇文章能帮助你更好地使用HTML5的视频和音频功能。
本文来自极简博客，作者：技术趋势洞察，转载请注明原文链接：如何使用HTML5视频和音频
