[Перевод] Полноэкранное зацикленное слайд-шоу из изображений и видеофайлов на JavaScript09.03.2021 17:02

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

Слайд-шоу

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

Возможности


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

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


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

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


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

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

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

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

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

oug5kh6sjydt9llengsiebnp40w.png

© Habrahabr.ru