React样式组件无法识别视频标记的HTML属性"自动播放"

Question

我有一个样式组件,可以设置视频标签的样式.

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>

知道为什么样式组件无法识别自动播放属性？

Answer 1

尝试autoPlay代替autoplay

<Video ... autoPlay />

参考：

“自动播放”属性

Answer 2

如果您正在使用NPM,则添加react player依赖项

npm install react-player --save

如果您正在使用纱线添加反应玩家依赖

yarn add react-player

在索引文件中导入ReactPlayer组件

import ReactPlayer from 'react-player';

现在你可以设置

<YourComponent url='https://www.youtube.com/linkhere' playing />

默认情况下是假的.您可以在道具中或在条件内将其设置为True.