如何使用 JavaScript 播放音频和视频 (HTMLMediaElement)？

推荐答案

音频播放

// www.javascriptcn.com code example
const audioElement = new Audio('path/to/your/audio.mp3');

// 播放音频
audioElement.play()
  .then(() => {
    console.log('Audio playback started successfully.');
  })
  .catch(error => {
    console.error('Failed to start audio playback:', error);
  });

// 暂停音频
audioElement.pause();

// 停止音频 (并重置到开始)
audioElement.pause();
audioElement.currentTime = 0;

// 监听音频播放结束事件
audioElement.addEventListener('ended', () => {
  console.log('Audio playback finished.');
});

// 获取/设置音频播放进度
console.log(audioElement.currentTime);
audioElement.currentTime = 10; // 跳转到10秒处

// 获取/设置音频音量(0.0 - 1.0)
console.log(audioElement.volume);
audioElement.volume = 0.5;

视频播放

<video id="myVideo" width="320" height="240" controls>
  <source src="path/to/your/video.mp4" type="video/mp4">
  <source src="path/to/your/video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

// www.javascriptcn.com code example
const videoElement = document.getElementById('myVideo');

// 播放视频
videoElement.play()
  .then(() => {
    console.log('Video playback started successfully.');
  })
  .catch(error => {
     console.error('Failed to start video playback:', error);
  });


// 暂停视频
videoElement.pause();

// 停止视频 (并重置到开始)
videoElement.pause();
videoElement.currentTime = 0;

// 监听视频播放结束事件
videoElement.addEventListener('ended', () => {
  console.log('Video playback finished.');
});

// 获取/设置视频播放进度
console.log(videoElement.currentTime);
videoElement.currentTime = 30; // 跳转到30秒处

// 获取/设置视频音量(0.0 - 1.0)
console.log(videoElement.volume);
videoElement.volume = 0.8;

// 监听视频加载完成事件
videoElement.addEventListener('loadeddata', () => {
   console.log('Video data has loaded.');
});

// 设置循环播放
videoElement.loop = true;

// 设置静音
videoElement.muted = true;

本题详细解读

HTMLMediaElement

HTMLMediaElement 是 HTML5 提供的一个接口，它提供了音频和视频播放的功能，Audio 和 Video 元素都继承自这个接口。

音频播放

使用 Audio 对象

1. 创建 Audio 对象: const audioElement = new Audio('path/to/your/audio.mp3'); 创建一个 Audio 对象，传入音频文件的路径。
2. play() 方法: audioElement.play() 方法用于开始播放音频。它返回一个 Promise，可以在 then() 中处理播放成功的情况，在 catch() 中处理播放失败的情况（例如，自动播放策略限制）。
3. pause() 方法: audioElement.pause() 方法用于暂停音频的播放。
4. currentTime 属性: audioElement.currentTime 属性用于获取或设置音频的当前播放位置（单位：秒）。
5. ended 事件: audioElement.addEventListener('ended', () => { ... }); 用于监听音频播放结束的事件。
6. volume 属性: audioElement.volume 属性用于获取或设置音频的音量大小，取值范围为 0.0 (静音) 到 1.0 (最大音量)。

注意事项

• 路径问题：请确保音频文件的路径正确。
• 自动播放：现代浏览器通常禁止自动播放音频，除非是用户交互触发的。play() 方法返回的Promise 会在自动播放失败时被rejected。可以使用 muted 属性或让用户交互触发播放。
• 音频格式：浏览器支持的音频格式可能不同，建议使用多种格式，如 MP3、OGG、WAV等。

视频播放

使用 Video 元素

1. video 标签: 在 HTML 中使用 <video> 标签来创建一个视频元素，并通过 src 属性指定视频文件路径。
2. ** controls 属性:** 可以使用 controls 属性来添加浏览器默认的视频播放控件。
3. source 标签: 使用 <source> 标签可以指定多种视频格式，浏览器会尝试选择它支持的格式。
4. 获取 Video 元素: const videoElement = document.getElementById('myVideo'); 通过 id 获取 HTML 中的 video 元素。
5. play() 方法: videoElement.play() 方法用于开始播放视频。它返回一个 Promise，可以在 then() 中处理播放成功的情况，在 catch() 中处理播放失败的情况（例如，自动播放策略限制）。
6. pause() 方法: videoElement.pause() 方法用于暂停视频的播放。
7. currentTime 属性: videoElement.currentTime 属性用于获取或设置视频的当前播放位置（单位：秒）。
8. ended 事件: videoElement.addEventListener('ended', () => { ... }); 用于监听视频播放结束的事件。
9. volume 属性: videoElement.volume 属性用于获取或设置视频的音量大小，取值范围为 0.0 (静音) 到 1.0 (最大音量)。
10. ** loadeddata 事件:** videoElement.addEventListener('loadeddata', () => { ... }); 用于监听视频数据加载完成的事件。
11. ** loop 属性:** 设置 videoElement.loop = true 可以让视频循环播放。
12. ** muted 属性:** 设置 videoElement.muted = true 可以让视频静音播放。

注意事项

• 路径问题：请确保视频文件的路径正确。
• 自动播放：与音频一样，现代浏览器通常禁止自动播放视频，除非是用户交互触发的。
• 视频格式：浏览器支持的视频格式可能不同，建议使用多种格式，如 MP4、WebM等。
• controls 属性：controls 属性为浏览器提供了默认的播放器控制。如果要自定义播放器UI，可以移除这个属性，并使用JavaScript操作 HTMLMediaElement 的API。
• 错误处理：建议在 play() 方法的 catch 部分处理播放失败的情况，例如处理浏览器禁止自动播放的情况。