Skip to main content

前端视频缓冲2分钟

要实现视频缓冲区并预缓冲 2 分钟的视频内容，可以通过调整服务器端的响应逻辑和前端的配置来实现。以下是一个简单的实现方案：

1. 后端服务器代码（Node.js 和 Express）​

在后端服务器代码中，我们可以调整 range 请求的处理逻辑，确保在每次请求时返回足够的数据来满足预缓冲需求。

const express = require('express');
const fs = require('fs');
const path = require('path');

const app = express();
const port = 3000;

// 定义视频文件路径
const videoPath = path.resolve(__dirname, 'video.mp4');
const videoStat = fs.statSync(videoPath);
const fileSize = videoStat.size;

// 计算2分钟的视频字节数（假设视频比特率为500kbps）
const bufferDuration = 2 * 60; // 2分钟的秒数
const bitrate = 500 * 1000; // 500kbps 转换为 bps
const bufferSize = (bufferDuration * bitrate) / 8; // 2分钟需要的字节数

app.get('/video', (req, res) => {
  const range = req.headers.range;

  if (range) {
    const parts = range.replace(/bytes=/, '').split('-');
    const start = parseInt(parts[0], 10);
    let end = parts[1] ? parseInt(parts[1], 10) : start + bufferSize - 1;

    // 确保结束字节不超过文件大小
    if (end >= fileSize) {
      end = fileSize - 1;
    }

    const chunksize = end - start + 1;
    const file = fs.createReadStream(videoPath, { start, end });
    const head = {
      'Content-Range': `bytes ${start}-${end}/${fileSize}`,
      'Accept-Ranges': 'bytes',
      'Content-Length': chunksize,
      'Content-Type': 'video/mp4',
    };

    res.writeHead(206, head);
    file.pipe(res);
  } else {
    const head = {
      'Content-Length': fileSize,
      'Content-Type': 'video/mp4',
    };
    res.writeHead(200, head);
    fs.createReadStream(videoPath).pipe(res);
  }
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

2. 前端代码（HTML 和 JavaScript）​

在前端代码中，可以通过设置视频元素的 preload 属性来启用预加载，并通过 JavaScript 监听缓冲事件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Video Streaming</title>
  </head>
  <body>
    <!-- 视频播放器 -->
    <video id="videoPlayer" controls preload="auto">
      <!-- 启用自动预加载 -->
      <source src="http://localhost:3000/video" type="video/mp4" />
      Your browser does not support the video tag.
    </video>

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

      video.addEventListener('waiting', () => {
        console.log('Buffering...');
      });

      video.addEventListener('playing', () => {
        console.log('Playing...');
      });

      // 监听视频元素的 progress 事件，输出缓冲进度
      video.addEventListener('progress', () => {
        const buffered = video.buffered;
        if (buffered.length > 0) {
          const bufferEnd = buffered.end(buffered.length - 1);
          const duration = video.duration;
          console.log(`Buffered: ${bufferEnd} / ${duration}`);
        }
      });
    </script>
  </body>
</html>

解释​

  1. 后端服务器代码：

    • 定义了一个 bufferSize 变量来表示 2 分钟的视频数据大小（假设比特率为 500kbps）。
    • 在处理 range 请求时，确保每次返回的数据至少包含 2 分钟的视频内容。
    • 如果 range 请求的结束字节超过文件大小，则调整结束字节为文件末尾。

  2. 前端代码：

    • 设置 <video> 标签的 preload 属性为 auto，启用自动预加载。
    • 通过监听 progress 事件，输出视频的缓冲进度。

通过这种方式，你可以实现视频的预缓冲机制，确保在播放时有足够的数据缓冲，减少播放时的卡顿现象。注意，实际的缓冲大小和效果可能会受到网络条件和视频文件比特率的影响。

video 缓冲机制​

HTML5 视频标签自带缓冲机制。当视频播放时，如果缓冲区不足，播放会暂停并等待数据加载完成。你可以通过 JavaScript 事件监听来监控缓冲状态，如上面的代码所示