Аудио и Видео в HTML 5

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

Для начала давайте посмотрим как мы сможем это реализовать на примере аудио записи, вот код:

<audio id="player" src="sound.mp3"></audio>
<div>
<button onclick="document.getElementById('player').play()">Играть</button>
<button onclick="document.getElementById('player').pause()">Пауза</button>
<button onclick="document.getElementById('player').volume+=0.1">Громче</button>
<button onclick="document.getElementById('player').volume-=0.1">Тише</button> </div>

Итак, первым делом мы объявляем тег audio и говорим ему где лежит наш mp3 файл с помощью параметра src, в нашем случае он лежит в корне, но вы можете положить его куда угодно главное чтобы вы не забыли правильно прописать путь к нему. Далее у нас идет блок из кнопок, каждая кнопка у нас реализуется по средствам тега button и соответственно мы можем, воспроизвести, приостановить, и сделать громче или тише.

Все элементарно и при этом очень действенно, с таким кодом может разобраться любой веб мастер.

Едем дальше давайте посмотрим, как у нас реализуется видео на сайте с помощью html 5, код:

<video width="640" height="360" controls>
<source src="__VIDEO__.MP4" type="video/mp4" />
<source src="__VIDEO__.OGV" type="video/ogg" />
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" />
</object>
</video>

Здесь у нас уже немного посложнее, но при этом как всегда просто. Так как не все браузеры поддерживают воспроизведение видео на HTML 5, нам пришлось вставить туда по старинке и Flash плеер, чтобы не получилось, что кто то видит, а кто то будет ругаться на «кривой сайт», но суть не в этом, что мы имеем?

С помощью тега video мы говорим браузеру, что здесь присутствует видео файл, размер окна воспроизведения задается стандартными параметрами width, height . Далее тегом source мы говорим браузеру браузеру откуда взять файл и собственно прописываем к нему путь src="__VIDEO__.MP4" с помощью параметра type мы говорим какой тип видео-файла ему необходимо воспроизводить. В этом примере мы встраиваем два видео формата, это mp4 и ogv. Начиная с тега object у нас идет подключение flash плеера, я подробно не буду описывать этот момент, так как я по нему писал целый урок: «Как вставить видео на сайт».

Вот что у меня получилось в итоге, я просматривал данный код браузером Google Chrome Версия 26.0.1410.43 m и все работало без подключения flash плеера:

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

Дата публикации:2013-04-10

Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!