Видео и аудио контент на сайте

 

Продолжаю создавать сайт borisov-quality.com. В этом посте расскажу о возможностях мультимедиа HTML5. В первую очередь это касается тегов <video> и <audio>.

Поближе познакомимся с этими тегами.
 

Тег <video>

HTML5 <video> — элемент, включённый в проект спецификации HTML5, который используется для воспроизведения видеозаписей, частично заменяя элемент <object>.

Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Внутри контейнера <video> можно написать текст, который будет выводиться в браузерах, не работающих с этим тегом.

 

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

Ниже приводится фрагмент кода на HTML5, который позволяет встроить WebM видео на веб-сайт:

<video src="movie.webm" poster="movie.jpg" controls>
Ваш браузер не поддерживает замечательный тег <video>
</video>

 

Множественность ресурсов

Используя любое количество элементов <source>, как показано ниже, браузер выберет автоматически, какой файл загружать. Также, чтобы добиться того же результата, можно использовать функцию canPlay () из JavaScript. Атрибут «type» определяет тип MIME и список кодеков, которые помогают браузеру определить, может ли он расшифровать файл или нет. Из-за отсутствия общего видео формата, множественность ресурсов является важной особенностью для того, чтобы избегать «фырканья» браузера, что склоняет его к ошибке: известно, что любые знания веб-разработчиков о браузерах будут неполными, браузер знает о себе больше.

<video poster="movie.jpg" controls>
    <source src='movie.webm' type='video/webm; codecs="vp8.0, vorbis"'>
    <source src='movie.ogv' type='video/ogg; codecs="theora, vorbis"'>
    <source src='movie.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
    <p>Ваш браузер не поддерживает замечательный тег <video></p>;
</video>

 

Поддерживаемые видеоформаты

Текущий проект спецификации HTML5 не уточняет, какие форматы должны поддерживаться в теге <video>. Пользовательские агенты (браузеры) имеют право поддерживать любой подходящий видеоформат.

 

Тег <audio>

HTML5 <audio> — элемент, включённый в проект спецификации HTML5, который используется для воспроизведения аудиозаписей.

Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Внутри контейнера <audio> можно написать текст, который будет выводиться в браузерах, не работающих с этим тегом.

 

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

Ниже приводится фрагмент кода на HTML5, который позволяет встроить mp3  и ogg аудио на веб-сайт:

<audio controls>
    <source src="audio/music.ogg" type='audio/ogg; codecs=vorbis'>
    <source src="audio/music.mp3" type="audio/mpeg">
    Тег <audio> не поддерживается вашим браузером.
</audio>

Элементы <video> и <audio> значительно расширяют возможности веб-разработчиков при реализации мультимедийных составляющих веб-сайтов.

И это действительно так. Мультимедийность сайтов делалась на тегах <object>. Т.е. все видео и аудио встраивались (да и сейчас встраиваются) при помощи этого тега или тега <iframe>. Причём конструкция кода становилась довольно громоздкой. А воспроизводилось видео и аудио при помощи Flash-плагинов. Теперь же, используя теги <video> и <audio>, можно легко встроить мультимедийный контент. Осталось дождаться окончательного утверждения спецификации по контейнерам и кодекам. Пока же будем использовать множественные ресурсы, чтобы любой браузер смог воспроизвести любой мультимедийный контент.

 

Теги <video> и <audio> на сайте borisov-quality.com

Вся мультимедиа сайта представлена следующими элементами:

  • промо-ролик JavaScript + jQuery;
  • музыка из гимна России;
  • саундтрек из Терминатора 2, играющий при перетаскивании лампы;
  • саундтрек из Терминатора 2, играющий в самом начале демонстрации;
  • звук падающих сторон знака качества в начале демонстрации;
  • звук нажатия на меню/кнопки/элементы знака качества;
  • звук закрытия окна;
  • звук движения элементов знака качества.

 

Промо-ролик JavaScript + jQuery

Для воспроизведения видеоролика я использую HTML5/Flash-плеер flowplayer. Так выглядит код для ролика:

