Иногда возникает необходимость создать на странице сайта просмотр какого-либо видео, причём в полноценном варианте - со звуком, с возможностью перемотать вперёд или назад и так далее. На самом деле, ничего сложного здесь нет, но есть нюансы, которые необходимо знать и учитывать при создании системы для просмотров видео.
Размеры видеофайлов
Одним из важнейших факторов, который необходимо учитывать - предполагаемые размеры и количество видеофайлов. Не секрет, что эти файлы весьма "тяжёлые"; например, файл my_video.mp4 продолжительностью всего 10 минут в высоком качестве и при разрешении экрана 1920*1080 px будет иметь размер около 70 Мб, а то и больше! Если это 5-10 таких файлов, то это не так страшно, но если видеофайлы имеют большую продолжительность и их должно быть много, то следует хорошо всё просчитать: дело в том, что под сайты на хостинге отводится не так и много места, а покупка дополнительных гигабайтов существенно повысит абонентскую плату. В этом случае следует использовать другую систему, где видеофайлы будут размещены в отдельном хранилище и подгружаться по запросу.
Как снизить размер видеофайла
Один из вариантов - ухудшить качество видео, однако, учитывая качество и возможности экранов современных ноутбуков, компьютеров и смартфонов, этот вариант отпадает сразу. Но выход из положения всё-таки есть: изменить сам видеоформат файла на более современный .webm (WebM). Этот формат специально разработан для современных браузеров и вся его прелесть в том, что при сохранении высокого качества изображения его размер намного меньше того же .mp4 ! Например, видеофайл длиною в 10 минут в этом формате будет "весить" всего около 35 Мб, что довольно существенно при размещении большого количества файлов.
Так как далеко не все устройства, записывающие видео, имеют возможность сохранять файлы в .webm, следует использовать программы, которые позволяют перевести файл в данный формат; обычно это делается одновременно с редактированием видео в каком-либо качественном редакторе с большими возможностями, например, в Movavi: вы загружаете файл .mp4, редактируете (что-то вырезаете, что-то вставляете, накладываете и редактируете звук, добавляете титры и т.д.) и сохраняете уже в .webm.
Где размещать видеофайлы на сайте
Самый удобный и простой вариант - разместить видеофайлы в отдельной папке в корне сайта; при этом желательно избегать по понятным причинам прямых названий для данной папки (типа "video").
Платный просмотр видеофайлов
Если вы хотите организовать платный просмотр видео на вашем сайте, то следует использовать дополнительные скрипты; эта тема описана отдельно в статье "Как сделать платный просмотр видео на сайте".
Как создать на странице сайта "экран" для просмотра видео
Самый простой код такого "экрана" состоит всего из нескольких тегов:
1 <h1>Название видео</h1>
2 <?php if (isset($name_video)) { ?>
3 <video width="100%" class='source_video' controls="controls" poster="/images/img_poster.png">
4 <source src="/my_video/<?php echo $name_video; ?>" type='video/webm; codecs="vp8, vorbis"' >
5 </video>
6 <p class='video_play_txt'>Сопроводительный текст</p>
7 <?php } else { ?>
8 <p>Ошибка при открытии видео...</p>
9 <?php } ?>
Строка 1 создаёт заголовок, в который выводится название видео.
Строки 2, 7 и 9 проверяют, существует ли переменная с названием видео, а так же не является ли она пустой; если условие не выполняется, на экран выдаётся фраза "Ошибка при открытии видео...". Если условие выполняется, создаётся поле для просмотра видео.
В строке 3 тег video создаёт контейнер для просмотра соответствующих файлов. Атрибут width указывает размер контейнера, атрибут controls указывает браузеру, что должна быть включена система управления просмотром видео, атрибут poster указывает расположение файла постера (заставки видео, которое выводится при открытии страницы до его запуска).
В строке 4 тег source указывает адрес видеофайла и его тип.
Строка 6 выводит на экран сопроводительный текст для видео.
Как указать браузеру какое видео выводить на экран
Есть несколько вариантов, которые зависят от конкретной ситуации.
Если на страницу всегда выводится только одно определённое видео, то достаточно просто прописать его адрес в теге source в атрибуте src.
Если на экране страницы будут выводиться разные видео в зависимости от запроса пользователей, то есть два варианта передать имя необходимого видеофайла в переменную $name_video; его можно поместить в переменную и передать методом GET (т.е. через адрес), или передать методом POST - это уже на ваше усмотрение.
Не стоит забывать о безопасности: в любом случае входящие данные должны быть соответствующим образом обработаны при помощи определённых функций PHP. Например, если передаётся только номер видео, то следует использовать функции, отсеивающие всё, кроме цифр; если это текст, то нужно использовать функции, позволяющие удалить различные теги и так далее.
Уважаемые пользователи!
Любой труд всегда должен быть вознаграждён. Создание качественных, простых в восприятии учебных материалов, статей и справочников - это большой труд, требующий не малого количества времени, а иногда и финансовых затрат. Мы будем рады поддержке авторов, пожертвуйте небольшую сумму (по вашему усмотрению) на дальнейшее развитие этого проекта!
