
Ни для кого не секрет, что можно без особых усилий воспроизводит как видео записи на своем сайте так и аудио, но насколько просто это реализовано в 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&image=__POSTER__.JPG&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
Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!