Видеоплеер Plyr нету выбора качества

170

14 апреля 2022, 09:00

Установил плеер plyr на сайт, но в меню отображается только скорость. Как исправить что-бы появилось и качество?

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns:src="http://www.w3.org/1999/xhtml">
<head>
    <title th:text="${title}"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/frame.css}"/>
    <link rel="stylesheet" th:href="@{/plyr/plyr.css}" />
</head>
<body>
<div class="outer">
    <div class="middle">
        <div class="inner">
            <video id="player" class="plyr_player" crossorigin playsinline controls>
                <source source th:src="@{/films/f1.mp4}" type="video/mp4" size="720">
                <source source th:src="@{/films/f2.mp4}" type="video/mp4" size="420">
            </video>
            <p class="film_name">Голос</p>
        </div>
    </div>
</div>
<script th:src="@{/plyr/plyr.js}"></script>
<script>
    const player = new Plyr('#player', {
        title: 'Название',
    });
</script>
</body>
</html>

Answer 1

Скорее всего у вас какая-то проблема с неймспейсами/урлами в HTML.
Т.е. с thymeleaf, а не с plyr =)

Проверьте, что именно у вас рендерится в итоговом HTML.

Плеер сам формирует список «качество» исходя из <source> с разным size:

const player = new Plyr('#player');

<link rel="stylesheet" href="https://cdn.plyr.io/3.6.2/plyr.css" />
<script src="https://cdn.plyr.io/3.6.2/plyr.polyfilled.js"></script>
<video id="player" class="plyr_player" crossorigin playsinline controls>
  <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576" />
  <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720" />
  <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080" />
</video>