React styled-component 无法识别视频标签的 HTML 属性“自动播放”

Posted 2023-02-22

【中文标题】React styled-component 无法识别视频标签的 HTML 属性“自动播放”

【英文标题】：React styled-component not recognising HTML attribute 'autoplay' of video tag

【发布时间】：2018-09-27 00:14:18

【问题描述】：

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

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>

知道为什么 styled-component 不能识别 autoplay 属性吗？

【问题讨论】：

自 2018 年 4 月起，Chrome 已更改其自动播放政策：developers.google.com/web/updates/2017/09/…

这不是样式组件问题。这与 React 语义属性更改有关，例如 htmlFor 而不是 for 属性。将其更改为 autoPlay 应该可以修复它

【参考方案1】：

尝试autoPlay 而不是autoplay

<Video ... autoPlay />

参考：

'autoplay' attribute

【参考方案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 或者 condition 里面设置为 True。

【参考方案3】：

我遇到了类似的问题，感谢上面的答案，我可以解决它。

视频元素似乎可以使用 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>