Skip to content

Latest commit

 

History

History
383 lines (269 loc) · 9.4 KB

19_video-js.md

File metadata and controls

383 lines (269 loc) · 9.4 KB
Raw

Video.js

Video.js - это библиотека с открытым исходным кодом, предназначенная для создания видео плеера.

Сама по себе библиотека очень проста. Дополнительная функциональность поставляется в плагинах(плейлисты, аналитика, реклама, и расширенные форматы видео - HLS или DASH).

Установка

NPM

npm install --save video.js

CDN

<script src="http://vjs.zencdn.net/6.9.0/video.js"></script>
<link href="http://vjs.zencdn.net/6.9.0/video-js.css" rel="stylesheet">

Инициализация

На странице должен присутствовать тег:

<video class="video-js"></video>

Передаем строку содержащую id элемента:

let video = videojs('id');

Или DOM элемент

let video = videojs(document.querySelector('.video-js'));

Опции

Опции передаются вторым параметром:

let video = videojs('my-video', {
    autoplay: false,
});

Основные опции:

  • autoplay: boolean - автоматическое воспроизведение;
  • controls: boolean - отображать ли интерфейс плеера;
  • loop: boolean - зацикливание воспроизведения видео;
  • muted: boolean - приглушение звука;
  • poster: string - ссылка на превью видео;
  • width: string|number - ширина видео;
  • height: string|number - высота видео;

Дополнительные опции:

  • fluid: boolean - подгонять ли видео под размер контейнера;
  • aspectRatio: string - соотношение сторон видео (16:9, 4:3);

Методы

  • src(string|array) - позволяет задать источник видео;

    video.src('/path/to/video.mp4');

video.src([
    {
        type: 'video/mp4',
        src: '/path/to/video.mp4',
    },
    {
        type: 'video/webm',
        src: '/path/to/video.webm',
    },
    {
        type: 'video/ogg',
        src: '/path/to/video.ogg',
    },
]);

  • poster(string) - позволяет задать превью видео;

  • play() - воспроизводит видео;

  • pause() - ставит видео на паузу;

  • paused() - возвращает true, если видео стоит на паузе, иначе false;

  • dispose() - полностью удаляет плеер (вызывает событие dispose, удаляет все обработчики событий, удаляет DOM элементы);

  • volume(number) - задает горомкость звука (число от 0 до 1); если вызвать без параметра - возвращает текущее значение;

  • muted(bolean) - возвращае true, если звук выключен, иначе false; если передано true - выключает звук.

  • requestFullscreen() - вход в полноэкранный режим;

  • exitFullscreen() - выход из полноэкранного режима;

  • isFullscreen() - возвращает true если видео находится в полноэкранном режиме, иначе false;

  • currentTime(number) - возвращает текущее место воспроизведения (в секундах); если передать число - устанавливает текущее место;

  • duration() - возвращает длину видео;

  • remainingTime() - возвращает оставшееся время;

Пример:

let video = videojs('video', {
    controls: true,
    autoplay: false,
    loop: false,
    poster: '/video/cover.jpg',
});

video.src({
    src: '/video/video.mp4',
    withCredentials: true,
});

video.on('ready', () => {
    // ...
});

События

События те же, что у нативного элемента video. Полный список тут.

Пример:

video.on('dispose', () => {
    // ...
});

video.on('play', () => {
    // ...
});

video.on('ended', () => {
    // ...
});

Стриминг (HLS)

Для стриминга video.js использует плагин videojs-contrib-hls.

Как подготовить видео - описано тут

Установка

npm install --save videojs-contrib-hls

Инициализация

let video = videojs('my-video', {
    controls: true,
    autoplay: true,
    loop: false,
    poster: '/video/cover.jpg',
        html5: {
            nativeAudioTracks: false,
            nativeVideoTracks: false,
            nativeTextTracks: false,
        hls: {
            overrideNative: true,
        },
    },
});

video.src({
    src: 'video-name.m3u8',
    type: 'application/x-mpegURL',
    withCredentials: true,
});

Для воспроизведения стриминга с других серверов, необходимо установить свойство withCredentials: false.

Выбор качества воспроизводимого видео

Для ручного выбора качества видео, необходимо установить 2 плагина:

npm install --save videojs-contrib-quality-levels videojs-hls-quality-selector

После указания источника видео, нужно вызвать метод .hlsQualitySelector() для экземпляра видео.

Пример

video.src({
    src: `video.m3u8`,
    type: 'application/x-mpegURL',
    withCredentials: false,
});

video.hlsQualitySelector();

Субтитры

Для субтриров используются файлы в формате .vtt.

Пример

WEBVTT

00:01.000 --> 00:04.000
Never drink liquid nitrogen.

00:05.000 --> 00:09.000
- It will perforate your stomach.

Что бы подключить субтитры к видео - нужно использовать метод .addRemoteTextTrack().

Пример

video.addRemoteTextTrack({
    label: 'Russian',
    kind: 'captions',
    src: 'subtitles.vtt',
    default: true,
}, false);

Задать стили субтитрам можно так (здесь используется !important, так как video.js задает стили инлайн):

.vjs-text-track-display {
    display: block;
    pointer-events: none;

    div {
        font-family: Arial, sans-serif !important;
        font-size: 40px !important;
        background-color: transparent !important;
    }
}

Стилизация

По умолчанию используется стандартный скин.

<link href="http://vjs.zencdn.net/6.7.1/video-js.css" rel="stylesheet">

Стандартный скин:

Стандартная стилизация

Отображение без стилей:

Отображение без стилей

Для кастомной стилизаци, нужно использовать свои стили.

Пример своей стилизации:

Своя стилизация

  • Контейнер

Вписываем контейнер в блок, у которого заданы размеры требуемые по макету.

<div id="video" class="video-js"></div>
.video-js {
    width: 100%;
    height: 100%;
}
  • Элемент <video>

Подгоняем формат, для предотвращения деформирования видео.

.vjs-tech {
    width: auto;
    height: 100vh;
    min-width: 100vw;
    object-fit: cover;

    @media (min-aspect-ratio: 1920 / 1080) {
        width: 100vw;
        height: auto;
        min-height: 100vh;
    }
}

  • Обложка .vjs-poster

  • Спинер .vjs-loading-spinner

  • Кнопка воспроизведение\пауза .vjs-play-control

  • Кнопка вкл\выкл звук .vjs-mute-control

  • Полоса громкости .vjs-volume-bar

  • Текущее время видео .vjs-current-time

  • Длительность видео .vjs-duration

  • Оставшееся время .vjs-remaining-time

  • Прогресс бар .vjs-progress-control

  • Кнопка полноэкранного режима .vjs-fullscreen-control

Пример:

.vjs-progress-control {
    display: block;
}

.vjs-progress-holder {
    position: relative;
    height: 4px;
    cursor: pointer;

    &::before {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 4px;
        background-color: #fff;
    }
}

.vjs-play-progress {
    position: relative;
    display: block;
    width: 0;
    height: 4px;
    background-color: #000;

    .vjs-control-text {
        display: none;
    }

    .vjs-time-tooltip {
       display: none;
    }
}