Вставка аудио и видео на ваш сайт с помощью HTML5

С появлением HTML5 уже нет необходимости подключать флэш плеер (покойся с миром :) или другие проигрователи, все стало гораздо проще и работает во всех современных браузерах. Всё что нужно сделать написать несколько простых и весьма понятных строк HTML кода и на вашем сайте появится функциональный рабочий аудио плеер, который умеет проигрывать файлы в формате mp3 или ogg.

Аудио

<audio controls src="audio-file.mp3"></audio>

MP3 проигрывается не везде, поэтому рекомендуется указывать также формат "ogg".

<audio controls>
    <source src="audio-file.mp3" type="audio/mpeg" />
    <source src="audio-file.ogg" type="audio/ogg" />
</audio>

В случаи если браузер не поддерживает тег аудио:

<audio controls>
    <source src="audio-file.mp3" type="audio/mpeg" />
    <source src="audio-file.ogg" type="audio/ogg" />
    <p>Извините, ваш браузер не поддерживает тег audio.</p>
</audio>

Другие атрибуты тега :

  • autoplay (авто воспроизведения)
  • controls (отображать плеер и кнопки)
  • loop (повторять дорожку без конечно)
  • muted (приглушить звук)
  • preload (загружать аудио, пока загружается страница)
  • src (путь к mp3/oog/wav файлу)

Видео лучше всего предоставлять в трёх форматах: ogv, mp4, webm

<video controls width="800" height="600">
    <source src="file.ogv" type="video/ogv" />
    <source src="file.mp4" type="video/mp4" />
    <source src="file.webm" type="video/webm" />
</video>

Можно указать дополнительный атрибут:

autoplay (авто воспроизведение)


Оставьте комментарий!

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


Написать новый комментарий

Видео

Самые полезные видео на темы "веб-разработка", "Linux" и "IT". Смотри и обучайся!

Подробнее »

Сделки

Самые горячие и выгодные сделки, акции и скидки на видео-курсы, софт, услуги, книги и железо из всего рунета.

Подробнее »

Планета

Наша планета собирает интересные статьи из различных источников и объединяет их в одну ленту. Которую можно читать на нашем сайте.

Подробнее »