Reactjs 谷歌浏览器不会播放<；视频>；即使autoplay已停用，我的react webapp中仍有声音

所以我们现在都知道谷歌Chrome不会让你在网站上自动播放带有声音的视频。不过，我确实有一个网站，它有一个全宽视频标题，可以在所有设备和浏览器（包括谷歌）上自动播放没有声音的视频。我的问题是，与其他浏览器相比，谷歌不允许我在用户点击取消静音按钮后取消静音。我已经尝试了很多方法来解决这个问题，但是无法实现，所以现在我只想在google chrome中没有任何自动播放功能的情况下渲染视频，因此用户点击启动视频就像在YouTube或任何其他网站上一样。然而，这也行不通如果这会导致播放带有声音的视频，谷歌将不允许用户开始播放视频，也不允许用户在视频开始播放后取消静音，为了增加这一难题，谷歌也不允许使用默认控件。我是complety baffeld，不知道是什么原因导致了这一问题

错误消息：

page.js:35不允许启动AudioContext。一定是 在页面上的用户手势后恢复（或创建）

我的代码：

<video ref={videoRefGC} src={video} type="video/mp4" muted /* without 'muted' video wont play at all */ />

整个源代码：

import React, { useEffect, useContext, useState, useRef, useLayoutEffect } from "react"
import Page from "./Page"
import StateContext from "../StateContext"
import DispatchContext from "../DispatchContext"
import { useImmer } from "use-immer"
import LoadingIcon from "./LoadingIcon"
import Axios from "axios"
import video from "../images/trailer.mp4"
import { NavLink } from "react-router-dom"
import { NavHashLink } from "react-router-hash-link"
import Kontakt from "./Kontakt"
import Spiel from "./Spiel"
import Footer from "./Footer"
import Helmet from "react-helmet"

