Видео — зачем нужно, как его сделать и разместить?

Видео на странице сайта здорово её оживляет! Кроме того, размещение Видео зачастую ценится и поисковыми системами, и посетителями сайта. Если Видео заинтересует посетителя, он подольше задержится на странице, что повысит среднее время просмотра страниц сайта, а это учитывается поисковыми системами в ПФ сайта. Само собой разумеется, что желательно размещать оригинальное видео.

Видео на странице сайта разместить достаточно просто: нужно или Добавить медиафайл в редакторе WordPress, или использовать тег <video> языка HTML5. Рассмотрим, освоим и сравним оба способа.

1-й способ. Этот способ мне не подходит и не нравится, так как по нему формируется всего лишь ссылка на Видеофайл, а по клику открывается окошко, в котором предлагается отобразить Видео в проигрывателе Windows Media. Можете убедиться в этом сами:

Button

2-й способ. Для освоения этого способа пришлось обратиться к учебнику и справочнику HTML5.

В языке HTML5 добавлен тег <video>, который позволяет встроить Видео в текст страницы сайта.

Поддержку Видео имеют современные версии всех браузеров: браузера Яндекса, Internet Explorer, Opera, Firefox, Chrome, Safari, … Сложность заключается в обилии форматов видеофайлов: обычно каждый браузер поддерживает ограниченное число видеоформатов. Кстати, настоятельно рекомендую отказаться от всех версий Internet Explorer, чтобы не наживать себе лишние проблемы. Подробности смотрите на странице Браузеры.

Браузеры Opera и Firefox поддерживают видеоформат Ogg (с видео кодеком Theora, аудио кодеком Vorbis и расширением ogv) и WebM (с видео кодеком VP8 и аудио кодеком Vorbis), а браузеры Internet Explorer и Safari поддерживают MPEG4 (с видео кодеком H.264 и аудио кодеком AAC). Браузер Chrome поддерживает все перечисленные форматы.

Чтобы Видео нормально воспроизводилось во всех браузерах, рекомендуется предоставлять видеофайлы в форматах Ogg и MPEG4 (или WebM и MPEG4).

Тег <source> позволяет предоставить несколько источников видео в разных форматах, а браузер будет использовать первый поддерживаемый им формат. Полезно после крайнего тега <source> ставить текстовую строку вида

Ваш браузер не поддерживает видеоформат ogv — попробуйте обновить версию или использовать браузеры Firefox или Chrome.

Быструю конвертацию Видеофайла в форматы Ogg, MPEG4 и WebM можно провести бесплатной программой Miro Video Converter. Программа англоязычная, но разобраться в ней несложно. Бесплатность весьма краткая: 7-мь дней, поэтому нет смысла скачивать и осваивать эту программу. Удалил её без сожаления.

Кроме того, для конвертации видеофайлов использовал Freemake Video Converter ( freemake.com/free_video_converter ), который имеет в числе поддерживаемых языков русский и позволяет проводить конвертацию во множество форматов, причём может конвертировать и Видео, и Аудио, и Изображения, то есть является универсальным конвертером.

На сайте freemake.com скачал и программу Freemake Video Downloader ( freemake.com/free_video_downloader ), которая позволяет извлекать видеофайлы с Ютуба и с многих других специализированных видеосайтов.

Атрибут type позволяет указать формат видеофайла. Видео в формате ogg имеет тип ‘video/ogg’, mp4 — ‘video/mp4′, webm — ‘video/webm’, wmv — ‘video/x-ms-wmv’. Обратите внимание на то, видеофайл в формате ogg имеет расширение .ogv

Считаю, что type указывать желательно, но необязательно, ибо современные версии браузеров способны сами разобраться в том, как нужно отображать видеофайл. Загляните в начало любого видеофайла — там присутствует информация о кодеках! Возможно, type чуть-чуть облегчает работу браузера, но на фоне тьмы других сложностей это совершенное тьфу.

