React js停止循环背景视频

Posted 2023-02-25

【中文标题】React js停止循环背景视频

【英文标题】：React js stop looping background video

【发布时间】：2018-11-21 22:39:30

【问题描述】：

我正在尝试使用React js 制作一个带有循环背景视频的页面。

当我编译代码时，我可以看到视频立即在浏览器上播放，但是当我点击网站链接时，视频没有播放。我应该点击页面中的Home 按钮并重新开始。

我用过

<video src=BackVideo autoplay="true" loop="true">

我无法使用：

react-native-video

库，因为我在代码中导入库时出错。

我还有一个问题是视频根本没有在Safari 中播放。

谁能帮帮我。

这是我的javascript 文件

render() 
    return (
      <div>
        <div className="bgded overlay">
        /* Menu, call the menu component with the ChangeViewButtonClick function recieved from Dashbaord */
          <Menu ChangeViewButtonClick=this.props.ChangeViewButtonClick />

        </div>

        <header className="v-header container">

      <div class="fullscreen-video-wrap">

        <video src=BackVideo autoplay="true" loop="true"> </video>

    </div>
    <div className="header-overlay"></div>
    <div className="header-content">

       <article>
              <h1 className="heading">Something</h1>
              <h2 className="heading">something too</h2>



            </article>

    </div>
       </header>

        /* Start of Overview */
        <div className="wrapper row3">
          <main className="hoc container clear">
            <article className="two_third first">
              <h4 className="font-x2 font-x3">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
                Exercitationem, nihil.
              </h4>


            </article>

          </main>
        </div>
        /* End of Overview */
      </div>

【参考方案1】：

我发现可能有人有同样的问题。

使用自动播放循环静音这样；

<video className='VideoTag' autoPlay loop muted>
      <source src=BackVideo type='video/mp4'/>
</video>