4

我正在使用 plyr 播放 YouTube 视频。我想data-plyr-provider从 html 文件中隐藏定义。它永远是 YouTube。

目前我正在使用此代码

<div class="container">
    <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="somegoogleid"></div>
</div>
<script src='https://web.con/124141/users/plyr/plyr.min.js'></script>
<script>
const player = new Plyr('#player', {});
// Expose player so it can be used from the console
window.player = player;
</script>

我要隐藏的是红框中的代码https://i.imgur.com/0BELK9V.png

我在想我可以修改plyr.min.js我正在使用的字符串 YouTube 并对其进行硬编码，但是在查看代码时我无法这样做。我的意思是我找不到合适的地方。

我发现的 .js 中唯一的参考data-plyr-provider是这一行

attributes: { embed: { provider: "data-plyr-provider", id: "data-plyr-embed-id" } },

有人可以帮忙吗？在哪里修改代码或者是否有任何其他方式如何隐藏plyr.min.js

4

1 回答 1

5

我不确定我真的需要在这里写下来，但是没有正式的方法可以将属性直接传递给Plyr构造函数。

因此，您可以自己分叉它，然后更改如下行：在 src/js/plyr.js 内的 plyr.js 上关闭以下行：#201、#205 并添加：

this.provider = 'youtube'; // on line #202

通过这种方式，您可以从“div”源创建 Plyr。

iframe 将保持原样。如果您提供 iframe，它将按原样工作。

毕竟：

npm run build

创建您自己的构建，然后使用 dist 文件夹中的 plyr.min.js 并执行以下操作：

<div id="player" data-plyr-id="https://www.youtube.com/watch?v=SF0w2B6DNUE"></div>

const player = new Plyr('#player');

// Expose player so it can be used from the console
window.player = player;

你去吧。使用 div creator 在线为 youtube 创建 plyr 规范的非官方方式 =)

更新#1：

就在更改之前，请检查到最后的生产版本。当你只是在主分支上做它可能会被打破=）

更新#2： 既然你告诉我你不知道该怎么做，我会试着解释一下。

所以首先，请访问https://github.com/sampotts/plyr

复制图片中的链接： 在此处输入图像描述

在这之后;

  • 打开终端和您的代码路径。
  • 类型git clone https://github.com/sampotts/plyr.git
  • 等到它完成并输入cd plyr
  • 安装依赖项npm i
  • 用一些 IDE 打开当前目录（可以是 vscode、sublime 或任何你用于编码的东西。）（code .将用 VSCode 打开它）

之后从下一张图片打开文件：

在此处输入图像描述

转到第 202 行，您将看到以下内容： 在此处输入图像描述

如果您在这里查找，您会看到这部分代码实际上是用于类型div的。如您所见，您可以从 #201 行获得提供程序：

this.provider = this.media.getAttribute(this.config.attributes.embed.provider)

所以注释掉这一行（#201）并将以下内容添加到#202行

this.provider = 'youtube';

并且不要忘记评论第 204 行，这使我们得到以下结果：

在此处输入图像描述

经过这些改动后，（相信你已经node安装好了）

  • 保存您所做的更改。
  • 再次打开终端。
  • 签出最后一个生产版本git checkout v3.6.2
  • 通过添加对 git 的更改git add .
  • 创建一个提交git commit -m "provider set to youtube only"
  • 然后构建代码npm run build

在这些步骤之后，您将从文件dist夹中的 js 和 css 文件中获得构建的代码。

请在执行以下操作之前备份您的 js 文件：

  • 将所需文件从dist/文件夹复制到您的服务器。（plyr.min.js 和 plyr.css）
  • 在你做完每一件事之后，

您应该能够从顶部使用所有内容。 在此处输入图像描述

我希望你最终可以使用它 =)

更新#3：

让我们也添加来自@Steve 的肮脏方式

@Radek，如果你走这条路，如果你有时间，你应该完成所有步骤，但如果你正在寻找快速而肮脏的东西，你可以搜索 plyr.min.js

this.provider=this.media.getAttribute(this.config.attributes.embed.provider),this.media.removeAttribute(this.config.attributes.embed.provider)

并将其替换为

this.provider='youtube'

于 2020-11-02T21:40:32.500 回答