如何用Node.js实现跨页面视频播放控制的小型Web应用？

嘿，我来帮你搞定这个Node.js小项目！你原本提到的.php后缀可以换成静态HTML（或者用Node.js的模板引擎），毕竟咱们用Node.js来做后端嘛。核心需求是跨页面控制视频播放状态，这得靠实时双向通信来实现，我推荐用Socket.io配合Express框架来做，上手快还靠谱。

第一步：初始化项目&安装依赖 #

先创建项目文件夹，然后初始化npm，安装需要的包：

mkdir video-control-project
cd video-control-project
npm init -y
npm install express socket.io

第二步：编写后端服务（server.js） #

这个文件是整个项目的核心，它负责托管静态页面，同时处理Socket.io的实时通信：

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

// 托管静态资源（前端页面放在public文件夹里）
app.use('/routine', express.static('public'));

// 监听Socket.io连接
io.on('connection', (socket) => {
  console.log('有客户端连接了');
  
  // 接收控制页发来的播放/暂停指令，然后广播给所有视频页
  socket.on('control-video', (action) => {
    io.emit('video-action', action);
  });

  socket.on('disconnect', () => {
    console.log('客户端断开连接');
  });
});

// 启动服务器，监听3000端口（你可以改成其他端口）
server.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

第三步：创建前端页面文件夹&编写视频展示页 #

首先在项目根目录创建public文件夹，然后在里面创建video.html（对应你要的/routine/video路径）：

<!DOCTYPE html>
<html>
<head>
  <title>视频展示页</title>
</head>
<body>
  <h2>视频列表</h2>
  <!-- 这里放你的视频元素，示例用一个视频，你可以循环生成多个 -->
  <video id="targetVideo" width="640" height="360" controls>
    <source src="your-video.mp4" type="video/mp4">
    你的浏览器不支持视频播放
  </video>

  <!-- 引入Socket.io客户端脚本 -->
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    const video = document.getElementById('targetVideo');

    // 监听服务器发来的控制指令
    socket.on('video-action', (action) => {
      if (action === 'play') {
        video.play();
      } else if (action === 'pause') {
        video.pause();
      }
    });
  </script>
</body>
</html>

注意：把your-video.mp4换成你实际的视频路径，或者把视频文件放在public文件夹里。

第四步：编写控制页（controller.html） #

同样在public文件夹里创建controller.html（对应/routine/controller路径）：

<!DOCTYPE html>
<html>
<head>
  <title>视频控制页</title>
</head>
<body>
  <h2>视频控制器</h2>
  <button id="playBtn">播放</button>
  <button id="pauseBtn">暂停</button>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    const playBtn = document.getElementById('playBtn');
    const pauseBtn = document.getElementById('pauseBtn');

    playBtn.addEventListener('click', () => {
      socket.emit('control-video', 'play');
    });

    pauseBtn.addEventListener('click', () => {
      socket.emit('control-video', 'pause');
    });
  </script>
</body>
</html>

运行项目&测试 #

1. 在项目根目录运行：node server.js
2. 打开浏览器访问 http://localhost:3000/routine/video.html，打开视频页
3. 再打开一个标签页访问 http://localhost:3000/routine/controller.html，点击播放/暂停按钮，就能看到视频页的视频跟着控制啦！

额外小提示 #

• 如果需要部署到线上，记得把服务器端口改成对应环境的端口，同时确保静态资源路径正确。
• 如果要展示多个视频，你可以给每个视频加唯一ID，然后在控制页选择要控制的视频，后端转发指令时带上ID，前端根据ID找到对应视频操作就行。
• 要是你想用模板引擎（比如EJS）来动态渲染视频列表，只需要把express.static改成模板引擎配置，然后把html文件换成ejs模板就行。

内容的提问来源于stack exchange，提问作者Hex