Полноэкранное зацикленное слайд-шоу из изображений и видеофайлов на JavaScript

Недавно я подумал о том, что было бы неплохо сконвертировать кучу имеющихся у меня GIF-файлов в формат MP4 ради экономии места на картах памяти. Мне хотелось сделать так, чтобы полученные видеофайлы можно было бы смотреть в зацикленном виде. QuickLook на Mac, что весьма печально, этого не умеет.

Слайд-шоу

Поэтому я взялся за решение моей задачи собственными силами и быстро создал небольшой проект на чистом JavaScript, который дал мне то, что нужно. Здесь с ним можно поэкспериментировать. А вот — видео, демонстрирующее его в деле.

Возможности

Среди возможностей моего JavaScript-проекта для организации зацикленных слайд-шоу хочу отметить следующие:

• Вывод любых видеофайлов и изображений из заданной папки в максимально возможном размере без обрезки.
• Поддержка управления с помощью мыши или клавиатуры. (Клавиши-стрелки «Влево» и «Вправо» позволяют вручную перемещаться по материалам, клавиша «Пробел» включает и выключает автоматический показ слайдов.)
• Возможность вывода материалов в режиме слайд-шоу с переключением на новый файл каждые X секунд.
• При показе материалов в режиме слайд-шоу программа учитывает время, необходимое для загрузки изображения или для подготовки видео к просмотру.
• Программа хранит сведения о текущей позиции в просматриваемом слайд-шоу. При повторной загрузке страницы просмотр продолжится там, где он завершился в прошлый раз.

Использование проекта и его настройки

Для того чтобы воспользоваться слайд-шоу на HTML-странице, программе надо предоставить контейнер, в котором она будет создавать свои элементы, и задать её параметры, установив значения свойств объекта slideshow. Вот эти свойства:

• container: ссылка на HTML-элемент в DOM, в котором должно размещаться слайд-шоу.
• media: массив с именами видеофайлов и изображений, которые нужно выводить.
• folder: папка, содержащая вышеупомянутые материалы, которая должна быть поддиректорией той папки, в которой содержатся файлы, реализующие функционал слайд-шоу.
• autoplay: свойство, указывающее на то, должно ли воспроизведение слайд-шоу включаться автоматически. Оно может содержать одно из двух значений: yes (автовоспроизведение включено) или no (автовоспроизведение отключено).
• speed: время в миллисекундах, которое программа выдерживает до перехода к показу следующего материала (например, значение 1000 означает 1 секунду).

<div id="slideshow-container"></div>
<script>
  let slideshow = {
    container: '#slideshow-container',
    media: [
    'ball.mp4','dinowalk.mp4','dirty.mp4',
    'goldiejump.mp4','step.mp4','tippy.mp4','wag.mp4'
    ],
    folder: 'imgs/',
    autoplay: 'yes'
  }
</script>
<script src="slideshow.js"></script>

Автоматическая работа с коллекциями медиафайлов

В настоящее время я пользуюсь этим проектом на локальном сервере, применяя скрипт index.php. У того, кто работает на Mac, PHP уже установлен. Поэтому для запуска проекта достаточно открыть терминал, перейти в папку с материалами проекта и выполнить следующую команду:

$ php -S localhost:8000

Затем, воспользовавшись браузером, можно перейти по адресу localhost:8000, а всё остальное программа сделает сама.

В частности, скрипт index.php найдёт все папки, находящиеся в той же директории, в которой находится скрипт, и выдаст их список. Если щёлкнуть по имени одной из папок — начнётся воспроизведение файлов из неё. Вы вполне можете посмотреть код этого скрипта, но сразу скажу, что ничего особенного в нём нет.

Код index.php можно найти в репозитории проекта. Для того чтобы приступить к показу собственных слайд-шоу — можно клонировать репозиторий или скачать его в виде ZIP-архива.

А как вы решили бы задачу показа зацикленных слайд-шоу?