HTML5 – 音频和视频

HTML5为Web开发者带来了许多新的API。其中包括音频和视频元素。HTML5允许在网页中嵌入音频和视频，并使得控制这些元素变得更容易。本文将介绍HTML5的音频和视频元素，并提供使用示例。

音频元素

HTML5的音频元素允许在网页中嵌入音频。它的使用非常简单，只需使用<audio>标签并指定音频文件的URL即可。

<audio src="song.mp3" controls></audio>

这将在页面中嵌入一个名为song.mp3的音频。controls属性允许用户在页面中控制音频的播放。

我们可以使用JavaScript代码来控制音频的播放。

const audioElement = document.querySelector('audio');
audioElement.play(); // 播放音频
audioElement.pause(); // 暂停音频

视频元素

HTML5的视频元素允许在网页中嵌入视频。它的使用非常类似于音频元素。只需使用<video>标签并指定视频文件的URL即可。

<video src="movie.mp4" controls></video>

这将在页面中嵌入一个名为movie.mp4的视频。controls属性允许用户在页面中控制视频的播放。

我们可以使用JavaScript代码来控制视频的播放。

const videoElement = document.querySelector('video');
videoElement.play(); // 播放视频
videoElement.pause(); // 暂停视频
videoElement.currentTime = 10; // 将当前播放时间设置为10秒

格式支持

HTML5的音频和视频元素支持多种格式。以下是一些常见的音频和视频格式：

音频格式

MP3
Ogg Vorbis
WAV

视频格式

MP4
WebM
Ogg Theora

不同浏览器和设备支持的格式可能不同。为了确保您的音频和视频在所有设备上都能正常播放，最好提供多个格式的文件。

<audio>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
</audio>

<video>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
</video>

在这个例子中，我们提供了<audio>和<video>元素的多个文件格式。浏览器将选择支持的格式播放。

事件监听

HTML5的音频和视频元素提供了许多事件，我们可以监听这些事件并在元素状态发生改变时做出相应的动作。

以下是一些常见的媒体事件：

loadstart – 当开始加载媒体时触发
canplay – 当可以开始播放媒体时触发
pause – 当媒体暂停时触发
play – 当媒体开始播放时触发
ended – 当媒体播放结束时触发

const audioElement = document.querySelector('audio');

audioElement.addEventListener('loadstart', () => {
  console.log('音频开始加载');
});

audioElement.addEventListener('canplay', () => {
  console.log('音频可以播放');
});

audioElement.addEventListener('pause', () => {
  console.log('音频已暂停');
});

audioElement.addEventListener('play', () => {
  console.log('音频已开始播放');
});

audioElement.addEventListener('ended', () => {
  console.log('音频播放结束');
});