视频自动播放不起作用-尝试查找修复

Question

我在React中有一个视频背景。我要它自动播放。自动播放不起作用。

我试过了：

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

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

这是现在的代码。

<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>

Answer 1

就我而言，React 中的视频无法播放，因为我没有大写autoplay。它一定要是autoPlay。

Answer 2

好吧，在我的情况下添加了静音属性。

尝试以下操作： <video ... autoPlay muted /> Chrome 66停止自动播放所有不具有“静音”属性的视频。

希望能帮助到你。

Answer 3

试试这个（它有效）： autoPlay={true}

Answer 4

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

显然，当放置控件时，可以播放视频，然后放置控件=''，我们可以从控件中删除按钮，并且自动播放再次起作用。

Answer 5

I used useRef and the problem of not playing the video was solved.

const vidRef=useRef();

useEffect(() => { vidRef.current.play(); },[]);

<video
  src="/videos.mp4"
  ref={ vidRef }
  muted
  autoPlay
  loop 
/>