Видео

Тип

00:00
00:00
		<div class="o-player o-player-video">
		
		</div>
	

Запущено

00:00
00:00
		<div class="o-player o-player-video o-player-video-playing">
		
		</div>
	

Загружается

00:00
00:00
		<div class="o-player o-player-video o-player-video-playing o-player-video-loading">
		
		</div>
	

Короткий лейбл, до 99 минут

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

Длинный лейбл, до 99 часов

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

Загружено 70%

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

Проиграно 50%

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

Уровень звука на 50%

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

Уровень звука позволяет плавно регулировать громость. Три диапазона уровня звука влияют на отображение кнопки звука:

Кнопка звука на 0%

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

Кнопка звука на 0–50%

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

Кнопка звука на 50–100%

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

Режим предназначен для вписывания видео на основе его ширины для избавления от вертикальных полос по бокам. Видео автоматически вписывается по ширине и центрируется по вертикали при помощи отрицательного сдвига наверх. В зависимости от пропорций окна, теряются верхняя и нижняя части видео.

Аудио

Тип

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