简单几步修改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 )

The MP4 player of Discourse is egregiously unappealing. In my contemplation and exploration to ameliorate it, I stumbled upon this alternative. It exudes a certain minimalistic charm, and its setup methodology is fairly straightforward. Inclusion of the respective CSS and JS does the trick.

Simply integrate the aforementioned JS and CSS into the header of your theme:

<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>

For a comprehensive introduction to the project, kindly visit:

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

[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>