<div class="flowplayer is-splash color-alt1" data-ratio="0.696">
    <video preload="none" src="путь_до_файла.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        <source src="путь_до_файла.webm" type='video/webm; codecs="vp8, vorbis"'>
        <source src="путь_до_файла.ogv" type='video/ogg; codecs="theora, vorbis"'>
        <source src="путь_до_файла.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        <source src="mp4:путь_до_файла.mp4" type='video/flash; codecs="avc1.42E01E, mp4a.40.2"'>
        Ваш браузер не поддерживает замечательный элемент <video>.
    </video>
</div>

Чтобы обеспечить воспроизведение видео во всех браузерах, поддерживающих HTML5, я использую все форматы: webm, ogv, mp4.

Для кодировки в различные форматы я использую онлайн конвертер. Сконвертирует из любого формата в любой в рамках соответствующего медиа-контента. Видео, музыку, изображения, архивы, электронные книги. Очень удобно.

Отмечу, что flowplayer автоматически определяет браузер. И браузерам, поддерживающим HTML5, flowplayer укажет, что воспроизводить видео нужно в HTML5, а браузерам, которые не поддерживают HTML5, видео воспроизведётся в стандартном Flash.

 

Звуки на сайте borisov-quality.com

Звуки гимна России и саундтреки из Терминатора 2 на сайте установлены следующим образом:

    <audio id="gimn_Russia" preload="auto" controls>
        <source src="путь_до_файла.ogg" type="audio/ogg; codecs=vorbis">
        <source src="путь_до_файла.mp3" type="audio/mpeg">
        Ваш браузер не поддерживает замечательный элемент <audio>.
    </audio>

Для воспроизведения использую только ogg— и mp3-формат. Кодировка тоже в онлайн-конверторе.

А вот звуки, воспроизводящиеся при каком-либо действии на сайте, подключаются в javascript-коде:

$.fn.audio = function(file){
    $(this).html('<audio controls autoplay="autoplay"><source src="audio/'+file+'.ogg" type="audio/ogg; codecs=vorbis"><source src="audio/'+file+'.mp3" type="audio/mpeg"></audio>');
}

Чтобы воспроизвести звук, просто вызываю функцию:

audioDiv.audio('_название аудио-файла_');

до этого определена переменная:

var audioDiv = $('#audio_Div');

при этом в разметки есть блок:

<div id="audioDiv" style="display: none;"></div>

Вот и всё. И, например, при нажатии на меню, функция воспроизведения выглядит так:

audioDiv.audio('a_click');

 

Хранение видео и аудио файлов для сайта

Так как видео и аудио файлы имеют гораздо больший объём по сравнению со скриптами, то логичным было бы хранение мультимедиа файлов сделать на другом хостинге, а не на том, на котором расположен сайт.

И для реализации этой возможности существует файловый хостинг. Например, Яндекс.Диск или Google.Drive. Это — вероятно, самые популярные сервисы для хранения файлов. К тому же они бесплатные.

Есть только одна загвоздка. У этих сервисов нет возможности получить прямую ссылку на файл. С одной стороны — это плюс. Но не в данном обстоятельстве. Мне как раз нужно иметь прямую ссылку на файл.

Для таких случаев существуют сервисы для хранения файлов, у которых можно получить прямую ссылку на файл, причем файлы можно хранить абсолютно любые.

Один из таких сервисов — Dropbox.

Dropbox - облачное хранилище Ваших данных

Очень удобный сервис хранения, файлы всегда доступны. Заходите и регистрируйтесь:
 

Dropbox — онлайн-хранилище для Ваших файлов

 
На этом пост про мультимедиа контент на сайте borisov-quality.com закончен. И теперь Вы знаете, как установить аудио и видео на сайте. Хорошего Вам дня.

Оцените материал:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звёзд   (голосов: 3, средняя оценка: 5,00 из 5, сумма: 15)

Loading...

Понравилось? Поделитесь с друзьями:





Другие материалы по теме:

Борисов - Качество
HTML и CSS - бесплатные видеокурсы
«HTML» и «CSS»
Изучите Видеокурсы
Бесплатно!
Станьте хозяином своих сайтов прямо сейчас! Введите Ваше Имя и Ваш E-Mail:

Ваш E-Mail в безопасности