DigitalLearning

Управление видео (ускорение, замедление и т.д.)

❤️
Большое спасибо участнику сообщества Alex Vostretsov (@AlexVoff)!
Video preview
Весь гайд в формате видео
👀
Пример реализации можно посмотреть по этой ссылке.

Инструкция:

⚠️
Если у вас более одного видео в проекте, следует изменять номер [0] в коде. Можно воспользоваться простым циклом и массивом.
Пример цикла
//выбираем все видосы
let allVideosInCourse = document.getElementsByTagName("video"); 


for (let i = 0; i < allVideosInCourse.length; i++) { 
// перебираем их по порядку, подставляя i вместо номера
  allVideosInCourse[i].setAttribute("controls", "true"); 
// в данном случе - добавляем в видео контролы, но можно делать что угодно
}

Изменение размера видео

document.getElementsByTagName("video")[0].style.width = X + '%';
X - процент от начального размера видео. К примеру, уменьшение в два раза X = 50).
Чтобы видео изменялось относительно правой стороны, следует использовать этот код:
document.getElementsByTagName("video")[0].style.float = 'right';

Включение стандартного управления

⚠️
Визуально управление у каждого браузера своё.
document.getElementsByTagName("video")[0].setAttribute("controls", "true");

Отключение стандартного управления

document.getElementsByTagName("video")[0].removeAttribute('controls');

Полноэкранный режим

⚠️
На момент написания гайда не работает в MS Edge.
document.getElementsByTagName("video")[0].requestFullscreen();

Скорость воспроизведения

document.getElementsByTagName("video")[0].playbackRate = 0.3;
В примере 30% от нормальной скорости.

Зациклить видео

document.getElementsByTagName("video")[0].setAttribute("loop", "true");

Фулскрин

if (Full.requestFullscreen) { Full.requestFullscreen(); }
else if (Full.mozRequestFullScreen) {
Full.mozRequestFullScreen(); }
else if (Full.webkitRequestFullscreen) {
Full.webkitRequestFullscreen(); }
else if (Full.msRequestFullscreen) {
Full.msRequestFullscreen(); }
badge