Вот полное описание атрибутов тега <video>:

Атрибут	Значение	Описание
autoplay	autoplay	Указывает, что видеофайл должен начинать демонстрироваться сразу после загрузки страницы. Считаю, что обычно использовать не следует, чтобы не навязывать видеопросмотр и лишнее потребление трафика.
controls	controls	Указывает, что кнопки управления (кнопка начала воспроизведения, регулятор громкости звука и т. д.) должны быть отображены.
height	пиксели	Задаёт высоту видеопроигрывателя.
loop	loop	Указывает, что видеофайл после окончания должен снова начинать проигрываться. Считаю, что должен использоваться весьма ограниченно, чтобы Видео не надоедало.
muted	muted	Приглушает звук видеофайла.
poster	URL	Указывает URL-адрес картинки, которая будет отображена в проигрывателе, пока пользователь не нажмёт кнопку начала воспроизведения.
load	auto	load=auto указывает, что видеофайл должен загружаться сразу после загрузки документа.
load	metadata	load=metadata указывает, что метаданные видеофайла должны  загружаться сразу после загрузки документа.
load	none	load=none указывает, что видеофайл не должен загружаться после загрузки документа. Считаю, что должен обязательно использоваться, так как иначе некоторые браузеры начинают загрузку видеофайла до клика по кнопке Play.
src	URL	Указывает URL адрес видеофайла.
width	пиксели	Задаёт ширину видеопроигрывателя.

Проблема состоит в получении видеофайла. Её можно решить 2-мя способами: снять собственное Видео или использовать чужое Видео, сославшись при необходимости  на автора и / или источник. Сейчас Видео можно снимать не только видеокамерой, но и современными смартфоном, планшетофоном и многими цифровыми фотоаппаратами — они обычно способны обеспечить качество, приемлемое для размещения в небольшом окне на странице сайта.

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

Вот примеры размещения Видео:

А вот соответствующие HTML-коды размещения Видео:

<video width=»640″ height=»480″ controls=»controls»>
<source src=’http://188.134.22.47/video/tancuyushiy-matt/tancuyushiy-matt.webm’ type=’video/webm’ />
Ваш браузер не поддерживает видеоформат webm — попробуйте обновить версию или использовать браузеры Firefox или Chrome.
</video>

<video width=»640″ height=»480″ controls=»controls»>
<source src=’http://188.134.22.47/video/tancuyushiy-matt/tancuyushiy-matt.ogv’ type=’video/ogg’ />
Ваш браузер не поддерживает видеоформат ogv — рекомендую использовать браузеры Firefox или Chrome.
</video>

<video width=»320″ height=»240″ controls=»controls»>
<source src=’http://ep-z.ru/wp-content/_Video/Cats.mp4′ type=’video/mp4′ />
Убедитесь, что у Вас включен звук!>
</video>

———- Код пока что в постоянном изменении и совершенствовании …! ———

Для обеспечения максимальной совместимости с большинством браузеров видеофайлы рекомендуется представлять в трёх — четырёх форматах: mp4, webm, ogv и wmv.

Для преобразования исходного видео к этим форматам можно использовать и вышеупомянутые программы, и утилиты ffmpeg ( ffmpeg.org/download.html ) и ffmpeg2theora ( v2v.cc/%7Ej/ffmpeg2theora/download.html ). Эти утилиты имеют открытый исходный код и весьма малый размер, их можно использовать в разных операционных системах: Linux, Windows и MacOS.

Утилита ffmpeg проводит конвертирование в форматы mp4 и webm.
Утилита ffmpeg2theora корректно конвертирует видеофайл в формат ogg.
Команды конвертирования этими утилитами таковы:

ffmpeg -i <исходный файл> -f <целевой формат> <целевой файл>
ffmpeg2theora -o <целевой файл ogg> <исходный файл>

