video.js是否支持设置回调使远程浏览器播放器复刻用户操作？

你需要的四类播放控制操作，video.js都提供了对应的原生事件回调，回调上下文可直接获取到同步所需的全部数据，完全满足通过websocket同步受控端播放状态的需求。

• 音量控制：对应volumechange事件，可通过播放器实例方法volume()获取0-1范围的音量值，muted()获取布尔类型的静音状态，两类数据即可完整还原音量设置
• 播放操作：对应play事件，触发时可同步获取当前播放进度currentTime()（单位为秒），保障受控端播放进度与主控端一致
• 暂停操作：对应pause事件，同样可附带当前播放进度值，避免两端出现进度差
• 进度跳转：对应seeked事件（注意不要使用跳转过程中连续触发的seeking事件），可通过currentTime()获取跳转完成后的目标时间点

主控端事件监听及消息发送 #

// 初始化主控端video.js播放器
const masterPlayer = videojs('master-video-element');
// 假设已提前完成websocket连接初始化
const ws = new WebSocket('你的websocket服务地址');

// 音量变化监听
masterPlayer.on('volumechange', () => {
  ws.send(JSON.stringify({
    action: 'set_volume',
    payload: {
      volume: masterPlayer.volume(),
      muted: masterPlayer.muted()
    }
  }));
});

// 播放事件监听
masterPlayer.on('play', () => {
  ws.send(JSON.stringify({
    action: 'play',
    payload: {
      currentTime: masterPlayer.currentTime()
    }
  }));
});

// 暂停事件监听
masterPlayer.on('pause', () => {
  ws.send(JSON.stringify({
    action: 'pause',
    payload: {
      currentTime: masterPlayer.currentTime()
    }
  }));
});

// 跳转完成事件监听
masterPlayer.on('seeked', () => {
  ws.send(JSON.stringify({
    action: 'seek',
    payload: {
      currentTime: masterPlayer.currentTime()
    }
  }));
});

受控端消息接收及状态同步 #

// 初始化受控端video.js播放器
const slavePlayer = videojs('slave-video-element');
const ws = new WebSocket('你的websocket服务地址');

ws.onmessage = (event) => {
  const msg = JSON.parse(event.data);
  switch(msg.action) {
    case 'set_volume':
      slavePlayer.volume(msg.payload.volume);
      slavePlayer.muted(msg.payload.muted);
      break;
    case 'play':
      slavePlayer.currentTime(msg.payload.currentTime);
      slavePlayer.play();
      break;
    case 'pause':
      slavePlayer.currentTime(msg.payload.currentTime);
      slavePlayer.pause();
      break;
    case 'seek':
      slavePlayer.currentTime(msg.payload.currentTime);
      break;
  }
};

如果需要更高精度的同步，可在主控端发送消息时额外携带时间戳，受控端收到后根据网络延迟做微小的进度补偿，常规场景下上述代码逻辑即可满足需求。

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