Web的视频：`Web Video API`的使用与性能。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Web Video API 的使用与性能

大家好，今天我们来深入探讨 Web Video API 的使用以及如何优化视频播放性能。在现代 Web 应用中，视频播放已经成为一项基本功能。理解并熟练运用 Web Video API，能够帮助我们构建流畅、高效的视频体验。

1. HTML5 `<video>` 元素：基础与属性

<video> 元素是 HTML5 中用于嵌入视频内容的核心元素。它提供了一系列属性，用于控制视频播放的行为和外观。

基本用法：

<video src="myVideo.mp4" controls width="640" height="360"></video>

在这个例子中：

src 属性指定视频文件的 URL。
controls 属性添加默认的播放控件（播放/暂停按钮、音量控制、进度条等）。
width 和 height 属性定义视频的显示尺寸。

常用属性：

| 属性 | 描述
| src | 视频文件的 URL。

2. 使用 JavaScript 控制 `<video>`

Web Video API 提供了一系列的 JavaScript 方法和属性来控制视频播放。

获取 <video> 元素：

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

基本控制：

play(): 开始播放。
pause(): 暂停播放。
currentTime: 获取或设置当前播放位置（以秒为单位）。
duration: 获取视频的总时长（以秒为单位）。
muted: 获取或设置静音状态。
volume: 获取或设置音量大小（0.0 到 1.0）。

示例：播放/暂停切换

const playPauseButton = document.getElementById('playPauseButton');

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

示例：调整音量

const volumeSlider = document.getElementById('volumeSlider');

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

示例：跳转到指定时间点

const seekButton = document.getElementById('seekButton');
const seekTime = document.getElementById('seekTime');

seekButton.addEventListener('click', () => {
  const time = parseFloat(seekTime.value);
  if (!isNaN(time) && time >= 0 && time <= video.duration) {
    video.currentTime = time;
  } else {
    alert('Invalid time!');
  }
});

事件监听：

<video> 元素会触发各种事件，例如：

play: 开始播放时触发。
pause: 暂停播放时触发。
ended: 播放结束时触发。
timeupdate: 播放位置发生变化时触发。
volumechange: 音量发生变化时触发。
loadedmetadata: 视频元数据加载完成时触发（例如：时长、尺寸）。
loadeddata: 视频的第一帧数据加载完成时触发。
progress: 视频正在下载时触发。
error: 发生错误时触发。
waiting: 当视频需要缓冲时触发
stalled: 当视频数据获取中断时触发

示例：监听播放结束事件

video.addEventListener('ended', () => {
  alert('Video finished!');
});

示例：监听加载进度事件

video.addEventListener('progress', () => {
    if (video.buffered.length > 0) {
        const bufferedEnd = video.buffered.end(video.buffered.length - 1);
        const duration = video.duration;

        if (duration > 0) {
            const bufferPercentage = (bufferedEnd / duration) * 100;
            console.log(`Buffered: ${bufferPercentage.toFixed(2)}%`);
            //在这里可以更新进度条显示
        }
    }
});

3. 自定义控件

虽然 <video> 元素提供了默认的控件，但在许多情况下，我们需要自定义控件以满足特定的设计需求。

隐藏默认控件：

<video src="myVideo.mp4" width="640" height="360"></video>

移除 controls 属性即可隐藏默认控件。

创建自定义控件：

使用 HTML、CSS 和 JavaScript 创建自定义控件，并使用 Web Video API 控制视频播放。

示例：自定义播放/暂停按钮

<div class="video-container">
  <video src="myVideo.mp4" width="640" height="360"></video>
  <div class="controls">
    <button id="customPlayPauseButton">Play</button>
  </div>
</div>

const customPlayPauseButton = document.getElementById('customPlayPauseButton');

customPlayPauseButton.addEventListener('click', () => {
  if (video.paused) {
    video.play();
    customPlayPauseButton.textContent = 'Pause';
  } else {
    video.pause();
    customPlayPauseButton.textContent = 'Play';
  }
});

示例：自定义进度条

<div class="video-container">
  <video src="myVideo.mp4" width="640" height="360"></video>
  <div class="controls">
    <input type="range" id="customProgressBar" min="0" max="100" value="0">
  </div>
</div>

const customProgressBar = document.getElementById('customProgressBar');

video.addEventListener('timeupdate', () => {
  const percentage = (video.currentTime / video.duration) * 100;
  customProgressBar.value = percentage;
});

customProgressBar.addEventListener('input', () => {
  const time = (customProgressBar.value / 100) * video.duration;
  video.currentTime = time;
});

