使用 Server-sent Events 实现网页视频播放进度条的实时更新-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，视频播放器是一个常见的需求，而其中一个非常基本的功能就是显示视频的播放进度条。随着技术的不断发展，如何在网页上实现视频播放进度条的实时更新成为了一个越来越受追捧的、不断探索的话题。本文将介绍如何使用 Server-sent Events 技术来实现网页视频播放进度条的实时更新。

Server-sent Events 简介

Server-sent Events 是一种实现服务器端推送数据到客户端的技术。它使用简单的 HTTP 请求/响应模型，可以在服务器端持续推送数据到客户端。客户端使用 EventSource 对象连接到服务器端，并接收来自服务器的事件流。相比于 WebSocket，Server-sent Events 更加轻量级、易于使用，适用于需要服务器端推送消息的简单场景。

Server-sent Events 主要包含以下 3 个部分：

服务器端设置响应头 Content-Type: text/event-stream 表示将要发送一个事件流。
服务器端按照一定的格式发送数据，如 data: hello\n\n。
客户端使用 EventSource 对象连接到服务器端，并注册 onmessage 事件接收服务器端发送的数据。

实现视频播放进度条的实时更新

实现视频播放进度条的实时更新需要分为以下 3 个步骤。

步骤一：获取视频播放进度数据

首先我们需要获取当前视频播放的进度数据。在 HTML5 中，可以通过 video.currentTime 获取当前视频播放的时间，通过 video.duration 获取视频总时长。这两个值的单位都是秒。

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

步骤二：使用 Server-sent Events 发送数据

使用 Server-sent Events 发送数据需要在服务器端设置响应头，并按照一定的格式发送数据。以下是一个简单的 Node.js 服务器端代码示例：

// javascriptcn.com 代码示例
const http = require('http');

const server = http.createServer((req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  const intervalId = setInterval(() => {
    const currentTime = new Date().toLocaleTimeString();
    res.write(`data: ${currentTime}\n\n`);
  }, 1000);

  req.on('close', () => {
    clearInterval(intervalId);
    res.end();
  });
});

server.listen(3000);

以上代码创建了一个服务器，每秒钟发送当前时间到客户端。

步骤三：使用 EventSource 对象接收数据

使用 EventSource 对象连接到服务器端，并注册 onmessage 事件接收服务器端发送的数据。以下是一个简单的前端代码示例：

const eventSource = new EventSource('/sse');
eventSource.onmessage = (event) => {
  console.log(event.data);
};

以上代码使用 EventSource 对象连接到 /sse 路径的服务器，接收服务器端发送的数据，并在控制台上打印出来。

将以上 3 个步骤结合起来，就可以实现视频播放进度条的实时更新。

示例代码

以下是一个完整的示例代码，可以实现视频播放进度条的实时更新。

// javascriptcn.com 代码示例
// index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Video Player</title>
  <style>
    #progress {
      width: 500px;
      height: 10px;
      background-color: #ddd;
      position: relative;
    }
    #progress .bar {
      width: 0;
      height: 100%;
      background-color: #f00;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <video src="video.mp4" controls></video>
  <div id="progress">
    <div class="bar"></div>
  </div>
  <script>
    const progress = document.querySelector('#progress .bar');

    const eventSource = new EventSource('/sse');
    eventSource.onmessage = (event) => {
      const currentTime = parseFloat(event.data);
      const video = document.querySelector('video');
      const duration = video.duration;
      progress.style.width = `${(currentTime / duration) * 100}%`;
    };
  </script>
</body>
</html>

// server.js
const http = require('http');

const server = http.createServer((req, res) => {
  if (req.url === '/sse') {
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');

    const intervalId = setInterval(() => {
      const video = document.querySelector('video');
      if (video) {
        const currentTime = video.currentTime;
        res.write(`data: ${currentTime}\n\n`);
      }
    }, 100);

    req.on('close', () => {
      clearInterval(intervalId);
      res.end();
    });
  } else {
    res.setHeader('Content-Type', 'text/html');
    res.write(`
      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="UTF-8">
        <title>Server-sent Events</title>
      </head>
      <body>
        <video src="video.mp4" controls></video>
        <script>
          const video = document.querySelector('video');
          video.addEventListener('play', () => {
            const eventSource = new EventSource('/sse');
            eventSource.onmessage = (event) => {
              const currentTime = parseFloat(event.data);
              video.currentTime = currentTime;
            };
          });
          video.addEventListener('pause', () => {
            const eventSource = new EventSource('/sse');
            eventSource.close();
          });
        </script>
      </body>
      </html>
    `);
    res.end();
  }
});

server.listen(3000);

以上代码提供了一个完整的视频播放器示例，并实现了视频播放进度条的实时更新效果。客户端使用的 Server-sent Events 技术，服务器端使用的是 Node.js 和原生的 HTTP 模块。你可以在本地运行上述示例代码并观察视频播放进度条的变化。

总结

本文介绍了如何使用 Server-sent Events 技术来实现网页视频播放进度条的实时更新。通过 Server-sent Events 技术，服务器可以持续地将视频播放进度数据推送到客户端，客户端可以实时更新视频播放进度条的显示。这样可以让用户获得更加流畅的视频播放体验，增强网页交互性和用户体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652ab4437d4982a6ebcf3597