12_HTML5 Video(视频) --[HTML5 API 学习之旅]

HTML5 引入了 <video> 标签，使得在网页中嵌入和控制视频变得非常简单。<video> 元素允许你直接在 HTML 中指定视频文件，并提供了多种属性和方法来控制视频的播放、暂停、音量等。

基本用法

HTML5 的 <video> 标签让嵌入和控制视频变得非常简单。以下是关于 HTML5 视频的基本用法的详细介绍，包括如何嵌入视频、设置属性以及提供多个源文件以确保跨浏览器兼容性。

1. 基本语法

最简单的使用方法是直接在 HTML 中插入 <video> 标签，并通过 src 属性指定视频文件的位置。为了方便用户操作，通常会添加 controls 属性来显示默认的播放控件（如播放、暂停、音量控制等）。

html 复制代码

<video src="movie.mp4" controls>
  Your browser does not support the video tag.
</video>

src：指定视频文件的 URL。
controls：显示视频控件。

2. 提供多个源文件

为了确保不同浏览器都能正确播放视频，最好为同一个视频提供多种编码格式的源文件。可以使用 <source> 元素来实现这一点。浏览器会根据支持情况选择最合适的格式进行播放。

html 复制代码

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

type：指定视频的 MIME 类型，帮助浏览器更快地选择正确的源文件。

3. 常用属性

以下是一些常用的 <video> 标签属性：

autoplay：页面加载完成后自动播放视频。
controls：显示视频控件（如播放、暂停按钮等）。
loop：视频播放完毕后重新开始播放。
muted：静音播放视频。
poster：指定视频未播放时显示的图片。
preload ：指定视频预加载行为（auto、metadata 或 none）。
width 和 height：设置视频播放器的宽度和高度。

html 复制代码

<video width="640" height="360" controls autoplay loop muted poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

4. 基本示例

这里是一个包含所有上述元素的完整示例：

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Video Example</title>
</head>
<body>
  <h2>HTML5 Video Basic Usage</h2>
  
  <video width="640" height="360" controls autoplay loop muted poster="poster.png">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>

  <p>Note: The video will play automatically, loop indefinitely, and be muted. A poster image will be shown until the video starts playing.</p>
</body>
</html>

5. 浏览器支持

尽管大多数现代浏览器都支持 HTML5 视频，但不同浏览器对视频编码格式的支持有所不同。常见的编码格式包括：

MP4 (H.264)：广泛支持，适合大多数浏览器。
WebM：由 Google 推广，主要用于 Chrome 和 Firefox。
Ogg/Theora：用于 Firefox 和 Opera。

因此，建议至少提供 MP4 和 WebM 两种格式，以确保最佳兼容性。

方法和事件

HTML5 <video> 元素不仅提供了简单的标记来嵌入视频，还支持丰富的 JavaScript API，允许开发者通过代码控制视频的播放、暂停、音量等。以下是一些常用的方法和事件，它们可以帮助你创建更加互动和功能强大的视频播放体验。

方法

以下是你可以用于控制 <video> 元素的一些常见方法：

play()：开始或继续播放视频。
javascript 复制代码
```
videoElement.play();
```
pause()：暂停视频。
javascript 复制代码
```
videoElement.pause();
```
load()：重新加载视频资源。这将重置视频并准备播放新的源文件（如果已更改）。
javascript 复制代码
```
videoElement.load();
```
canPlayType(type) ：检查浏览器是否支持特定类型的视频格式。返回 'probably'、'maybe' 或空字符串。
javascript 复制代码
```
const canPlayMp4 = videoElement.canPlayType('video/mp4');
console.log(canPlayMp4); // 可能输出 "probably" 或 "maybe"
```
requestFullscreen()：请求全屏模式（需要用户交互触发）。
javascript 复制代码
```
videoElement.requestFullscreen();
```

enterPictureInPicture()：进入画中画模式（仅适用于支持此功能的浏览器）。

javascript 复制代码

videoElement.enterPictureInPicture().catch(error => {
  console.error("Error attempting to enter PiP mode:", error);
});

属性

这些属性可以用来获取或设置视频的状态和配置：

currentTime：获取或设置当前播放位置（以秒为单位）。

javascript 复制代码

console.log(videoElement.currentTime); // 获取当前时间
videoElement.currentTime = 10; // 设置当前时间为第10秒

duration ：获取视频的总时长（以秒为单位）。在视频元数据加载之前，这个值可能为 NaN。
javascript 复制代码
```
console.log(videoElement.duration);
```

volume：获取或设置视频的音量（范围从 0 到 1）。

javascript 复制代码

console.log(videoElement.volume); // 获取当前音量
videoElement.volume = 0.5; // 设置音量为50%

muted：获取或设置视频是否静音（布尔值）。

javascript 复制代码

console.log(videoElement.muted); // 检查是否静音
videoElement.muted = true; // 设置为静音

paused：检查视频是否处于暂停状态（布尔值）。
javascript 复制代码
```
console.log(videoElement.paused); // 检查是否暂停
```
ended：检查视频是否已经播放完毕（布尔值）。
javascript 复制代码
```
console.log(videoElement.ended); // 检查是否结束
```

事件

以下是一些常用的与视频播放相关的事件：

loadstart：当浏览器开始查找视频时触发。

javascript 复制代码

videoElement.addEventListener('loadstart', () => {
  console.log('Starting to load the video.');
});

loadedmetadata：当视频的元数据（如时长、尺寸）加载完成后触发。

