Как сделать видеоплеер для сайта Без Плагинов за 5 минут?

Доброго времени суток всем читателям – 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 . Не пугайтесь что он не русскоязычный, там есть выбор перевода.

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

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

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