我有一个样式化的视频标签组件。
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>
知道为什么样式组件无法识别自动播放属性?
答案 0 :(得分:5)
如果您正在使用NPM,请添加反应播放器依赖项
npm install react-player --save
如果您正在使用纱线添加反应玩家依赖
yarn add react-player
导入索引文件
中的ReactPlayer组件import ReactPlayer from 'react-player';
现在你可以设置
<YourComponent url='https://www.youtube.com/linkhere' playing />
默认情况下,错误。 您可以在道具中或条件内将其设置为 True 。
答案 1 :(得分:4)
答案 2 :(得分:0)
我遇到了类似的问题,多亏了上面的答案,我才能解决它。
视频元素似乎可以与 autoPlay="autoPlay" 或 autoPlay 一起使用,但是我必须手动重新加载页面才能使其正常工作。
<Video
autoplay="autoplay" // not working
autoPlay="autoPlay" // working
autoPlay // working
autoplay // not working
muted
loop
>
<source src={DroneShot} type="video/mp4" />
</Video>