HTML自动播放视频即使在单击播放（和取消静音）后仍保持静音

Question

我建立了一个登陆页面，当用户访问网页时，该页面会自动播放静音的视频。但是，有时当我单击取消静音大按钮时，它会播放视频，但仍被静音。

这是它的样子：

这是视频HTML：

<video ref={videoRef} id="vidplayer" autoPlay muted={muted} playsInline preload="auto">
    <source src={src} type="video/mp4" />
</video>

这是单击取消静音按钮时调用的javascript / react。

let playInitialVideo = async () => {

  try{
    let video = videoRef.current;
    video.currentTime = 0 //restart the video
    await video.pause(); //pause to update to unmuted
    video.muted = false; //make sure vid is muted
    setMuted(false) //change state to muted which will change the attribute on the video html
    await video.play();

  } catch(err){
    console.error(err.message)
  }
}

这在99％的时间内都可以正常工作，但是有时会播放视频，但是除非我再次切换“暂停/播放”按钮，否则视频会保持静音。知道发生了什么吗？我希望当单击大的取消静音按钮时，它可以播放视频并取消静音。