HTML 音频/视频 DOM 参考手册-连界优站

内容目录

随着互联网技术的发展，多媒体内容已成为网页不可或缺的一部分。HTML5 引入了 <audio> 和 <video> 元素，使得在网页上嵌入音频和视频变得异常简单。本文将详细介绍如何使用这些元素及其相关DOM方法，让你的网页更加生动有趣。

🌐 初识 `<audio>` 和 `<video>` 元素

1. 基本语法

`<audio>` 元素

<audio controls>
  <source src="example.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

`<video>` 元素

<video controls width="320" height="240">
  <source src="example.mp4" type="video/mp4">
  您的浏览器不支持 video 元素。
</video>

2. 常用属性

属性	描述
`controls`	显示播放控件。
`autoplay`	自动播放媒体文件。
`loop`	循环播放媒体文件。
`muted`	静音播放。
`preload`	指定媒体文件的预加载方式（`auto`、`metadata`、`none`）。
`src`	指定媒体文件的 URL。

3. 多源文件支持

为了确保兼容不同浏览器，可以使用多个 <source> 元素来提供不同格式的媒体文件。

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 元素。
</video>

🛠️ 使用 JavaScript 控制音频和视频

1. 获取媒体元素

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

2. 常用方法和属性

媒体方法

方法	描述
`play()`	开始播放媒体文件。
`pause()`	暂停播放媒体文件。
`load()`	重新加载媒体文件。

媒体属性

属性	描述
`currentTime`	当前播放位置（秒）。
`duration`	媒体文件的总时长（秒）。
`volume`	音量（0.0 到 1.0）。
`paused`	是否暂停播放。
`ended`	是否播放结束。
`readyState`	媒体文件的准备状态。

3. 事件处理

事件	描述
`play`	媒体开始播放时触发。
`pause`	媒体暂停播放时触发。
`ended`	媒体播放结束时触发。
`timeupdate`	播放位置更新时触发。
`volumechange`	音量变化时触发。

示例：

video.addEventListener('play', () => {
  console.log('视频开始播放');
});

video.addEventListener('pause', () => {
  console.log('视频暂停播放');
});

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

🎨 实战案例：自定义播放器

1. HTML 结构

<div id="player">
  <video id="myVideo" controls>
    <source src="example.mp4" type="video/mp4">
    您的浏览器不支持 video 元素。
  </video>
  <button id="playButton">播放</button>
  <button id="pauseButton">暂停</button>
  <input type="range" id="volumeSlider" min="0" max="1" step="0.1" value="0.5">
</div>

2. JavaScript 控制

const video = document.getElementById('myVideo');
const playButton = document.getElementById('playButton');
const pauseButton = document.getElementById('pauseButton');
const volumeSlider = document.getElementById('volumeSlider');

playButton.addEventListener('click', () => {
  video.play();
});

pauseButton.addEventListener('click', () => {
  video.pause();
});

volumeSlider.addEventListener('input', (e) => {
  video.volume = e.target.value;
});