Question

我有一个使用React Player的视频，该视频会在页面加载时自动播放。它开始静音（根据需要并根据Chrome的自动播放指南）。有一个自定义的静音按钮，可将状态从静音更改为取消静音（并更改音量）。但是，Chrome暂停了视频，并给我一个错误，提示用户需要先与网站进行交互，然后才能播放音频。单击取消静音按钮应视为互动！此外，由于某些原因，单击网站上的其他按钮也不算是互动。任何帮助，将不胜感激！这是在Chrome版本80.0.3987.149上。这是相关的代码：

const HeaderImage = ({ slice }) => {
  const videos = slice.items;
  const [muted, setMuted] = useState(true);
  const [playing, setPlaying] = useState(true);

  let volume;
  if (muted === true) {
    volume = 0;
  } else {
    volume = 1;
  }
  return (
    <>
      <VideoWrapper>
       <ReactPlayer
         url={videos[0].video.url}
         style={FullVideo}
         width="100%"
         height="100%"
         playing={playing}
         volume={volume}
         muted={muted}
        />
       <Muted onClick={() => setMuted(!muted)}>
         {muted === true ? <FontAwesomeIcon icon={faVolumeMute} /> : <FontAwesomeIcon icon= 
          {faVolumeUp} />}
       </Muted>
     </VideoWrapper>
 </>

静音按钮可在React Player中暂停自动播放的视频

0 个答案: