如何在 React 中加载和播放 Youtube 视频答案

【问题标题】：How to load and play a Youtube video in React如何在 React 中加载和播放 Youtube 视频
【发布时间】：2020-06-01 01:04:05
【问题描述】：

目前我正在尝试构建一个应包含 YouTube 链接 "https:\/\/www.youtube.com\/watch?v=IEDEtZ4UVtI" 的应用程序。所以第一次尝试运行它是 O<video className="video" src="https:\/\/www.youtube.com\/watch?v=IEDEtZ4UVtI"></video>，但正如您可能看到的那样，它不会像预期的那样工作。其他选项是什么。请记住，我的 API 中没有任何嵌入式链接，因此您看到的第一个 YouTube 链接只有一个我应该使用的链接。

【问题讨论】：

标签： reactjs iframe youtube

【解决方案1】：

以前可以像这样嵌入 Youtube 视频：

<video controls="true">
    <source src="www.youtube.com/watch?v=IEDEtZ4UVtI" type="video/mp4">
</video>

...但不再是了。

唯一的选择是使用通常的 iframe 嵌入，它与 React 应用程序配合得很好。您只需要使用您拥有的链接中的 Youtube 视频 ID，并将其放入嵌入链接 https://youtube.com/embed/${youtubeID}?autoplay=0 中。

const [youtubeID] = useState('IEDEtZ4UVtI')

[...]

<iframe className='video'
        title='Youtube player'
        sandbox='allow-same-origin allow-forms allow-popups allow-scripts allow-presentation'
        src={`https://youtube.com/embed/${youtubeID}?autoplay=0`}>
</iframe>

【讨论】：

【解决方案2】：

有一个简单的方法；

首先安装：

$ npm install react-youtube

导入：

import YouTube from 'react-youtube';

和用法-

<YouTube videoId="IEDEtZ4UVtI"/>

你可以看到 react-youtube 的更多选项here

【讨论】：