HTML5 多媒体

在 HTML5 出现之前，在网页上播放音频或视频通常需要依赖第三方插件，如 Adobe Flash。HTML5 彻底改变了这一局面，引入了 <audio> 和 <video> 元素，使得多媒体成为 Web 平台的原生部分。

<video> 元素

<video> 元素用于在网页中嵌入视频内容。

<video src="movie.mp4" width="320" height="240" controls>
  您的浏览器不支持 Video 标签。
</video>

• src: 指定视频文件的路径。
• width / height: 设置播放器的尺寸。
• controls: 这个布尔属性会向用户显示标准的视频控件，如播放/暂停按钮、音量控制、进度条等。强烈建议始终包含此属性。
• autoplay: 如果设置，视频将在加载完成后自动播放。注意: 现代浏览器大多会限制或阻止带有声音的视频自动播放，以提升用户体验。通常需要配合 muted 属性使用。
• muted: 静音播放视频。
• loop: 如果设置，视频播放结束后会自动重新开始。
• poster: 指定一张在视频加载时或用户点击播放前显示的图像。

<audio> 元素

<audio> 元素用于嵌入音频内容，其用法与 <video> 非常相似。

<audio src="music.mp3" controls>
  您的浏览器不支持 Audio 标签。
</audio>

它也支持 controls, autoplay, muted, loop 等属性。

使用 <source> 元素提供多种格式

不同的浏览器可能支持不同的视频和音频格式。为了确保最佳的兼容性，你可以使用 <source> 元素提供多个不同格式的媒体文件。浏览器会自动选择第一个它所支持的格式进行播放。

常见的视频格式组合是 MP4, WebM 和 Ogg。

<video controls width="600">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogv" type="video/ogg">
  您的浏览器不支持 Video 标签。
</video>

常见的音频格式组合是 MP3, Ogg 和 WAV。

<audio controls>
  <source src="sound.mp3" type="audio/mpeg">
  <source src="sound.ogg" type="audio/ogg">
  <source src="sound.wav" type="audio/wav">
  您的浏览器不支持 Audio 标签。
</audio>

通过这种方式，你可以极大地提高你的多媒体内容在不同设备和浏览器上的可用性。