discourse的mp4播放器丑到爆，寻思怎么改进一下，找到了这个，感觉还挺简约的，配置方法也比较简单，只需要引入css和js即可。 [image] [image] [image] [image] 在主题页头加入js和css即可 document.addEventListener('DOMContentLoaded', function () { const player = new Plyr('video'); }); 项目介绍： https://mp.weixin.qq.com/s?__biz=MzI2MzEwNTY3OQ==&mid=2648985399&idx=1&sn=4736244185148aa38aa931d10a320e6e&chksm=f25012d7c5279bc12aa26b0864d2600330ac8da243720695240d90b003685fcff4587fe9b331&scene=27

api.decorateCookedElement(elem => elem.querySelectorAll('video').forEach((e) => {new Plyr(e)}));

English translation: (courtesy of discourse-ai :magic_wand:) 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_1035x501] [b9bfaca59bcc39c1355c0165a5d5bdb421761b1f_2_1035x579] [f3b8e972c50be9506768a9ef0a7f08fa4cc1e653_2_724x750] Simply integrate the aforementioned JS and CSS into the header of your theme: document.addEventListener('DOMContentLoaded', function () { const player = new Plyr('video'); }); For a comprehensive introduction to the project, kindly visit: https://mp.weixin.qq.com/s?__biz=MzI2MzEwNTY3OQ==&mid=2648985399&idx=1&sn=4736244185148aa38aa931d10a320e6e&chksm=f25012d7c5279bc12aa26b0864d2600330ac8da243720695240d90b003685fcff4587fe9b331&scene=27

正文中的内容有误，会产生bug，从主页加载的时候，播放器不会生效，下面是我花$50请人帮我修改的，免费分享给有需要的人，播放器效果很好，值得推荐！优点：色调比较搭配播放器一开始就是适应屏幕的，而不是从小到大功能较多发布，有video标签即可在头部添加，css和js最好下载到自己的cdn中。 [image] 在正文body中添加 [image] let curUrl = ""; setInterval(() => { let newUrl = location.href; if (curUrl !== newUrl) { curUrl = newUrl if (document.querySelector("video")) { new Plyr('video') } } }, 10) 最终效果：还可以设置字幕清晰度等 [image]

[图片] 运思曾: 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: api.onPageChange(() => { if (document.querySelector("video")) { new Plyr('video'); } }); [图片] 运思曾: 下面是我花$50请人帮我修改的你应该干脆找我的（just kidding）

[图片] Linca: api.onPageChange(() => { if (document.querySelector("video")) { new Plyr('video'); } }); V多少下次找你没办法啊弄了半天

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

:smiling_face_with_tear: 兄弟你怎么不早点出现

刚测试对比了一下，这段代码渲染比较快 api.decorateCookedElement(elem => elem.querySelectorAll('video').forEach((e) => {new Plyr(e)}));

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

Development

zengyunsi (运思曾) 2023 年9 月 17 日 08:13 8

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

话题		回复	浏览量
How to embed JavaScript script in front of ,</body> tag Development	7	816	2023 年9 月 16 日
Discourse Video Inline Plugin	0	244	2026 年1 月 26 日
I want to install the plyr Marketplace	1	551	2023 年9 月 16 日
YouTube PiP & Topic Playlist Player Theme component	1	224	2026 年7 月 4 日
Automatically playing mp4 uploaded file Product Support	4	1098	2023 年10 月 5 日

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

相关话题