嵌入到反应中的 youtube 视频上的自定义叠加按钮和标题答案

【问题标题】：Custom overlay button and title on youtube video embedding into react嵌入到反应中的 youtube 视频上的自定义叠加按钮和标题
【发布时间】：2021-11-06 23:49:15
【问题描述】：

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

import ReactPlayer from 'react-player'

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

如何传递上图的自定义播放按钮？

每当我传递 youtube 链接时，youtube 的默认叠加层就会出现，我需要对其进行自定义。

【问题讨论】：

我建议查看How to Ask，然后查看此问题。你错过了一些关键项目——例如，你没有包含代码，你在这篇文章中没有任何问题。没有问题，很难提供“答案”。祝你好运，编码愉快！
感谢您的建议，更新帖子

标签： javascript css reactjs react-player

【解决方案1】：

YouTube 不允许自定义播放按钮。要实现这一点：

使用现有代码获取和放置 YouTube 视频
隐藏 YouTube 视频
创建一个div，该div 与 YouTube 视频位于同一位置
使用自定义图片或获取 YouTube 视频的缩略图并将其用作 div 的background-image
在 div 中放置自定义播放按钮和自定义文本
点击按钮后，隐藏您的 div，显示启用自动播放的 YouTube 视频

【讨论】：

【解决方案2】：

来自react-player documentation for "light player mode"：

light 道具将呈现带有简单播放图标的视频缩略图，并且仅在用户与图像交互后才加载完整的播放器。 Noembed 用于获取视频 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"
/>

因此，您可以使用自定义预览图像来完成此操作。如果您需要更动态的东西，其中按钮有自己的悬停状态，您可能需要从头开始旋转某些东西或找到不同的库。

【讨论】：