React集成Video.js如何区分视频首次播放与暂停续播触发对应函数

首先明确：没有任何原生HTML媒体事件可以直接区分首次播放和暂停后续播，两类用户操作触发的标准事件序列完全一致，你之前考虑的「监听pause事件配合状态标记判断」的思路是通用且可靠的实现方式，不存在更简化的原生事件方案。

原代码问题 #

• 事件绑定语法错误：videoJSPlayer.on('play'), () => {} 括号位置错误，回调函数没有传入on方法，事件监听实际未生效
• 逻辑判断缺失：playing事件在每次进入播放状态（包括首次播放）都会触发，未加判断就直接调用续播回调，必然出现误触发
• 状态选型问题：用useState存播放标记存在异步更新、闭包旧值问题，事件回调中很容易拿到错误的状态值

正确实现代码 #

用useRef存储播放状态标记，避免闭包和异步更新问题，绑定play和pause事件区分场景，同时记得在卸载时清理事件监听：

import { useRef, useEffect } from 'react';

const VideoPlayer = ({ handleOnPlayContinue, handleOnStart, videoJSPlayer }) => {
  // 用ref存储实时状态，避免重渲染/异步更新导致的值不一致问题
  const isFirstPlayRef = useRef(true);
  const isPausedRef = useRef(true);

  useEffect(() => {
    if (!videoJSPlayer) return;

    const onPlay = () => {
      // 判定为首次播放
      if (isFirstPlayRef.current) {
        handleOnStart?.();
        isFirstPlayRef.current = false;
        isPausedRef.current = false;
        return;
      }
      // 非首次播放，且是从暂停状态恢复，判定为续播
      if (isPausedRef.current) {
        handleOnPlayContinue?.();
        isPausedRef.current = false;
      }
    };

    const onPause = () => {
      // 首次播放未触发时，初始默认暂停状态不需要标记
      if (!isFirstPlayRef.current) {
        isPausedRef.current = true;
      }
    };

    // 绑定video.js事件，事件名与原生HTML媒体事件一致
    videoJSPlayer.on('play', onPlay);
    videoJSPlayer.on('pause', onPause);

    // 清理事件监听，避免内存泄漏
    return () => {
      videoJSPlayer.off('play', onPlay);
      videoJSPlayer.off('pause', onPause);
      // 播放器实例重建时重置状态
      isFirstPlayRef.current = true;
      isPausedRef.current = true;
    };
  }, [videoJSPlayer, handleOnPlayContinue, handleOnStart]);

  return <div data-vjs-player />;
};

关键说明 #

• 选择play事件而非playing事件：play在用户触发播放操作时立刻执行，响应时机和用户点击行为同步；playing需要等视频缓冲足够、开始渲染帧才触发，会有明显延迟
• 不会误判缓冲场景：视频加载缓冲触发的临时中断不会触发pause事件，只有用户主动点击暂停、代码主动调用pause()方法才会标记暂停状态，缓冲后自动恢复播放不会被误判为续播
• 如果需要区分用户主动暂停和代码触发的暂停，可以在业务代码调用pause()的位置加额外ref标记做判断，常规需求下上述逻辑已经可以完全覆盖。

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