4. 兼容性与格式

不同的浏览器对视频格式的支持程度不同。为了确保视频在所有浏览器上都能正常播放，我们需要提供多种格式的视频源。

<source> 元素：

<source> 元素用于指定不同的视频源。浏览器会选择它支持的第一个源。

<video controls width="640" height="360">
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.webm" type="video/webm">
  <source src="myVideo.ogv" type="video/ogg">
  Your browser does not support the video tag.
</video>

在这个例子中，提供了 MP4、WebM 和 Ogg 三种格式的视频源。

常用格式：

MP4 (H.264/AAC): 支持度最广泛，几乎所有浏览器都支持。
WebM (VP9/Opus): 谷歌开发的开源格式，Chrome、Firefox、Opera 和 Edge 支持。
Ogg (Theora/Vorbis): 另一种开源格式，但支持度不如 MP4 和 WebM。

MIME 类型：

格式	MIME 类型
MP4	`video/mp4`
WebM	`video/webm`
Ogg	`video/ogg`
MOV	`video/quicktime`

视频编码建议：

H.264: 对于 MP4 格式，使用 H.264 视频编码和 AAC 音频编码。
VP9: 对于 WebM 格式，使用 VP9 视频编码和 Opus 音频编码。
Theora: 对于 Ogg 格式，使用 Theora 视频编码和 Vorbis 音频编码。

5. 自适应码率流媒体 (Adaptive Bitrate Streaming, ABS)

自适应码率流媒体是一种根据用户网络状况动态调整视频质量的技术。它可以确保视频在不同的网络环境下都能流畅播放。常见的 ABS 技术包括：

HLS (HTTP Live Streaming): 苹果开发的协议，广泛用于 iOS 设备和桌面浏览器。
DASH (Dynamic Adaptive Streaming over HTTP): 一种开放标准，支持更广泛的平台。
MSS (Microsoft Smooth Streaming): 微软开发的协议，主要用于 Silverlight 平台 (已过时)。

原理：

将视频编码成多个不同码率的版本 (例如：240p, 360p, 480p, 720p, 1080p)。
将每个版本分割成小的媒体片段 (例如：2-10 秒)。
创建一个索引文件 (例如：.m3u8 for HLS, .mpd for DASH)，描述不同版本的信息和媒体片段的位置。
客户端根据网络状况选择合适的版本，并下载相应的媒体片段进行播放。

实现：

可以使用一些成熟的 JavaScript 库来实现 ABS，例如：

hls.js: 用于 HLS 播放。
dash.js: 用于 DASH 播放。
Shaka Player: 支持 DASH, HLS 和 SmoothStreaming。

示例：使用 hls.js

<video id="video" width="640" height="360" controls></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
  const video = document.getElementById('video');
  if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource('your_hls_manifest.m3u8'); // 替换为你的 HLS manifest 文件 URL
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function() {
      video.play();
    });
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = 'your_hls_manifest.m3u8';
    video.addEventListener('loadedmetadata', function() {
      video.play();
    });
  }
</script>

选择合适的 ABS 技术：

HLS: 如果需要支持 iOS 设备和 Safari 浏览器，HLS 是一个不错的选择。
DASH: 如果需要更广泛的平台支持和更多的灵活性，DASH 是一个更好的选择。

6. Web Video API 的性能优化

视频播放对性能要求较高，优化视频播放性能至关重要。

1. 视频编码优化：

合适的编码格式: 选择合适的编码格式 (例如：H.264, VP9) 可以提高压缩率和播放性能。
优化的编码参数: 调整编码参数 (例如：码率、帧率、关键帧间隔) 可以平衡视频质量和文件大小。
使用硬件加速: 利用硬件加速可以显著提高编码和解码速度。

2. 资源加载优化：

使用 CDN: 将视频文件存储在 CDN 上可以加速内容分发，减少延迟。
启用 HTTP 缓存: 启用 HTTP 缓存可以减少重复下载，提高加载速度。
预加载视频: 使用 <link rel="preload"> 预加载视频可以提前开始下载，减少播放延迟。
懒加载视频: 对于不在视窗内的视频，可以使用懒加载技术，只在需要时才加载，减少初始加载时间。

3. 播放器优化：

减少 DOM 操作: 频繁的 DOM 操作会影响性能，尽量减少 DOM 操作。
使用 requestAnimationFrame: 使用 requestAnimationFrame 可以优化动画效果，提高渲染性能。
**避免内存

Web Video API 的使用与性能

1. HTML5 <video> 元素：基础与属性

2. 使用 JavaScript 控制 <video>