function Home() {
  const appState = useContext(StateContext)
  const [state, setState] = useImmer({
    isLoading: false,
    isMuted: true,
    isScrolling: false,
    isVideoPaused: true,
    isGoogleChrome: false
  })

  var isChromium = window.chrome
  var winNav = window.navigator
  var vendorName = winNav.vendor
  var isOpera = typeof window.opr !== "undefined"
  var isIEedge = winNav.userAgent.indexOf("Edge") > -1
  var isIOSChrome = winNav.userAgent.match("CriOS")

  useEffect(() => {
    if (isIOSChrome) {
      alert("ioschrome")
    } else if (isChromium !== null && typeof isChromium !== "undefined" && vendorName === "Google Inc." && isOpera === false && isIEedge === false) {
      updateBrowserOS()
    } else {
      videoRef.current.play()
    }
  }, [])

  const updateBrowserOS = () => {
    setState(draft => {
      draft.isGoogleChrome = true
    })
    alert("I was called")
  }

  const appDispatch = useContext(DispatchContext)

  const muteHandler = () => {
    setState(draft => {
      draft.isMuted = !state.isMuted
    })
  }

  const playHandler = () => {
    videoRefGC.current.play()
    videoRefGC.current.muted = false /*This wont work either */
  }

  useEffect(() => {
    const toggleElement = document.querySelector(".heartbeat")
    if (!state.isMuted && !state.isGoogleChrome) {
      toggleElement.classList.toggle("fa-volume-down")
    }
    if (state.isMuted && !state.isGoogleChrome) {
      toggleElement.classList.toggle("fa-volume-mute")
    }
  })

useEffect(() => {
    if (state.isVideoPaused && !state.isGoogleChrome) {
      videoRef.current.pause()
      console.log(state.isGoogleChrome)
    } else {
      videoRef.current.play()
    }
  }, [])

  return (
    <Page title="Krimi Dinner">
      <Helmet>
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"></link>
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"></link>
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"></link>
        <link rel="manifest" href="/site.webmanifest"></link>
        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"></link>
        <meta name="msapplication-TileColor" content="#da532c" />
        <meta name="theme-color" content="#ffffff" />
      </Helmet>
      <NavHashLink className="skip-link" to="#mainContentSpiel">
        Skip-Link zum Angebot
      </NavHashLink>
      <NavHashLink className="skip-link" to="#kontakt">
        Skip-Link zum Anmeldeformular und zu den Kontaktinformationen
      </NavHashLink>
      <section id="videoHeader" className="video-section">
        <div className="video-container">{state.isGoogleChrome ? <video ref={videoRefGC} src={video} type="video/mp4" muted /* without 'muted' video wont play at all */ /> : <video src={video} ref={videoRef} type="video/mp4" muted={state.isMuted} autoPlay={false} loop />}</div>
        <div className="video-section-overlay"></div>
        <div className="video-section-nav" id="video-section-nav">
          <div className="video-section-nav-logo-box col-2">
            <img src={require("../images/logo_kd_pink.svg")} alt="Villa Kunterbunt Logo"></img>
          </div>
          <div className="video-section-nav-links col-8" id="video-section-nav-links">
            <NavHashLink smooth to="/#videoHeader" className="nav-link-text" aria-label="Link zum Anfang der Seite" activeClassName="active" id="HomeNavLink">
              Home
            </NavHashLink>
            <NavHashLink smooth to="/#mainContentSpiel" className="nav-link-text" aria-label="Link zu Informationen über das Spiel" activeClassName="active" id="Spiel">
              Das Spiel
            </NavHashLink>
            <NavHashLink smooth to="/#kontakt" className="nav-link-text" aria-label="Link zum Kontaktformular und anderen Kontaktmöglichkeiten" activeClassName="active" id="KontaktNavLink">
              Anmelden & Kontakt
            </NavHashLink>
          </div>
          {state.isGoogleChrome ? (
            <div id="play-controls" className="nav-video-controlls col-2">
              <span onClick={playHandler} data-for="reply" data-tip="Toggle Play" className={"icons-button"}>
                <i className="fas fa-play"></i>
              </span>
            </div>
          ) : (
            <div id="mute-controls" className="nav-video-controlls col-2">
              <span onClick={muteHandler} data-for="reply" data-tip="Toggle Sound" className={"icons-button"}>
                <i className="heartbeat fas"></i>
              </span>
            </div>
          )}

          <div id="play-controls" className="nav-video-controlls col-2 gc-ns">
            <span id="gcEL" data-for="reply" data-tip="Play Video" className={"icons-button"}>
              <i className="fas fa-play"></i>
            </span>
          </div>
          <div className="scrollDown slide-in-blurred-top" id="scrollDownPopUp">
            <button className="hax h-o-m" onClick={scrollHandler}>
              <p>scroll down</p>
              <i class="fas fa-chevron-down"></i>
            </button>
          </div>
        </div>
      </section>

      <div className="mobile-play-btn" id="mobilePlayBtn">
        <button className="d-o-m" onClick={mobilePlayHandler}>
          <i class="fas fa-play"></i>
        </button>
      </div>

      <section className="mainContentSpiel">
        <div id="mainContentSpiel">
          <Spiel />
        </div>
        <div id="kontakt">
          <Kontakt />
        </div>
        <Footer />
      </section>
    </Page>
  )
}

export default Home

