HTML5 中视频播放标签 video 与音频播放标签 audio 的正确用法

在 HTML5 中，视频播放标签 video 和音频播放标签 audio 为网页多媒体内容的展示提供了强大而便捷的方式。正确使用这两个标签，能够为用户带来优质的多媒体体验。

让我们来了解一下视频播放标签 video 。使用 video 标签时，需要指定视频文件的来源，通过 src 属性来实现。为了确保在不同的浏览器和设备上都能正常播放，建议提供多种视频格式，如 MP4、WebM 和 Ogg。例如：

<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">
  Your browser does not support the video tag.
</video>

在上述代码中，width 和 height 属性用于设置视频的显示尺寸，controls 属性则会显示播放控件，方便用户操作。

音频播放标签 audio 的使用方法与 video 类似。同样需要通过 src 属性指定音频文件的路径，并可以提供多种音频格式，如 MP3、WAV 和 Ogg。示例如下：

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.wav" type="audio/wav">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the audio tag.
</audio>

除了基本的属性设置，还可以通过 preload 属性来控制媒体文件的预加载方式，取值可以是 none（不预加载）、metadata（仅预加载媒体文件的元数据）和 auto（自动预加载整个文件）。

另外，为了提高网页的可访问性，还可以为 video 和 audio 标签添加字幕和描述信息。对于视频，可以使用 track 元素来添加字幕文件；对于音频，可以添加相关的文字描述，以便听力障碍者或在不适合播放声音的环境中获取信息。

在实际应用中，要根据网页的需求和用户体验来合理设置 video 和 audio 标签的属性。同时，要注意媒体文件的大小和加载速度，避免因文件过大导致网页加载缓慢，影响用户的访问体验。

熟练掌握 HTML5 中视频播放标签 video 和音频播放标签 audio 的正确用法，能够为网页增添丰富的多媒体内容，提升用户的满意度和参与度。