<div class="o-player o-player-video">
…
</div>
<div class="o-player o-player-video o-player-video-playing">
…
</div>
<div class="o-player o-player-video o-player-video-playing o-player-video-loading">
…
</div>
<div class="o-player o-player-video">
<div class="o-player-frame">
<video class="o-player-media">
<div class="o-player-controls">
<div class="o-player-bar o-player-seeker o-player-seeker-short"></div>
</div>
</div>
</div>
<div class="o-player o-player-video">
<div class="o-player-frame">
<video class="o-player-media">
<div class="o-player-controls">
<div class="o-player-bar o-player-seeker o-player-seeker-long"></div>
</div>
</div>
</div>
<div class="o-player o-player-video">
<div class="o-player-frame">
<video class="o-player-media">
<div class="o-player-controls">
<div class="o-player-bar o-player-seeker o-player-seeker-short">
<div class="o-player-bar o-player-loaded" style="width:70%"></div>
</div>
</div>
</div>
</div>
<div class="o-player o-player-video">
<div class="o-player-frame">
<video class="o-player-media">
<div class="o-player-controls">
<div class="o-player-bar o-player-seeker o-player-seeker-short">
<div class="o-player-bar o-player-loaded" style="width:70%"></div>
<div class="o-player-bar o-player-played" style="width:50%"></div>
</div>
</div>
</div>
</div>
<div class="o-player o-player-video">
<div class="o-player-frame">
<video class="o-player-media">
<div class="o-player-controls">
<div class="o-player-bar o-player-seeker o-player-level">
<div class="o-player-bar o-player-loaded" style="width:50%"></div>
</div>
</div>
</div>
</div>
Уровень звука позволяет плавно регулировать громость. Три диапазона уровня звука влияют на отображение кнопки звука:
<div class="o-player o-player-video">
<div class="o-player-frame">
<video class="o-player-media">
<div class="o-player-controls">
<div class="o-player-button o-player-volume o-player-volume-0"></div>
<div class="o-player-bar o-player-seeker o-player-level">
<div class="o-player-bar o-player-loaded" style="width:0%"></div>
</div>
</div>
</div>
</div>
<div class="o-player o-player-video">
<div class="o-player-frame">
<video class="o-player-media">
<div class="o-player-controls">
<div class="o-player-button o-player-volume o-player-volume-50"></div>
<div class="o-player-bar o-player-seeker o-player-level">
<div class="o-player-bar o-player-loaded" style="width:50%"></div>
</div>
</div>
</div>
</div>
<div class="o-player o-player-video">
<div class="o-player-frame">
<video class="o-player-media">
<div class="o-player-controls">
<div class="o-player-button o-player-volume o-player-volume-100"></div>
<div class="o-player-bar o-player-seeker o-player-level">
<div class="o-player-bar o-player-loaded" style="width:100%"></div>
</div>
</div>
</div>
</div>
<body class="o-player-body">
<div class="o-player o-player-video o-player-video-fullscreen">
<video class="o-player-media">
</div>
</body>
Основа для полноэкранного режима. После его включения производятся рассчёты размеров окна и видео для установки дополнительных классов.
<div class="o-player o-player-video o-player-video-fullscreen o-player-video-fullscreen-horizontal">
<video class="o-player-media" style="top:Npx">
</div>
Режим включается, если ширина видео равна ширине окна и высота видео меньше или равна высоте окна. Иначе говоря, видео либо точно вписывается, либо оставляет горизонтальные чёрные полосы сверху и снизу. Видео автоматически вписывается по ширине и центрируется по вертикали при помощи сдвига сверху.
<div class="o-player o-player-video o-player-video-fullscreen o-player-video-fullscreen-horizontal-fit">
<video class="o-player-media" style="left:-Npx">
</div>
Режим предназначен для вписывания видео на основе его высоты для избавления от горизонтальных полос сверху и снизу. Видео автоматически вписывается по высоте и центрируется по горизонтали при помощи отрицацтельного сдвига влево. В зависимости от пропорций окна, теряются боковые части видео.
<div class="o-player o-player-video o-player-video-fullscreen o-player-video-fullscreen-vertical">
<video class="o-player-media" style="left:Npx">
</div>
Режим включается, если высота видео равна высоте окна и ширина видео меньше ширины окна. Иначе говоря, видео всегда оставляет по бокам чёрные вертикальные полосы. Видео автоматически вписывается по высоте и центрируется по горизонтали при помощи сдвига слева.
<div class="o-player o-player-video o-player-video-fullscreen o-player-video-fullscreen-vertical-fit">
<video class="o-player-media" style="top:-Npx">
</div>
Режим предназначен для вписывания видео на основе его ширины для избавления от вертикальных полос по бокам. Видео автоматически вписывается по ширине и центрируется по вертикали при помощи отрицательного сдвига наверх. В зависимости от пропорций окна, теряются верхняя и нижняя части видео.
<div class="o-player o-player-audio">
…
</div>
Поведение всех элементов для аудио-плеера аналогично тем, что были описаны для видео-плеера. Отсутствуют только контролы и состояния для полноэкранного режима. Присутствуют состояния «запущено» и «загружается»:
<div class="o-player o-player-audio o-player-audio-playing">
…
</div>
<div class="o-player o-player-audio o-player-audio-loading">
…
</div>