.play()在React组件上不能按预期工作

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

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

  useEffect(() => {
    if (videoRef.current) {
      videoRef.current.play().catch(error => {
        console.error('Play failed:', error);
      });
    }
  }, []);

  return (
    <video ref={videoRef} src="path/to/video.mp4" controls />
  );
};

export default VideoPlayer;

<video ref={videoRef} src="path/to/video.mp4" controls autoPlay muted />

const handlePlay = () => {
  if (videoRef.current) {
    videoRef.current.play().catch(error => {
      console.error('Play failed:', error);
    });
  }
};

return (
  <div>
    <video ref={videoRef} src="path/to/video.mp4" controls />
    <button onClick={handlePlay}>Play</button>
  </div>
);