Если исходный файл называется dogs.mov, то набор команд для генерации видеофайлов всех необходимых форматов будет таков:

ffmpeg -ss 1 -quality best -i dogs.mov -y -s dogs.jpg
ffmpeg -i dogs.mov -f mp4 dogs.mp4
ffmpeg -i dogs.mov -f webm dogs.webm
ffmpeg2theora -o dogs.ogv dogs.mov

Этими командами создаются 4-ре файла, ссылки на которые и нужно указать в теге video, причём первая команда создаст файл изображения dogs.jpg, которое с помощью poster можно отображать до начала показа видео, а три остальных команды создадут файлы в видеоформатах mp4, webm и ogv.

При использовании в качестве веб-сервера Apache рекомендуется в файл настройки httpd.conf добавить такие строки:

AddType video/ogg .ogv
AddType video/wmv .wmv
AddType video/mp4 .mp4
AddType video/webm .webm

Эти строки вставлю в файл настройки httpd.conf веб-сервера Apache, когда умудрюсь установить его на домашний компьютер и / или на второй ноутбук. Наличие собственного веб-сервера иногда может быть весьма полезно. Уверен, что и домашний компьютер, и ноутбук вполне способны при Интернете по оптоволокну обеспечить нормальную работу сервера с посещаемостью две — три тысячи в сутки. Нужно будет только использовать серверный SSD и держать серверный компьютер включённым круглосуточно месяцами.

Так как настройками сервера заведуют специалисты хостинга, а беспокоить их не особо хочется, рекомендуется создать файл .htaccess в том же подкаталоге /_Video/, где хранятся видеофайлы с упомянутыми расширениями, и записать в этот файл четыре вышеприведенные строки.

Мой скромный опыт размещения Видео на страницах сайта конвертации видеофайлов привёл меня к таким выводам:

1. Разумные размеры окна для отображения Видео — 320*240 или 400*300.
2. Видеофайл имеет смысл в первую очередь преобразовать к выбранному размеру окна.
3. Битрейт следует подбирать опытным путём, чтобы уменьшить длину видеофайла, но слишком ухудшить качество Видео.
4. После проведения конвертации следует выбрать один или два самых коротких видеофайла, чтобы его (или их) разместить на сервере и упомянуть в теге video.
5. Пока что самый короткий видео-файл из серии файлов cats имеет формат wmv. Продолжаю подбор самого компактного видеоформата.
6. Дубли видеофайлов имеет смысл хранить на своём компьютере в каталоге \_Video\, а также в подкаталогах \_Video\Source (исходные видеофайлы), \_Video\Ready (видеофайлы, приготовленные для заливки на сервер хостинга) и \_Video\Host (видеофайлы, залитые уже на сервер хостинга).
7. Чтобы сэкономить место на SSD сервера хостинга и заодно уменьшить нагрузку на сервер хостинга, следует научиться размещать видеофайлы на Ютубе и научиться использовать файлы с Ютуба. Чем вскоре и собираюсь заняться.

Вот адрес Видео с сайта youtube.com :

http://www.youtube.com/watch?v=JiVorWuTuRc — Михаил Задорнов — 84 мин.

Привожу два примера размещения Видео с Youtube с использованием тега iframe:

Чтобы разместить Видео с Youtube, нужно Копировать HTML-код выбранного Видео, используя правую кнопку мышки, и вставить скопированный HTML-код в HTML-код своей страницы. При этом желательно Видео оформить в качестве цитаты, чтобы избежать обвинений в плагиате.

Спортивные трансляции можно попробовать посмотреть в разделе Спорт на сайте https://xvideos.promo/news/

…!

Приглашаю всех высказываться в Комментариях. Критику и обмен опытом одобряю и приветствую. В хороших комментариях сохраняю ссылку на сайт автора!

И не забывайте, пожалуйста, нажимать на кнопки социальных сетей, которые расположены под текстом каждой страницы сайта.
Продолжение чтения…