在Next.js应用程序中使用YouTube嵌入式播放器

我需要一种在我发布会议演讲中发表笔记的页面中本地播放视频的方法。

屏幕截图在帖子页面顶部显示视频播放器。

方法1：iframe播放器

我采用的第一种方法是使用YouTube’s developer guide建议的<iframe> HTML标签。

使用第一个方法的代码是这样的。

<iframe
  src={"https://www.youtube.com/embed/" + video_id}
  title={video_title}
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>

您应该找到要嵌入的视频的video_id。 video_title可以是您想要的任何东西，但是我使用了视频中的标题。还有许多其他选项，例如链接播放列表。如果您想了解更多信息，请检查Supported Parameters reference。

如果您希望组件响应地行为，则应修复其长宽比。 Bevaise我的应用程序是使用tailwindcss，这是我发现的一种优雅的解决方案，因为它是使用tailwindcss-aspect-ratio插件。您可以将iframe包裹在这样的div中。

<div className=" w-full aspect-w-16 aspect-h-9">

iframe的性能

这种方法的主要缺点是它导致了性能的降低。 Lighthouse报告显示了以下问题。 >一些第三方资源可以懒洋洋地加载外墙

当我在PC上打开网页时，我还看到了一个很小的延迟来加载播放器。

这是报告中的图像，其中包含来自问题的更多详细信息。

如果您不介意性能的小降解，此方法仍然有用。另外，有很多方法可以解决这个问题。

方法2：react-lite-youtube-embed软件包

尝试了一些替代方案后，我找到了react-lite-youtube-embed包装，这是我需要的一切。

此软件包是由lite-youTube-embed创建的React组件，它是一个更受欢迎的软件包，具有对问题的一般网络解决方案。

此软件包真的很容易使用。

首先，您需要安装

yarn add react-lite-youtube-embed

或

npm install react-lite-youtube-embed -S

其次，导入软件包

import LiteYouTubeEmbed from "react-lite-youtube-embed"
import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css"

最后，使用LiteYouTubeEmbed组件。该组件还可以选择设置其中的纵横比，这非常有用。

<LiteYouTubeEmbed
  aspectHeight="{9}"
  aspectWidth="{16}"
  id="{video_id}"
  title="{video_title}"
/>

它还默认启用了一些隐私设置，它将尝试到达youtube-nocookie.com。这些可能与您的下一个。您可能需要将其添加到规则中，将其访问该页面。

react-lite-youtube-embed的性能

带有LiteYouTubeEmbed组件的灯塔报告的性能增长了7％。

结论

这两种方法都很棒且易于使用。两种方法的性能都是可比的。对于第二个，加载速度较短，但是您需要在项目中添加一个软件包。