import React，{useffect，useContext，useState，useRef，useLayoutEffect}来自“React”
从“/Page”导入页面
从“./StateContext”导入StateContext
从“./DispatchContext”导入DispatchContext
从“使用immer”导入{useImmer}
从“/LoadingIcon”导入LoadingIcon
从“Axios”导入Axios
从“./images/traile.mp4”导入视频
从“react router dom”导入{NavLink}
从“react路由器哈希链接”导入{NavHashLink}
从“/Kontakt”导入Kontakt
从“/Spiel”导入Spiel
从“/Footer”导入页脚
从“反应头盔”导入头盔
函数Home（）{
const appState=useContext（StateContext）
常量[状态，设置状态]=使用immer({
孤岛加载：false，
伊斯穆特：是的，
伊斯克罗林：错，
是的，
谷歌浏览器：错
})
var isChromium=window.chrome
var winNav=window.navigator
var vendorName=winNav.vendor
var isOpera=typeof window.opr！=“未定义”
var isIEedge=winNav.userAgent.indexOf（“边缘”）>-1
var isIOSChrome=winNav.userAgent.match（“CriOS”）
useffect（（）=>{
if（三色铬）{
警报（“ioschrome”）
}else if（isChromium！==null&&typeof isChromium！==“未定义”&&vendorName==“谷歌公司”&&isOpera==false&&Iseedge==false）{
updateBrowserOS（）
}否则{
videoRef.current.play（）
}
}, [])
常量updateBrowserOS=（）=>{
设置状态（草稿=>{
draft.isGoogleChrome=true
})
警惕（“我被召唤”）
}
const appDispatch=useContext（DispatchContext）
常量muteHandler=（）=>{
设置状态（草稿=>{
draft.ismute=！state.ismute
})
}
常量playHandler=（）=>{
videoRefGC.current.play（）
videoRefGC.current.muted=false/*这也不起作用*/
}
useffect（（）=>{
const-toggleElement=document.querySelector（“.heartbeat”）
如果（！state.isMuted&&！state.isGoogleChrome）{
toggleElement.classList.toggle（“fa音量下降”）
}
if（state.isMuted&&！state.isGoogleChrome）{
toggleElement.classList.toggle（“fa音量静音”）
}
})
useffect（（）=>{
if（state.isVideoPaused&&！state.isGoogleChrome）{
videoRef.current.pause（）
console.log（state.isGoogleChrome）
}否则{
videoRef.current.play（）
}
}, [])
返回(
跳过链接zum Angebot
跳过链接以获取最新信息
{state.isGoogleChrome？：}
家
达斯·斯皮尔
安梅尔登与康塔克酒店
{state.isGoogleChrome(
) : (
)}
向下滚动

)
}
导出默认主页

import React, { useEffect, useContext, useState, useRef, useLayoutEffect } from "react"
import Page from "./Page"
import StateContext from "../StateContext"
import DispatchContext from "../DispatchContext"
import { useImmer } from "use-immer"
import LoadingIcon from "./LoadingIcon"
import Axios from "axios"
import video from "../images/trailer.mp4"
import { NavLink } from "react-router-dom"
import { NavHashLink } from "react-router-hash-link"
import Kontakt from "./Kontakt"
import Spiel from "./Spiel"
import Footer from "./Footer"
import Helmet from "react-helmet"

