Доброго времени суток всем читателям – Sozdaiblog.ru!

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

В своей предыдущей статье (аудиоплеер для сайта) я Вам уже показал, на что способен новый язык представления данных HTML5. И сегодня, с Вашего позволения и по просьбе одного из постоянных читателей я продолжу наше знакомство с этой удивительной системой структурирования содержимого Веб-страниц.

До недавнего времени, как и многие Веб-мастера, чтобы отобразить на страницах своего ресурса необходимый видео контент я использовал видеоплеер для сайта, который любезно предоставляют всевозможные видеохостинги. Самым распространённым примером, который можно наблюдать на большинстве сайтов является всеми любимый You Tube (как добавить видео на сайт).

Конечно, использование этого сервиса очень удобно. Но случается так, что необходимо воспользоваться другим решением для отображения видеоматериалов.

Именно такая ситуация возникла у моего читателя. Чтобы решить эту задачу я согласился ему помочь.

Как и в предыдущей статье всё разрешилось при помощи одного из тегов, позаимствованных у HTML5.

Его публичное имя — <video>.

Итак.

 

Как работает тег <video>.

Здесь всё просто. Чтобы замутить видеоплеер для сайта, который будет отображать видео ролик на любой странице Вашего ресурса, достаточно в HTML прописать следующее:

 

<video width="800" height="374" controls>
        <source src="1.mp4" type="video/mp4" />
        <source src="1.ogg" type="video/ogg" />
        <source src="1.webm" type="video/webm" />
</video>

 

 

 

ДЕМО

 

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

Для начала сразу скажу, что не все браузеры могут читать одинаковые форматы видео. Поэтому в вышеупомянутом коде присутствуют сразу три формата одного и того же ролика.  Делается это для того, чтобы Ваше видео могло проигрываться во всех современных браузерах. Основными стандартами которых являются mp4; ogg; webm.

 

Таблица совместимости форматов.

Browser .mp4 .webm .ogg
Mozzila Firefox 3.6 ✓ ✓
Opera 10.63 ✓ ✓
Google Chrome 8.0 ✓ ✓ ✓
Apple Safari 5.0.3 (with QuickTime) ✓
Microsoft IE 9 Beta ✓

 

Говоря по-простому, Вы должны сделать несколько копий одинакового видео, но в разных форматах и прописать ссылку для каждого.

Так же в данном коде присутствует атрибут «controls». Он подключает  панель управления  видеоплеером.

Ну и соответственно width и height, которые отвечают за размер окна воспроизведения.

На атрибут type можете не обращать особого внимания, так как он присутствует в коде, лишь в помощь браузерам для правильного сопоставления форматов.

Если Вам потребуется автозапуск видеоплеера при попадании посетителя на Веб-страницу, то для этого необходимо рядом с атрибутом  «controls» через пробел дописать «autoplay».

В принципе, здесь можно поставить точку, все основные моменты разобраны. Единственное, что Вам, возможно, потребуется сделать – это в файл .htaccess добавить следующий код:

 

AddType video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm

 

Это нужно для Вашего сервера.

В завершении этого поста мне снова захотелось порадовать Вас сладкой плюшкой.

Чтобы Ваш видеоплеер для сайта не выглядел таким унылым, я прилепил к нему несколько симпатичных кнопочек.

 

ДЕМО СКАЧАТЬ

 

Здесь добавлен небольшой кусочек скрипта, который необходимо прикрутить на странице. Все исходники есть в архиве. Вам нужно только его скачать.

 

P. S.

Для конвертирования видео Вы можете использовать любой онлайн сервис. Лично мне понравился — Video Converter. Не пугайтесь что он не русскоязычный, там есть выбор перевода.

Если возникнут вопросы, пожалуйста, задавайте!

На сегодня это всё. До следующей встречи…

 

С уважением, Денис Черников!