Video in the pictures gallery.

Доброго времени суток.

Нужно сделать возможность добавлять видео (интегрировать html5 видеоплеер) в дополнителные картинки товара, через админку карточки товара, вкладка Изображения. И чтоб как сейчас работала сортировка (указываем в админке Порядок сортировки: 1 и видео идет в слайдере и в отображении в карточке товара первым после главного изображения.)

Чтоб было две возможности добавления видео:

   1. Загрузка на сервер сайта через FTP, либо через загрузчик который открывается при добавлении изображений. И затем установка видео во вкладке Изображения. В этом случае нужно сделать, чтоб в слайдере и на странице товара не отображался черный прямоугольник, а отображалось изображение как заставка на Ютюб и посередине прямоугольника кружок со значком старта воспроизведения (чтоб было понятно, что это видео), т.е. подгружать отдельно изображение заставки (в админке чек бокс использовать изображение заставки для видео и само изображение, либо выбирать из кадров видео как на Ютубе, сделать возможность выбора, загружаем изображение отдельно с сервера сайта либо используется картинка с кадра видео).

   2. Указанием ссылки (html-code, либо прямая ссылка) на сторонний хостинг (Vimeo, Ютуб, Фейсбук, twich и т.д.) (реализовать меню выбора сервиса либо html кода) и выводом заставки которая выведена на стороннем хостинге. Может сделать переключатель (чекбокс) для этой функции.

Смотрю в сторону плеера с открытым кодом plyr.io.

Нужны настройки для плеера:

1. Play

2.  Mute

3. Subtitles - (в адинке возможность настройки, включение отключение опции).

controls – панель управления видеоплеером

4. Video quality

5. Speed

6. Picture-in-picture

7. Full screen 

8. Loop - повтор после окончания видео, бесконечное воспроизведение или зацикливание видео; (в адинке возможность настройки, включение отключение опции).

9. poster — указываем путь к скриншоту для видеозаставки, если видео недоступно или долго загружается, тогда автоматически подставляется постер, обычно используется скриншот первого кадра видео; (в адинке возможность настройки, включение отключение опции).

10. muted - (в адинке возможность настройки, включение отключение опции).

11. Autoplay - Сделать возможность в админке включать и отключать автовоспротзведение видео, при перелистывании на него в слайдере товара.

Нужна поддержка различных форматов видео современными браузерами, в plyr.io реализовано. HTML5 video, HTML audio, YouTube, Vimeo. Streaming integration Twich, SteamTV, twich и др.. (проверить интеграцию twich, если нет добавить).

Android devices — MP4

Google Chrome — WebM, Ogg

Mozilla Firefox — WebM, Ogg

Opera — WebM, Ogg

Safari — MP4 (including iPhone)

Internet Explorer 9 — MP4

Internet Explorer 6-8 — No HTML5, flash only

Из-за того, что разные браузеры поддерживают различные форматы видео и приходится делать 3 разных файла с одним видео, только в разных кодировках.

<source src="video.webm" type="video/webm"> — путь к файлу с видео в формате WebM HTML 5 видео;

<source src="video.ogg" type="video/ogg"> — путь к файлу с видео в формате Ogg видео;

<source src="video.mp4" type="video/mp4" /> — путь к файлу в формате MP4.

Таже нужно исправить подгрузку слайдера, после очистки кеша изображение подгружается на половину, возможно как то не корректно работает модуль lazy load смотрите скриншот.

Протестировать на работоспособность. Все должно выглядеть хорошо на ПК, Планшетах, мобильной версии сайта.

Не повредить другой функционал на сайте!

Смотрите другие мои тех. задания, если сейчас не доступны, то появятся в ближайшее время.

Сайт: Opencart 1.5.6.4, PHP 7.4