Simple steps to modify video player

The discourse mp4 player is ugly, I was thinking about how to improve it and found this, which seems quite simple. The configuration method is also relatively simple, just need to include the css and js.

image1920×931 76.8 KB

image1860×1043 216 KB

image1097×1134 61 KB

image2118×748 49.8 KB

Add the js and css to the theme header

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

Project Introduction:

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

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.

e989579adc21815a61ea1975b2e73f71918c0755_2_1035x5011035×501 60.5 KB

b9bfaca59bcc39c1355c0165a5d5bdb421761b1f_2_1035x5791035×579 100 KB

f3b8e972c50be9506768a9ef0a7f08fa4cc1e653_2_724x750724×750 49.3 KB

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:

The content in the main text is incorrect and will cause bugs. When loading from the homepage, the player will not work. Below is what I paid $50 for someone to help me modify, shared for free with those in need. The player effect is very good and worth recommending!

Pros:
The color tone is quite matching
The player adapts to the screen from the beginning, rather than from small to large
More features

To publish, just add a video tag:

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

Add in the head, it’s best to download CSS and JS to your own CDN.

image1158×763 20.6 KB

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

Add in the main body

image1071×786 29.9 KB

<script type="text/javascript">

let curUrl = "";

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

</script>

Final effect:

You can also set subtitle clarity, etc.

image1920×934 96.6 KB

???

恕我直言 这是非常糟糕的代码，糟糕透了。
它将会每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>

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

How much next time I will find you, I can’t help it, I’ve been trying for a long time.

It’s fine, this is just a small gesture. We can talk about more challenging work next time.

(Of course, this doesn’t mean this job is very simple… you have to spend a lot of time reading enough discourse source code to quickly react to which API to call. And if you don’t pay, very few people will really spend time caring about what you want to achieve.)

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

This player is really easy to use, looks a bit better than the built-in one. What tasks are you taking on, boss?

Brother, why didn’t you show up earlier?

I just tested and compared, and this code renders quite quickly

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

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.