Несколько простых шагов для настройки видеоплеера video

Разработка
1

Встроенный в Discourse плеер для MP4 выглядит ужасно. Решил поискать способ улучшить его и наткнулся на это решение. Выглядит довольно минималистично, а настройка предельно проста: достаточно подключить CSS и JS.

image
image1920×931 76.8 KB

image
image1860×1043 216 KB

image
image1097×1134 61 KB

image
image2118×748 49.8 KB

Достаточно добавить 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

2

Перевод на русский язык: (с любезного разрешения discourse-ai :magic_wand:)

Видеоплеер MP4 в Discourse крайне непривлекателен. В ходе размышлений и поисков способов его улучшения я наткнулся на эту альтернативу. Она обладает определённым минималистичным шармом, а метод её настройки довольно прост. Достаточно подключить соответствующие CSS и JS, и всё заработает.

e989579adc21815a61ea1975b2e73f71918c0755_2_1035x501
e989579adc21815a61ea1975b2e73f71918c0755_2_1035x5011035×501 60.5 KB

b9bfaca59bcc39c1355c0165a5d5bdb421761b1f_2_1035x579
b9bfaca59bcc39c1355c0165a5d5bdb421761b1f_2_1035x5791035×579 100 KB

f3b8e972c50be9506768a9ef0a7f08fa4cc1e653_2_724x750
f3b8e972c50be9506768a9ef0a7f08fa4cc1e653_2_724x750724×750 49.3 KB

Просто добавьте вышеуказанные 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

3

В тексте есть ошибка, из-за которой возникает баг: при загрузке с главной страницы плеер не работает. Ниже я делюсь бесплатно решением, за которое заплатил $50 специалисту — оно отлично работает и его можно смело рекомендовать!

Преимущества:

  • Приятное цветовое сочетание
  • Плеер сразу адаптируется под размер экрана, а не увеличивается постепенно
  • Много функций

Для публикации достаточно просто использовать тег video:

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

Добавьте это в шапку страницы. Лучше всего загрузить CSS и JS-файлы на свой CDN.

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

Добавьте следующий код в тело страницы:

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

Итоговый результат:

Также можно настроить субтитры, качество и другие параметры.

image
image1920×934 96.6 KB

4

???

С позволения сказать, это ужасно плохой код, просто отвратительный.
Он запускает функцию каждые 10 миллисекунд, которая в 99% случаев ничего не делает, что является огромной тратой производительности.
Конечно, домашний компьютер справится с такими затратами… но это просто неэlegantно.

IMHO это очень плохой код, ужасный.
Он запускает функцию каждые 10 миллисекунд, которая в 99% случаев ничего не делает, что является огромной тратой производительности.
Конечно, домашний компьютер справится с такими затратами… но это просто неэlegantно.

Вам следует использовать API Discourse для выполнения этой задачи. Используйте это:

Вам следует использовать API Discourse для выполнения этой задачи. Используйте это:

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

Вам лучше нанять меня (просто шутка)

5

Сколько V? В следующий раз обращусь к тебе, другого выхода нет, сколько ни старался.

6

Ничего страшного, это пустяк. В следующий раз, если будет более сложная задача, обсудим.

(Конечно, это не значит, что эта задача простая… Чтобы быстро понять, какой API вызывать, нужно потратить много времени на изучение исходного кода Discourse. И если вы не платите, мало кто действительно потратит время, чтобы разобраться, что именно вы хотите реализовать.)

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

Этот плеер действительно удобен, выглядит чуть лучше встроенного. Какие задания вы выполняете, мастер?

9

:cry: Братан, почему ты не появился раньше?

10

Только что протестировал и сравнил — этот код рендерится быстрее:

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