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

Question

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

import ReactPlayer from 'react-player'

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

如何像上图那样传递自定义播放按钮？

每当我通过 youtube link 时，youtube 的默认叠加层即将到来，我需要对其进行自定义。

Answer 1

YouTube 不允许自定义播放按钮。为此：

使用现有代码获取并放置 YouTube 视频
隐藏 YouTube 视频
创建与 YouTube 视频位于同一位置的 div
使用自定义图片或获取 YouTube 视频的缩略图并将其用作 div

background-image

将您的自定义播放按钮和自定义文本放在 div
点击按钮后，隐藏您的 div，显示启用自动播放的 YouTube 视频

Answer 2

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

The light prop will render a video thumbnail with simple play icon, and only load the full player once a user has interacted with the image. Noembed is used to fetch thumbnails for a video URL. Note that automatic thumbnail fetching for Facebook, Wistia, Mixcloud and file URLs are not supported, and ongoing support for other URLs is not guaranteed.

If you want to pass in your own thumbnail to use, set light to the image URL rather than true.

The styles for the preview image and play icon can be overridden by targeting the CSS classes react-player__preview, react-player__shadow and react-player__play-icon.

（强调）

SO-- 似乎要提供自定义预览图像，您可以将 JSX 重写为：

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

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

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

Custom overlay button and title on youtube video embedding into react

javascript

css

reactjs

react-player