Недавно я подумал о том, что было бы неплохо сконвертировать кучу имеющихся у меня 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-архива.
А как вы решили бы задачу показа зацикленных слайд-шоу?
Автор: ru_vds
