简单几步修改video视频播放器

[zengyunsi (运思 曾)]

discourse的mp4播放器丑到爆，寻思怎么改进一下，找到了这个，感觉还挺简约的，配置方法也比较简单，只需要引入css和js即可。

在主题页头加入js和css即可

<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css">
<script src="https://cdn.plyr.io/3.6.12/plyr.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const player = new Plyr('video');
        });
    </script>

项目介绍：

分享一个开源免费、功能强大的视频播放器库

[JammyDodger]

English translation: (courtesy of discourse-ai )

Discourse 的 MP4 播放器非常难看。在我想方设法改进它的过程中，我偶然发现了这个替代方案。它散发出一种简约的魅力，并且设置方法相当简单。包含相应的 CSS 和 JS 即可搞定。

只需将上述 JS 和 CSS 集成到您的主题的标题中：

<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css">
<script src="https://cdn.plyr.io/3.6.12/plyr.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const player = new Plyr('video');
        });
    </script>

有关该项目的全面介绍，请访问：

https://mp.weixin.qq.com/s?__biz=MzI2MzEwNTY3OQ==&mid=2648985399&idx=1&sn=4736244185148aa38aa931d10a320e6e&chksm=f25012d7c5279bc12aa26b0864d2600330ac8da243720695240d90b003685fcff4587fe9b331&scene=27

[zengyunsi (运思 曾)]

正文中的内容有误，会产生bug，从主页加载的时候，播放器不会生效，下面是我花$50请人帮我修改的 ，免费分享给有需要的人，播放器效果很好，值得推荐！

优点：
色调比较搭配
播放器一开始就是适应屏幕的，而不是从小到大
功能较多

发布，有video标签即可

<video controls>
        <source src="https://xxxx/test.mp4" type="video/mp4">
    </video>

在头部添加，css和js最好下载到自己的cdn中。

<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css">
<script src="https://cdn.openfa.net/css/plyr.js"></script>

在正文body中添加

<script type="text/javascript">

let curUrl = "";

setInterval(() => {
    let newUrl = location.href;
    if (curUrl !== newUrl) {
        curUrl = newUrl
        if (document.querySelector("video")) {
            new Plyr('video')
        }
    }
}, 10)
 

最终效果：

还可以设置字幕清晰度等

[Lhc_fl (Linca)]

@zengyunsi

setInterval(() => {
    let newUrl = location.href;
    if (curUrl !== newUrl) {
        curUrl = newUrl
        if (document.querySelector("video")) {
            new Plyr('video')
        }
    }
}, 10)
 

???

恕我直言 这是非常糟糕的代码，糟糕透了。
它将会每10毫秒运行一个99%的时间内都不会起作用的函数，极大的浪费性能。
当然，家用计算机支撑得住这种花销……但它实在是太不优雅了。

IMHO this is very bad code, awful.
It will run a function every 10 milliseconds that will not work 99% of the time, which is a huge waste of performance.
Sure, a home computer could support the expense… but it’s just so inelegant

你应该使用discourse的API来完成这项工作。使用这个：

You should use discourse’s API to do this. use this:

<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
        if (document.querySelector("video")) {
            new Plyr('video');
        }
});
</script>

@zengyunsi

下面是我花$50请人帮我修改的

你应该干脆找我的（just kidding）

[zengyunsi (运思 曾)]

@Lhc_fl

<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
        if (document.querySelector("video")) {
            new Plyr('video');
        }
});
</script>

V多少 下次找你 没办法啊 弄了半天

[Lhc_fl (Linca)]

没事，这个就是举手之劳。下次有更挑战性的工作再说。

（当然这个意思不是说这项工作很简单……你要去花很多时间读足够多的discourse源代码才能快速反应调哪个api。而且你不花钱也很少会有人真的花时间去关心你到底要实现什么。）

[hawm]

  <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
  <script type="text/discourse-plugin" version="1.8">
    api.decorateCookedElement(elem => elem.querySelectorAll('video').forEach((e) => { new Plyr(e) }));
  </script>

[zengyunsi (运思 曾)]

这个播放器确实挺好用，比自带的好看一点，大佬接什么任务

[zengyunsi (运思 曾)]

兄弟 你怎么不早点出现

[zengyunsi (运思 曾)]

刚测试对比了一下，这段代码渲染比较快

<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<script type="text/discourse-plugin" version="1.8">
  api.decorateCookedElement(elem => elem.querySelectorAll('video').forEach((e) => {new Plyr(e)}));
</script>