function Home() {
  const appState = useContext(StateContext)
  const [state, setState] = useImmer({
    isLoading: false,
    isMuted: true,
    isScrolling: false,
    isVideoPaused: true,
    isGoogleChrome: false
  })

  var isChromium = window.chrome
  var winNav = window.navigator
  var vendorName = winNav.vendor
  var isOpera = typeof window.opr !== "undefined"
  var isIEedge = winNav.userAgent.indexOf("Edge") > -1
  var isIOSChrome = winNav.userAgent.match("CriOS")

  useEffect(() => {
    if (isIOSChrome) {
      alert("ioschrome")
    } else if (isChromium !== null && typeof isChromium !== "undefined" && vendorName === "Google Inc." && isOpera === false && isIEedge === false) {
      updateBrowserOS()
    } else {
      videoRef.current.play()
    }
  }, [])

  const updateBrowserOS = () => {
    setState(draft => {
      draft.isGoogleChrome = true
    })
    alert("I was called")
  }

  const appDispatch = useContext(DispatchContext)

  const muteHandler = () => {
    setState(draft => {
      draft.isMuted = !state.isMuted
    })
  }

  const playHandler = () => {
    videoRefGC.current.play()
    videoRefGC.current.muted = false /*This wont work either */
  }

  useEffect(() => {
    const toggleElement = document.querySelector(".heartbeat")
    if (!state.isMuted && !state.isGoogleChrome) {
      toggleElement.classList.toggle("fa-volume-down")
    }
    if (state.isMuted && !state.isGoogleChrome) {
      toggleElement.classList.toggle("fa-volume-mute")
    }
  })

useEffect(() => {
    if (state.isVideoPaused && !state.isGoogleChrome) {
      videoRef.current.pause()
      console.log(state.isGoogleChrome)
    } else {
      videoRef.current.play()
    }
  }, [])

  return (
    <Page title="Krimi Dinner">
      <Helmet>
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"></link>
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"></link>
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"></link>
        <link rel="manifest" href="/site.webmanifest"></link>
        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"></link>
        <meta name="msapplication-TileColor" content="#da532c" />
        <meta name="theme-color" content="#ffffff" />
      </Helmet>
      <NavHashLink className="skip-link" to="#mainContentSpiel">
        Skip-Link zum Angebot
      </NavHashLink>
      <NavHashLink className="skip-link" to="#kontakt">
        Skip-Link zum Anmeldeformular und zu den Kontaktinformationen
      </NavHashLink>
      <section id="videoHeader" className="video-section">
        <div className="video-container">{state.isGoogleChrome ? <video ref={videoRefGC} src={video} type="video/mp4" muted /* without 'muted' video wont play at all */ /> : <video src={video} ref={videoRef} type="video/mp4" muted={state.isMuted} autoPlay={false} loop />}</div>
        <div className="video-section-overlay"></div>
        <div className="video-section-nav" id="video-section-nav">
          <div className="video-section-nav-logo-box col-2">
            <img src={require("../images/logo_kd_pink.svg")} alt="Villa Kunterbunt Logo"></img>
          </div>
          <div className="video-section-nav-links col-8" id="video-section-nav-links">
            <NavHashLink smooth to="/#videoHeader" className="nav-link-text" aria-label="Link zum Anfang der Seite" activeClassName="active" id="HomeNavLink">
              Home
            </NavHashLink>
            <NavHashLink smooth to="/#mainContentSpiel" className="nav-link-text" aria-label="Link zu Informationen über das Spiel" activeClassName="active" id="Spiel">
              Das Spiel
            </NavHashLink>
            <NavHashLink smooth to="/#kontakt" className="nav-link-text" aria-label="Link zum Kontaktformular und anderen Kontaktmöglichkeiten" activeClassName="active" id="KontaktNavLink">
              Anmelden & Kontakt
            </NavHashLink>
          </div>
          {state.isGoogleChrome ? (
            <div id="play-controls" className="nav-video-controlls col-2">
              <span onClick={playHandler} data-for="reply" data-tip="Toggle Play" className={"icons-button"}>
                <i className="fas fa-play"></i>
              </span>
            </div>
          ) : (
            <div id="mute-controls" className="nav-video-controlls col-2">
              <span onClick={muteHandler} data-for="reply" data-tip="Toggle Sound" className={"icons-button"}>
                <i className="heartbeat fas"></i>
              </span>
            </div>
          )}

          <div id="play-controls" className="nav-video-controlls col-2 gc-ns">
            <span id="gcEL" data-for="reply" data-tip="Play Video" className={"icons-button"}>
              <i className="fas fa-play"></i>
            </span>
          </div>
          <div className="scrollDown slide-in-blurred-top" id="scrollDownPopUp">
            <button className="hax h-o-m" onClick={scrollHandler}>
              <p>scroll down</p>
              <i class="fas fa-chevron-down"></i>
            </button>
          </div>
        </div>
      </section>

      <div className="mobile-play-btn" id="mobilePlayBtn">
        <button className="d-o-m" onClick={mobilePlayHandler}>
          <i class="fas fa-play"></i>
        </button>
      </div>

      <section className="mainContentSpiel">
        <div id="mainContentSpiel">
          <Spiel />
        </div>
        <div id="kontakt">
          <Kontakt />
        </div>
        <Footer />
      </section>
    </Page>
  )
}

export default Home