时间戳

首页 > 解决方案 > 如何自定义嵌入式 YouTube 视频播放器？

iframe - 如何自定义嵌入式 YouTube 视频播放器？

问题描述

当您使用其提供的代码嵌入 YouTube 视频时<iframe>：您无法隐藏标题和其他几个“功能”。

在一天之内，可以使用参数禁用其中一些功能。截至目前：它们已被弃用。

所以，现在我留下了一个需要嵌入 YouTube 视频的客户端，而没有我们在将鼠标悬停在视频上时看到的所有垃圾：标题、相关视频、频道徽标等。

标签： iframeyoutube

解决方案

根据我的研究，无法禁用标题和其他一些功能：无论是使用 URL 参数还是 CSS+JS。

虽然，我提出了一个具有很大潜力的解决方案：不仅为了用户的隐私，而且为了用户体验。这个解决方案是：

  1. 找出一种提取 YouTube 视频源 URL 的方法；
  2. <video>在or中使用提取的 URL <iframe>；
  3. 复制 YouTube 播放器风格。

对于第一部分，我使用了 Invidious API。但我认为您也可以创建一个youtube-dl用于提取视频 URL (?) 的 API。

在我的测试中，我什至不必安装自己的 Invidious 实例：我使用了公共 API 端点：

https://yewtu.be/latest_version?id=dasdsa312&itag=84

在哪里：

  • id：视频ID；
  • itag：视频流格式代码。

然后，我编写了 JavaScript 代码：

  • 动态获取所有可用的 Invidious 公共实例；
  • 生成具有许多不同视频质量和可用实例的源的视频元素。

这些来源是根据我的网站 URL 中可用的查询参数生成的：

https://riservato-xyz.frama.io/watch/?v=gprAWYQ47uY

考虑到这一点，每当我需要定制的 YouTube 播放器时，我都可以使用自己的网站嵌入 YouTube 视频。

我知道测试网站（以前的网址）确实很慢。虽然，这是因为我没有使用我自己的 Invidious 实例，而是依赖于公共实例。但它有效！

<iframe width="560" 
        height="315" 
        src="https://riservato-xyz.frama.io/watch/?v=W_xIBfrdxQU" frameborder="0"></iframe>

推荐阅读