反应js html5视频不起作用

Posted 2023-03-05

【中文标题】反应js html5视频不起作用

【英文标题】：react js html5 video not working

【发布时间】：2018-04-01 09:33:54

【问题描述】：

我尝试在堆栈溢出和谷歌上搜索，但没有找到可以帮助我的文章。即使我使用了自动播放，它也会显示暂停的视频。谁能帮帮我吗 ？我是 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;

【问题讨论】：

This might be helpful.

我发现了一件事，当我添加控件时，我可以使用播放标志播放视频，并在控制台中播种警告无效的 DOM 属性autoplay。你的意思是autoPlay？有人可以帮我写自动播放吗？

嗨@Adarsha Jha，你可以像下面这样使用

【参考方案1】：

正如@Pavan kumar Dasireddy 在 cmets 中所述，您希望使用 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`?

【参考方案2】：

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

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

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

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