我尝试搜索堆栈溢出和谷歌,但没有找到可以帮助我的文章。即使我使用了自动播放,它也会显示暂停的视频。谁能帮帮我吗 ?我是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;
只需为autoplay属性设置名称或使用autoPlay
。此外,为视频设置muted
标记。 Chrome就像有声音的块自动播放视频一样。
https://www.theverge.com/2018/3/22/17150870/google-chrome-autoplay-videos-sound-mute-update
<video loop autoplay='' muted>
...
</video>
此外,由于浏览器使用源标签来检查兼容性并正确显示视频,因此您可以在所有源标签之后插入错误句子“您的浏览器不支持视频...”。仅当浏览器不支持所有源标记时才会显示它。
如@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`?