Skip to content

Latest commit

 

History

History
51 lines (42 loc) · 6.31 KB

tutorial.md

File metadata and controls

51 lines (42 loc) · 6.31 KB
Raw

Reference information in Russian about how JavaScript code in this project works

Справочная информация на русском о том, как работает код JavaScript в этом проекте

Основные свойства и события Video API использованные в этом проекте

Атрибуты

  • width и height — ширина и высота контейнера для проигрывания видео.
  • videoWidth и videoHeight — внутреннее значение ширины и высоты видео, если размеры не известны, равны 0.
  • preload — передаёт браузеру какой контент прежде всего необходимо загрузить перед воспроизведением видео.
    Возможные значения атрибута:
    none: указывает, что видео не должно быть предварительно загружено;
    metadata: указывает, что извлекаются только метаданные видео (например, длина);
    auto: Указывает, что весь видеофайл может быть загружен, даже если пользователь не должен его использовать;
    пустая строка: синоним автоматического значения.
  • poster — ссылка на картинку, которую можно показывать, пока видео недоступно(обычно это один из первых непустых кадров).

Состояние сети и готовность к работе

  • src — ссылка(url) на воспроизводимый контент.
  • buffered — буферизованные куски видео.

Воспроизведение и контролы

  • currentTime — текущий момент проигрывания(с.).
  • duration — длительность медиа - контента(с.).
  • playbackRate - скорость воспроизведения (нормальная - 1.0).
  • paused — находится ли воспроизведение на паузе.
  • ended — закончилось ли проигрывание.
  • muted — включение / выключение звука.
  • volume — уровень звука[0, 1].
  • play() — начать проигрывание.
  • pause() — поставить на паузу.

События (Events)

  • oncanplay — можно начать проигрывание.
  • ontimeupdate — изменена позиция проигрывания.
  • onplay — запущено проигрыв.
  • onpause — нажата пауза.
  • onended — воспроизведение закончилось.
  • onloadeddata - событие запускается, когда кадр в текущей позиции воспроизведения мультимедиа закончил загрузку; часто первый кадр (использовал здесь для вывода миниатюр кадров при наведении мыши на прогресс-бар).

Больше информации об элементе video на mdn web docs.

Больше информации о Video и Audio APIs на mdn web docs.

Генерирование миниатюр кадров видео и использование их в качестве визуальных подсказок при наведении на шкалу времени воспроизведения

В данном проекте миниатюры кадров для подсказок на временной шкале генерируются на стороне фронтенда.
Как только на видеопроигрывателе срабатывает слушатель события canplay, запускается функция preloadVideoThumbnails(), которая генерирует и загружает в массив миниатюры кадров видеофайла. Для этого создаётся невидимая копия текущего проигрывателя, в котором, с использованием события onloadeddata последовательно,при помощи асинхронной функции, прогоняются через цикл for все кадры видео и сохраняются в виде изображении малого формата (здесь 120х70) в отдельный массив.
Для получения миниатюр кадров видео используется Canvas API. Подробнее о возможностях Canvas API при работе с видео рассказано на сайте mdn web docs.
В данной версии проигрывателя миниатюры кадров видео длительностью до 120сек формируются по одной в секунду. Если видео длиной до 300сек, то одна миниатюра в 2 секунды, до 600 - одна миниатюра в 3 секунды. Если видео длиной больше 600 секунд, то шаг создания миниатюры 5 секунд. Настройки шагов создания миниатюр в переменной videoThumbnailsInterval.
Далее получившийся массив миниатюр просто перебирается методомforEach в функции updateTimelineTooltip() и подходящая по времени миниатюра выводится во всплывающей подсказке в одном блоке с указанием времени при наведении курсора мыши на временную шкалу.