React 视频播放器：实现单视频播放与控制

引言

在现代网页应用中，视频内容的展示变得越来越重要。一个常见的需求是创建一个视频播放器，它允许用户遍历多个视频，并且每次只能播放一个视频。本文将介绍如何使用React来实现这样一个视频播放器，确保用户在观看一个视频时，其他视频自动停止播放。

视频播放器设计目标

我们的视频播放器需要满足以下要求：

• 视频遍历：用户可以浏览多个视频。
• 单视频播放：用户点击播放按钮时，只有被点击的视频开始播放。
• 自动暂停其他视频：当一个视频开始播放时，其他所有视频自动暂停。

实现步骤

步骤 1：创建视频播放器组件

首先，我们需要创建一个React组件来展示单个视频。这个组件将包含视频播放器和控制按钮。

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

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

  const handlePlayClick = () => {
    if (videoRef.current) {
      if (isPlaying) {
        videoRef.current.pause();
      } else {
        videoRef.current.play();
      }
      setIsPlaying(!isPlaying);
    }
  };

  return (
    <div className="relative">
      <video
        ref={videoRef}
        className="w-full h-auto"
        controls={false}
        onPlay={() => setIsPlaying(true)}
        onPause={() => setIsPlaying(false)}
      >
        <source src={videoSrc} type="video/mp4" />
        Your browser does not support the video tag.
      </video>
      <button
        className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-blue-500 text-white px-4 py-2 rounded-full"
        onClick={handlePlayClick}
      >
        {isPlaying ? 'Pause' : 'Play'}
      </button>
    </div>
  );
};

步骤 2：创建视频列表组件

接下来，创建一个组件来展示视频列表，并为每个视频创建一个VideoPlayer实例。

import React from 'react';
import VideoPlayer from './VideoPlayer';

const VideoList = ({ videos }) => {
  return (
    <div>
      {videos.map((video, index) => (
        <VideoPlayer key={index} videoSrc={video} />
      ))}
    </div>
  );
};

步骤 3：控制视频播放状态

为了确保一次只能播放一个视频，我们需要在视频列表组件中维护一个状态来跟踪当前播放的视频索引。

import React, { useState } from 'react';
import VideoPlayer from './VideoPlayer';

const VideoList = ({ videos }) => {
  const [activeVideoIndex, setActiveVideoIndex] = useState(null);

  const handlePlayClick = (index) => {
    setActiveVideoIndex(index === activeVideoIndex ? null : index);
  };

  return (
    <div>
      {videos.map((video, index) => (
        <VideoPlayer
          key={index}
          videoSrc={video}
          isPlaying={index === activeVideoIndex}
          onPlay={() => handlePlayClick(index)}
        />
      ))}
    </div>
  );
};

在VideoPlayer组件中，我们根据isPlaying属性来决定是否播放视频。