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

如果您正在使用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 。

Answer 2

尝试autoPlay而不是autoplay

<Video ... autoPlay />

参考：

'autoplay' attribute

Answer 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>

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

3 个答案: