В тексте есть ошибка, из-за которой возникает баг: при загрузке с главной страницы плеер не работает. Ниже я делюсь бесплатно решением, за которое заплатил $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>
Добавьте следующий код в тело страницы:
<script type="text/javascript">
let curUrl = "";
setInterval(() => {
let newUrl = location.href;
if (curUrl !== newUrl) {
curUrl = newUrl
if (document.querySelector("video")) {
new Plyr('video')
}
}
}, 10)
Итоговый результат:
Также можно настроить субтитры, качество и другие параметры.
