如何在VS Code开发的React项目中用JavaScript实现视频暂停播放？

1. 基础实现（useRef + 原生HTML5 Video API） #

React中可以通过useRef获取video元素的DOM引用，直接调用其原生play()和pause()方法实现控制，同时用状态跟踪播放状态：

import { useRef, useState } from 'react';

function VideoPlayer() {
  const videoRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);

  const togglePlayPause = () => {
    const video = videoRef.current;
    if (!video) return;

    isPlaying ? video.pause() : video.play();
    setIsPlaying(!isPlaying);
  };

  return (
    <div>
      <video ref={videoRef} width="640" height="360">
        <source src="your-video-url.mp4" type="video/mp4" />
        你的浏览器不支持视频播放
      </video>
      <button onClick={togglePlayPause}>
        {isPlaying ? '暂停' : '播放'}
      </button>
    </div>
  );
}

export default VideoPlayer;

核心要点： #

• useRef用于持久化保存video元素的DOM引用，避免重复获取
• isPlaying状态同步按钮显示文本，提升交互体验
• 直接调用video元素的原生方法，逻辑简洁高效

2. 同步原生播放状态（监听视频事件） #

如果用户可能点击视频自带的播放控件，需要通过监听视频原生事件来同步自定义按钮的状态：

import { useRef, useState, useEffect } from 'react';

function VideoPlayer() {
  const videoRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;

    // 绑定事件同步状态
    const handlePlay = () => setIsPlaying(true);
    const handlePause = () => setIsPlaying(false);

    video.addEventListener('play', handlePlay);
    video.addEventListener('pause', handlePause);

    // 组件卸载时清除事件监听
    return () => {
      video.removeEventListener('play', handlePlay);
      video.removeEventListener('pause', handlePause);
    };
  }, []);

  const togglePlayPause = () => {
    const video = videoRef.current;
    if (!video) return;
    isPlaying ? video.pause() : video.play();
  };

  return (
    <div>
      <video ref={videoRef} width="640" height="360" controls>
        <source src="your-video-url.mp4" type="video/mp4" />
        你的浏览器不支持视频播放
      </video>
      <button onClick={togglePlayPause}>
        {isPlaying ? '暂停' : '播放'}
      </button>
    </div>
  );
}

export default VideoPlayer;

核心要点： #

• 通过useEffect在组件挂载时绑定事件，卸载时清理，避免内存泄漏
• 监听play和pause原生事件，确保自定义按钮状态与视频实际状态完全同步

3. 封装自定义Hook（复用控制逻辑） #

如果多个组件需要视频控制功能，可以将逻辑封装为自定义Hook，提升代码复用性：

import { useRef, useState, useEffect } from 'react';

// 自定义视频控制Hook
function useVideoPlayer() {
  const videoRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;

    const syncState = () => setIsPlaying(!video.paused);
    video.addEventListener('play', syncState);
    video.addEventListener('pause', syncState);

    return () => {
      video.removeEventListener('play', syncState);
      video.removeEventListener('pause', syncState);
    };
  }, []);

  const play = () => videoRef.current?.play();
  const pause = () => videoRef.current?.pause();
  const toggle = () => (isPlaying ? pause() : play());

  return { videoRef, isPlaying, play, pause, toggle };
}

// 使用示例
function VideoPlayer() {
  const { videoRef, isPlaying, toggle } = useVideoPlayer();

  return (
    <div>
      <video ref={videoRef} width="640" height="360">
        <source src="your-video-url.mp4" type="video/mp4" />
        你的浏览器不支持视频播放
      </video>
      <button onClick={toggle}>
        {isPlaying ? '暂停' : '播放'}
      </button>
    </div>
  );
}

export default VideoPlayer;

核心要点： #

• 将视频引用、状态和控制方法封装到Hook中，对外暴露简洁的API
• 多个组件可直接调用该Hook，无需重复编写控制逻辑

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