javascript 复制代码

videoElement.addEventListener('loadedmetadata', () => {
  console.log(`Video duration: ${videoElement.duration} seconds`);
});

loadeddata：当浏览器已加载当前播放位置的数据时触发。

javascript 复制代码

videoElement.addEventListener('loadeddata', () => {
  console.log('Data for current playback position is loaded.');
});

progress：当浏览器正在下载视频时定期触发。

javascript 复制代码

videoElement.addEventListener('progress', () => {
  console.log('Downloading...');
});

canplay：当浏览器可以在不缓冲的情况下播放视频时触发。

javascript 复制代码

videoElement.addEventListener('canplay', () => {
  console.log('Can play without buffering.');
});

canplaythrough：当浏览器可以在不因缓冲而停止的情况下播放整个视频时触发。

javascript 复制代码

videoElement.addEventListener('canplaythrough', () => {
  console.log('Can play through without stopping for buffering.');
});

playing：当视频已经开始播放或不再因为缓冲而暂停时触发。
javascript 复制代码
```
videoElement.addEventListener('playing', () => {
  console.log('Video is playing.');
});
```

pause：当视频暂停时触发。

javascript 复制代码

videoElement.addEventListener('pause', () => {
  console.log('Video paused.');
});

ended：当视频播放结束时触发。

javascript 复制代码

videoElement.addEventListener('ended', () => {
  console.log('Video ended.');
});

timeupdate：当视频的当前播放位置发生变化时触发（通常每秒多次）。

javascript 复制代码

videoElement.addEventListener('timeupdate', () => {
  console.log(`Current time: ${videoElement.currentTime}`);
});

volumechange：当音量发生变化时触发。

javascript 复制代码

videoElement.addEventListener('volumechange', () => {
  console.log(`Volume changed to: ${videoElement.volume}`);
});

waiting：当播放器因为需要缓冲更多数据而暂停时触发。
javascript 复制代码
```
videoElement.addEventListener('waiting', () => {
  console.log('Waiting for more data.');
});
```

seeking：当用户开始快进或快退时触发。

javascript 复制代码

videoElement.addEventListener('seeking', () => {
  console.log('Seeking...');
});

seeked：当用户完成快进或快退后触发。

javascript 复制代码

videoElement.addEventListener('seeked', () => {
  console.log('Seek completed.');
});

ratechange：当播放速率发生变化时触发。

javascript 复制代码

videoElement.addEventListener('ratechange', () => {
  console.log(`Playback rate changed to: ${videoElement.playbackRate}`);
});

error ：当发生错误时触发。可以通过 videoElement.error 查看具体的错误信息。
javascript 复制代码
```
videoElement.addEventListener('error', (event) => {
  console.error('An error occurred:', event.target.error);
});
```

实例：使用 JavaScript 控制视频播放

下面是一个简单的例子，展示了如何使用 JavaScript 来控制视频播放：

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <title>Controlling Video with JavaScript</title>
</head>
<body>
  <h2>Control Video Playback</h2>
  <video id="myVideo" width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <br>
  <button onclick="playPause()">Play/Pause</button>
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <button onclick="muteUnmute()">Mute/Unmute</button>

  <script>
    const video = document.getElementById('myVideo');

    function playPause() {
      if (video.paused || video.ended) {
        video.play();
      } else {
        video.pause();
      }
    }

    function makeBig() {
      video.width = 960;
    }

    function makeSmall() {
      video.width = 320;
    }

    function makeNormal() {
      video.width = 640;
    }

    function muteUnmute() {
      video.muted = !video.muted;
    }
  </script>
</body>
</html>

通过上述方法和事件，你可以对 HTML5 视频进行精细控制，从而创建出更加动态和响应式的用户体验。

实例：带自定义控件的视频播放器

下面是一个带有自定义控件的视频播放器示例：

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <title>Custom Video Player</title>
  <style>
    #video-container {
      position: relative;
      width: 640px;
      height: 360px;
    }
    #video {
      width: 100%;
      height: 100%;
    }
    #controls {
      display: flex;
      justify-content: space-between;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      padding: 5px;
      position: absolute;
      bottom: 0;
      width: 100%;
    }
    #controls button {
      background-color: transparent;
      border: none;
      color: white;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="video-container">
    <video id="video" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
      Your browser does not support the video tag.
    </video>
    <div id="controls">
      <button id="play-pause">Play</button>
      <input type="range" id="volume" min="0" max="1" step="0.1" value="1">
    </div>
  </div>

  <script>
    const video = document.getElementById('video');
    const playPauseButton = document.getElementById('play-pause');
    const volumeControl = document.getElementById('volume');

    playPauseButton.addEventListener('click', function() {
      if (video.paused || video.ended) {
        video.play();
        this.textContent = 'Pause';
      } else {
        video.pause();
        this.textContent = 'Play';
      }
    });

    volumeControl.addEventListener('input', function() {
      video.volume = this.value;
    });
  </script>
</body>
</html>

注意事项

浏览器兼容性：虽然大多数现代浏览器都支持 HTML5 视频，但不同浏览器对视频编码格式的支持有所不同。因此，建议提供多种格式的视频文件以确保最佳兼容性。
性能优化：对于大文件，考虑使用流媒体技术或分段加载来提高用户体验。
可访问性：确保视频有适当的字幕或音频描述，以便所有用户都能访问内容。

通过这些基础知识和实例，你可以创建功能丰富且用户体验良好的视频播放器。