如何从 html 代码中隐藏/屏蔽 data-plyr-provider

Question

我正在使用 plyr 播放 YouTube 视频。我想隐藏 html 文件中的 data-plyr-provider 定义。永远是 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>

我要隐藏的是红框内的代码

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

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

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

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

Answer 1

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

所以你可以自己分叉，然后像下面这样更改行：在 plyr.js 里面 src/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;

好了。 un-offical 与 div 创作者在线创建 plyr 规格的方法 =)

更新#1：

就在更改之前，请检查最后一个生产版本。当你只是在 master 分支上做它可能会被破坏 =)

更新#2： 所以既然你告诉我你不知道怎么做，我会尽力解释。

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

从图像中复制 link：

在此之后；

打开一个终端和你的代码路径。
输入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 add .
使用 git commit -m "provider set to youtube only"
然后使用 npm run build

完成这些步骤后，您将获得来自 js 的构建代码和来自 dist 文件夹的 css 文件。

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

将所需文件从 dist/ 文件夹复制到您的服务器。 (plyr.min.js 和 plyr.css)
完成所有操作后，

您应该可以使用顶部的所有内容。

希望你终于可以使用了=)

更新#3：

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

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

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

并将其替换为

this.provider='youtube'

如何从 html 代码中隐藏/屏蔽 data-plyr-provider

how to hide / mask data-plyr-provider from html code

javascript

plyr.js