视频自动播放不起作用 - 试图找到解决办法

IT技术 reactjs video
2021-05-18 01:38:59

我在 React 中有视频背景。我想让它自动播放。自动播放不起作用。

我努力了:

  1. 自动播放
  2. 自动播放
  3. 自动播放=“自动播放”

我觉得特别奇怪的是,偶尔它会起作用。但随后它会停止。

这是现在的代码。

<video loop autoPlay>
       <source src={require('../../videos/background.mp4')} type="video/mp4" />
</video>

这是组件的整个部分。我正在使用过渡,但截至上周,它并没有影响它。

<div className="video-background">
    <Transition in={true} timeout={1000} appear={true}>
        {(state) => (
          <div id="banner" className="video-foreground" style={{ 
                            ...transitionStyles[state]
                        }}>
                        <video loop autoPlay>
                            <source src={require('../../videos/background.mp4')} type="video/mp4" />
                        </video>
          </div>
        )}
     </Transition>
  </div>
4个回答

那么在我的情况下添加静音属性。

试试这个:

<video ... autoPlay muted />

Chrome 66 停止自动播放所有没有静音属性的视频

希望能帮助到你。

在我的例子中,React 中的视频没有播放,因为我没有将autoplay. 它必须是autoPlay

试试这个(它有效): autoPlay={true}

尝试 <video loop muted autoPlay controls = ''> ... </video>

显然,在放置控件时,可以播放视频,然后放置控件 = '',我们可以从控件中删除按钮并再次自动播放工作。