наверх





HTML5 подарило нам такие теги как <video> и <audio>, которые могут помочь нам сделать сайт лучше и проще, без сложных решений. Если, раньше можно было импортировать видео через тег <iframe>, то теперь через <video>.


<video>



Раньше, еще до HTML5, приходилось импортировать видео через тег <iframe> и как это делалось:

<iframe width="560" height="315" src="http://www.youtube.com/embed/jRG2abPiYxU"></iframe>


Теперь же, это самое видео можно импортировать через тег <video>, который будет проще и удобнее, к тому же, с уже имеющийся своей панелью управления:

<video width="560" height="315" src="http://www.youtube.com/embed/jRG2abPiYxU" controls="controls"></video>


Как вы поняли, тег <video> - это тег для вставки на страницу видео-ролика. У него есть свои атрибуты, о которых будет полезно узнать:

src - главный атрибут, указывает путь до видео-файла.
height - высота видео-ролика, измеряется в пикселях и процентах.
width - ширина видео-ролика, так же измеряется в пикселях и процентах.
controls - добавляет панель для управления видео (добавляет кнопку воспроизведения, полосу прогресса, смену громкости звуки).
poster - при наличие данного атрибута у видео будет показано изображение, когда само видео не будет загружено на странице или же вообще, не будет доступно (удалено, перенесено).
loop - повторяет видео, когда оно будет завершено.

На данный момент в разных браузерах тег <video> не воспроизводит следующие форматы видео:

Google Chrome:
- wav

Opera, Firefox:
- mp3
- AAC
- H.264

Internet Explorer:
- ogg/vorbis
- wav
- ogg/theora
- WebM

Safari:
- ogg/vorbis
- ogg/theora
- WebM

<audio>



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

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

Пример использования тега <audio>:

<audio src="SoundRingingTone.mp3" controls="controls"></audio>


Атрибуты тега <audio>:

src - главный атрибут, указывает путь до аудио-файла.
controls - добавляет к проигрывателю панель, без которой бы не было смысла, если бы не было автоматического воспроизведения аудио-файла.
autoplay - автоматически воспроизводит аудио, после загрузки страницы.
loop - повторяет аудио, когда оно будет завершено.

В каких браузерах данный тег не поддерживает следующие форматы:

Google Chrome:
- wav

Opera, Firefox:
- mp3
- AAC

Internet Explorer:
- ogg/vorbis
- wav

Safari:
- ogg/vorbis




Просмотр демо-варианта


Поделиться
Text-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный text-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.