youtube视频中的自定义叠加按钮和标题

Question

​

​

​

​

需要有自定义播放按钮如下，还需要添加视频标题在任何位置上的视频。目前正在尝试react-player。如有任何帮助，将不胜感激。

import ReactPlayer from 'react-player'

<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />

如何通过像上面这样的自定义播放按钮？

​

​

当我通过youtube链接时，youtube的默认覆盖正在开始，我需要对其进行定制。

Answer 1

YouTube不允许自定义播放按钮。为实现这一目标：

1. 使用现有代码获取并放置YouTube视频
2. 隐藏YouTube视频
3. 创建一个定位在与div视频相同位置的YouTube
4. 使用自定义图像或获取YouTube视频的缩略图，并将其用作div的background-image。
5. 将自定义播放按钮和自定义文本放置在div中。
6. 单击按钮时，隐藏div，显示启用自动播放的YouTube视频

Answer 2

来自react文档中的“灯光播放器模式”

light道具将呈现带有简单播放图标的视频缩略图，并且只在用户与图像交互后加载完整的播放器。诺内用于获取视频URL的缩略图。请注意，不支持对Facebook、Wistia、Mixcloud和文件URL的自动缩略图获取，也不保证对其他URL的持续支持。 如果要传递自己的缩略图以便使用，请将light 设置为图像URL，而不是true.。 可以通过针对CSS类react-player__preview、react-player__shadow和react-player__play-icon来覆盖预览图像和播放图标的样式。

(强调后加)

因此--为了提供自定义预览图像，您可以将JSX重写为：

<ReactPlayer
    url="https://www.youtube.com/watch?v=ysz5S6PUM-U"
    light="path/to/your/preview/image"
/>

因此，您可以通过自定义预览图像来完成这一任务。如果您需要更动态的东西，其中按钮有它自己的悬停状态，您可能需要从零开始旋转一些东西，或者找到一个不同的库。