ReactJS HTML5视频无法正常工作

Question

我在Stack Overflow和谷歌上搜索了，但没有找到能帮助我的文章。即使使用了自动播放，它仍然显示已暂停的视频。有人可以帮帮我吗？我是React.js的新手。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import * as ReactBootstrap from 'react-bootstrap';
import coverimg from './hw.jpg';
import covervid from './hw.mp4';
import covervidtwo from './hw.ogv';


class Slider extends Component {
  render() {
    return (
      <div className="">

               <video  loop autoplay>
                   <source src= { covervid } type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
                   <source src={ covervidtwo } type="video/ogg" />Your browser does not support the video tag. I suggest you upgrade your browser.
               </video>



      </div>
    );
  }
}

export default Slider;

- Adarsha Jha

---

这可能会有所帮助。 (https://dev59.com/xWMl5IYBdhLWcg3w9qzu) - Derek 朕會功夫

我发现一个问题，当我添加控件时，我可以使用播放按钮播放视频，在控制台上会显示警告消息：无效的DOM属性autoplay。你是不是指的是autoPlay？ 有人可以帮我写如何实现自动播放吗？ - Adarsha Jha

嗨@Adarsha Jha，您可以像以下方式使用： <video autoPlay> <source src={url} type="video/mp4" /> <Overlay /> </video> - Pavan kumar Dasireddy

Answer 1

正如@Pavan Kumar Dasireddy在评论中指出的那样，您需要使用autoPlay属性（注意大写P）。

<video  loop autoPlay>
    <source src= { covervid } type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
    <source src={ covervidtwo } type="video/ogg" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>

如果您查看控制台，您将看到:

Warning: Invalid DOM property `autoplay`. Did you mean `autoPlay`?

- nbwoodward

Answer 2

只需为autoplay属性设置名称或使用autoPlay。此外，为视频设置muted标签。例如，Chrome会阻止具有声音的自动播放视频。

https://www.theverge.com/2018/3/22/17150870/google-chrome-autoplay-videos-sound-mute-update

<video loop autoplay='' muted>
      ...
</video>

此外，由于浏览器使用源标签来检查兼容性并正确显示视频，因此您可以在所有源标签之后插入错误句子“您的浏览器不支持视频...”。仅当浏览器不支持所有源标签时才会显示该句子。

- Wender Xavier

Answer 3

谢谢，这对我有用！

这是我的代码

<video loop autoplay="" muted>
    <source src="./videos/video.mp4" type="video/mp4" />
</video>

- LEARN CHEMAPHY

---

请不要将“谢谢”作为答案。一旦您拥有足够的声望，您就可以投票支持您认为有帮助的问题和答案。- 来自审核 - Lajos Arpad