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>
プロジェクト紹介：
英語翻訳: (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>
プロジェクトの詳細については、以下をご覧ください。
本文中的内容有误，会产生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)
</script>
最终效果：
还可以设置字幕清晰度等
???
恕我直言 这是非常糟糕的代码，糟糕透了。
它将会每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）
Vいくらですか？次回はあなたを探します。仕方ないです。長い間やっていました。
大丈夫ですよ、これはほんの些細なことです。もっとやりがいのある仕事があれば、また話しましょう。
（もちろん、この仕事が簡単だという意味ではありません……APIを素早く呼び出すには、十分な量のdiscourseソースコードを読み込むのに多くの時間を費やす必要があります。また、お金を払わないと、あなたが何を実装したいのか、本当に気にかけてくれる人はほとんどいません。）
<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>
このプレーヤーは本当に使いやすいです。標準のものより少し見栄えが良いです。あなたはどのようなタスクを引き受けますか？
兄弟、どうしてもっと早く現れなかったの
コードのレンダリングが速いか、少しテストして比較しました。
<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.