视频自动播放无法正常工作 - 尝试找到解决方法

Question

我在React中有视频背景。 我希望它能自动播放，但自动播放无效。

我尝试过：

1. autoplay
2. autoPlay
3. autoPlay="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>

- J Seabolt

---

你的渲染函数中为什么要使用匿名函数？state之前不可用吗？ - Nick

尝试在视频元素中添加 "muted"。如果这样做不起作用，请完全删除视频的音频编码，并将元素上的 "muted" 属性一并移除。请查看以下文章：https://blog.google/products/chrome/improving-autoplay-chrome/，https://developers.google.com/web/updates/2017/09/autoplay-policy-changes。 - Eric Goncalves

静音做到了。谢谢您先生。那是一个令人讨厌的细节需要担心。 - J Seabolt

Answer 1

在我的情况下，我添加了 muted 属性。

尝试一下这个：

<video ... autoPlay muted />

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

- Sergio Reis

---

谢谢，它在 'video-react' 的播放器中也像魔法一样正常工作，就像这样 '<Player src="/rain.mp4" autoPlay loop muted></Player>'。 - Nadeem Khan

可以了。在我的情况下，错误是我将autoplay（P）写成小写字母。当我改为autoPlay时，一切都按预期工作了。 - Squapl Recipes

经过长时间的研究，它完美地工作了。感谢@Sergio Reis。 - Pullat Junaid

这个答案应该被接受！谢谢。 - Arman Karimi

谢谢，现在工作正常。从用户体验的角度来看，这似乎是一个好主意，但很少有人提到它是现代浏览器的必要条件。 - Bender

Answer 2

在我的情况下，React中的视频无法播放是因为我没有将 autoplay 大写。正确的写法是 autoPlay。

- Ludder

---

哦，我的天啊！你就是真理。 - murage kibicho

Answer 3

试一下这个（它可行）：autoPlay={true}

- Marrix

---

很抱歉听到这个问题 - 你是否知道花括号 {...} 而不是圆括号 (...)? 这对我有效。如果这是一个愚蠢的评论，提前向你道歉 :-) - Marrix

当你不确定时，读取文档...查看基类。在这种情况下（假设是JSX），我们从video元素开始，它扩展了JSXBase.VideoHTMLAttributes，该属性又扩展了MediaHTMLAttributes，再往下就不用看了。我们的autoplay属性就在这里定义：interface MediaHTMLAttributes<T> extends HTMLAttributes<T> { autoPlay?: boolean; autoplay?: boolean | string; 与HTML不同的是，HTML元素要么需要字符串“autoplay”，要么什么都不需要，但我们可以看到JSX处理方式不同。 - Andrew E

Answer 4

尝试 <video loop muted autoplay controls = ''> ... </video>。 显然，在放置控件时，可以播放视频，然后使用controls = ''移除控件按钮，autoplay就能再次工作。

- Gabriel Duete

---

在React中运行得非常好，视频自动播放并循环。 - Maheen Saleh

Answer 5

我使用了useRef，问题得到解决，视频可以正常播放。

const vidRef=useRef();

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

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

- STOOORMIX

Answer 6

只有在视频静音时才能正常工作，请添加 muted 属性

<div>
    <video src="/assets/loading.mp4" loop autoPlay muted className="h-[300px] w-auto" ></video>            
</div>

- Labhansh Satpute

Answer 7

自动播放与静音和控件

     <video controls  muted  autoPlay > 
              <source type="video/webm" src=".../.webm" />
     </video>

- Naveen Nizam

---

与最受欢迎的答案相同。没有新内容。 - Ritik Banger

@RitikBanger，它不仅适用于“muted”或“controls =' '”，必须编写正确的“controls”才能正常工作。 - Naveen Nizam

Answer 8

如果你不想将视频静音，考虑以下相反的方法：

在 useEffect 中静音，然后再取消静音。

import React, { useEffect, useRef } from "react";
...

const vidRef = useRef();

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

...
<video autoPlay controls loop muted ref={vidRef}>
    <source
       src={"/url_to_video.mp4"}
       type="video/mp4"
    />
</video>
...

百分之百有效

- Artemesian

Answer 9

import video from 'src/../../video'
    
<video muted autoPlay loop>
      <source src={video} />    
</video>

- Navin Negi

Answer 10

好的.. 你可以试试这个

autoplay=""

像这样

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

- Majdi Mohammad