React 样式组件无法识别视频标签的 HTML 属性 'autoplay'

Question

我有一个为视频标签设置样式的组件。

const Video = styled.video`
  ...
`

我也是这样用的

<Video width='200px' height='200px' autoplay='autoplay' muted loop>
  <source src={img.src} type='video/mp4' />
</Video>

但是 autoplay 属性不起作用，当我使用 Devtools 检查元素时也没有显示。其他属性如 width、height 和 loop 是可见的。

但是，当我使用普通视频标签时，自动播放有效，并且在我检查元素时可以看到。

<video width='200px' height='200px' autoplay='autoplay' muted loop>
  <source src={img.src} type='video/mp4' />
</video>

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

Answer 1

尝试 autoPlay 而不是 autoplay

<Video ... autoPlay />

参考：

'autoplay' attribute

Answer 2

如果您使用的是 NPM，则添加 React 播放器依赖项

npm install react-player --save

如果你正在使用 yarn 添加 react 播放器依赖项

yarn add react-player

在索引文件中导入 ReactPlayer 组件

import ReactPlayer from 'react-player';

现在您可以设置

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

默认情况下它是 False。您可以在 props 或条件内将其设置为 True。

Answer 3

我遇到了类似的问题，多亏了上面的回答，我才得以解决。

视频元素似乎可以使用 autoPlay="autoPlay" 或自动播放，但我必须手动重新加载页面才能使其正常工作。

<Video
    autoplay="autoplay" // not working
    autoPlay="autoPlay" // working
    autoPlay // working
    autoplay // not working
    muted
    loop
  >
    <source src={DroneShot} type="video/mp4" />
  </Video>

React 样式组件无法识别视频标签的 HTML 属性 'autoplay'

React styled-component not recognising HTML attribute 'autoplay' of video tag

html

javascript

css

reactjs

styled-components