取消静音react-从外部组件切换到全屏时播放

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

const VideoPlayer = () => {
  const [muted, setMuted] = useState(true); // 音频或视频的静音状态
  const [fullscreen, setFullscreen] = useState(false); // 全屏状态

  useEffect(() => {
    // 监听音频或视频加载完成事件
    const player = document.getElementById('videoPlayer'); // 根据实际情况获取音频或视频元素
    player.addEventListener('loadedmetadata', handleLoadedMetadata);

    // 监听全屏状态改变事件
    document.addEventListener('fullscreenchange', handleFullscreenChange);

    return () => {
      player.removeEventListener('loadedmetadata', handleLoadedMetadata);
      document.removeEventListener('fullscreenchange', handleFullscreenChange);
    };
  }, []);

  const handleLoadedMetadata = () => {
    // 音频或视频加载完成后进行初始化，例如取消静音
    const player = document.getElementById('videoPlayer');
    player.muted = muted;
  };

  const handleFullscreenChange = () => {
    // 处理全屏状态改变事件
    setFullscreen(document.fullscreenElement !== null);
  };

  const toggleMute = () => {
    // 切换静音状态
    setMuted(!muted);
    const player = document.getElementById('videoPlayer');
    player.muted = !muted;
  };

  const toggleFullscreen = () => {
    // 切换全屏状态
    const player = document.getElementById('videoPlayer');
    if (!fullscreen) {
      if (player.requestFullscreen) {
        player.requestFullscreen();
      } else if (player.mozRequestFullScreen) {
        player.mozRequestFullScreen();
      } else if (player.webkitRequestFullscreen) {
        player.webkitRequestFullscreen();
      } else if (player.msRequestFullscreen) {
        player.msRequestFullscreen();
      }
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    }
  };

  return (
    <div>
      <video id="videoPlayer" src="video.mp4"></video>
      <button onClick={toggleMute}>{muted ? '取消静音' : '静音'}</button>
      <button onClick={toggleFullscreen}>{fullscreen ? '退出全屏' : '全屏'}</button>
    </div>
  );
};

export default VideoPlayer;