如何使用React的VideoPlayer构建视频播放器

npx create-react-app video-player
cd video-player
npm start

import React, { useRef } from 'react';

const VideoPlayer = ({ src }) => {
  const videoRef = useRef(null);

  const handlePlay = () => {
    videoRef.current.play();
  };

  const handlePause = () => {
    videoRef.current.pause();
  };

  return (
    <div>
      <video ref={videoRef} width="600" controls>
        <source src={src} type="video/mp4" />
        Your browser does not support the video tag.
      </video>
      <br />
      <button onClick={handlePlay}>Play</button>
      <button onClick={handlePause}>Pause</button>
    </div>
  );
};

export default VideoPlayer;

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

function App() {
  return (
    <div className="App">
      React Video Player Example
      <VideoPlayer src="https://www.w3schools.com/html/mov_bbb.mp4" />
    </div>
  );
}

export default App;

<video ref={videoRef} width="600" style={{ display: 'block' }}>
  <source src={src} type="video/mp4" />
</video>

<video ref={videoRef} width="600" preload="metadata">
  <source src={src} type="video/mp4" />
</video>

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

const useVideoPlayer = (src) => {
  const [isPlaying, setIsPlaying] = useState(false);
  const videoRef = useRef(null);

  useEffect(() => {
    if (isPlaying) {
      videoRef.current.play();
    } else {
      videoRef.current.pause();
    }
  }, [isPlaying]);

  return { videoRef, isPlaying, setIsPlaying };
};

const VideoPlayer = ({ src }) => {
  const { videoRef, isPlaying, setIsPlaying } = useVideoPlayer(src);

  return (
    <div>
      <video ref={videoRef} width="600">
        <source src={src} type="video/mp4" />
      </video>
      <br />
      <button onClick={() => setIsPlaying(!isPlaying)}>
        {isPlaying ? 'Pause' : 'Play'}
      </button>
    </div>
  );
};