我有一个样式化组件,用于设置视频标签的样式。
const Video = styled.video`
...
`
我这样使用它
<Video width='200px' height='200px' autoplay='autoplay' muted loop>
<source src={img.src} type='video/mp4' />
</Video>
但是 autoplay
属性不起作用,当我使用 Devtools 检查元素时也不会显示。其他属性(如宽度、高度和循环(是可见的。
但是,当我使用普通视频标签时,自动播放会起作用,并且在我检查元素时可以看到它。
<video width='200px' height='200px' autoplay='autoplay' muted loop>
<source src={img.src} type='video/mp4' />
</video>
知道为什么样式组件无法识别自动播放属性吗?
尝试autoPlay
而不是autoplay
<Video ... autoPlay />
参考:
"自动播放"属性
如果您使用的是 NPM,则添加 react player 依赖项
npm install react-player --save
如果您使用的是 yarn,请添加反应播放器依赖项
yarn add react-player
在索引文件中导入反应播放器组件
import ReactPlayer from 'react-player';
现在您可以设置
<YourComponent url='https://www.youtube.com/linkhere' playing />
默认情况下,它是假的。您可以在道具中或条件内将其设置为 True。
我遇到了类似的问题,多亏了上面的答案,我可以解决它。
视频元素似乎适用于自动播放="自动播放"或自动播放,但是我必须手动重新加载页面才能使其工作。
<Video
autoplay="autoplay" // not working
autoPlay="autoPlay" // working
autoPlay // working
autoplay // not working
muted
loop
>
<source src={DroneShot} type="video/mp4" />
</Video>