视频自动播放不起作用 - 试图找到解决办法 [英] Video autoplay not working - Trying to find a fix

问题描述

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

我已经尝试过:

1. 自动播放
2. 自动播放
3. autoPlay="自动播放"

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

这是现在的代码.

<视频循环自动播放><source src={require('../../videos/background.mp4')} type="video/mp4"/></视频>

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

<Transition in={true} timeout={1000} 出现={true}>{(状态)=>(<div id="banner" className="video-foreground" style={{...transitionStyles[状态]}}><视频循环自动播放><source src={require('../../videos/background.mp4')} type="video/mp4"/></视频>
)}</过渡>

解决方案

在我的例子中添加了 静音 属性.

试试这个:

<块引用>

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

希望有帮助.

I have a video background in React. I want it to autoplay. Autoplay does not work.

I have tried:

1. autoplay
2. autoPlay
3. autoPlay="autoplay"

What I find particularly odd is that occasionally, it WILL work. But then it will stop.

Here is the code as it is right now.

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

Here is the entire section of the component. I'm using a transition, but as of last week, it didn't impact it.

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

解决方案

Well in my case added muted property.

Try this:

<video ... autoPlay muted />

Chrome 66 stops autoplay of all video that don't have the muted property.

Hope it helps.

这篇关于视频自动播放不起作用 - 试图找到解决办法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！