—»     —»   Синхронизация контента с видео на HTML5
  Раздел: Видео   Комментариев: 1  

Синхронизация контента с видео на HTML5



Одно основное отличие HTML5 от HTML4 заключается в том, что новые возможности превосходят ранее установленные рамки. HTML5 не ограничивается лишь текстом, ссылками, изображениями и формами, HTML5 предлагает мультимедийные средства, начиная от обобщенного элемента «object» до конкретизированных элементов «video» и «audio», а также богатого АПИ для доступа и работы с чистым кодом javascript.

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

* Конечные пользователи имеют полный контроль над мультимедией.
Родные контроллеры браузеров позволяют пользователям сохранять видео к себе на жесткий диск или отправлять их по электронной почте друзьям. HTML5 video и audio также позволяют контролировать мультимедию посредством клавиатуры, что является отличным преимуществом.

* Конечным пользователям не нужно устанавливать дополнительные плагины.
У браузера уже есть всё нужное для работы с видео и аудио.

* Возможность управлять видео и аудио, присутствующим на странице.
Эти два новых элемента без труда могут быть оформлены, их можно перемещать куда угодно, вертеть и крутить по желанию.

* Вы можете создавать собственные контроллеры используя HTML, CSS и javascript.
И при этом не требуется каких-то новых знаний в области разработки.

* Взаимодействие с остальными элементами страницы крайне простое.
АПИ мультимедии даёт вам полный контроль над видео, и вы также можете указать, что видео должно взаимодействовать с определенными изменениями, как на странице, так и в самом видео.

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

Встраиваем видео

Это уже и не новость. Встроить видео теперь так же легко, как просто вставить элемент «video», и указать путь до видео-файла. Задав также атрибут контроллеров, вы получаете родное управление видео:

<video src="chris.ogv" controls></video>

Это всё в теории, конечно же. На практике, в нашем реальном мире интеллектуальной собственности, гонки корпораций и мощности девайсов, нам, как разработчикам, придется прыгать несколько раз:

<video controls="true" height="295" width="480">
  <!-- hello iOS, Safari and IE9 -->
  <source src="chris.mp4" type="video/mp4">
  <!-- Hello Chrome and Firefox (and Opera?) -->
  <source src="chris.webm" type="video/webm">
  <!-- Hello Firefox and Opera -->
  <source src="chris.ogv" type="video/ogg">
  <!-- Hello legacy -->
  Your browser does not support the video tag,
  <a href="http://www.youtube.com/watch?v=IhkUe_KryGY">
    check the video on YouTube
  </a>.
</video>

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

Конвертирование видео с помощью Miro Video Converter

Miro Video Converter – это бесплатный инструмент для Mac, который значительно упрощает процесс конвертации видео. Просто перетащите видео в приложение, выберите WebM в качестве выходного формата, и наблюдайте за процессом. Существуют и другие конвертеры, которые также работает в Windows и Linux.

Синхронизация контента с видео на HTML5

Хостинг и автоматическая конвертация на Archive.org

Так как здесь все видео распространяются по лицензионному соглашению Creative Commons, то можно использовать Archive.org как для размещения видео, так и для его конвертации из WebM в MP4 и OGV. Просто загрузите видео-файл и подождите около часа. Перезагрузите страницу, и вы увидите, что Archive.org уже создал два других формата (а также прикольную GIF-анимацию с вашим видео).

Синхронизация контента с видео на HTML5

Вы можете использовать Archive.org как для размещения видео, так и для его конвертации из WebM в MP4 и OGV.

Конвертация с помощью Vid.ly

WebM, OGV и MP4 работают почти во всех современных браузерах, но если вы хотите, чтобы видео также воспроизводилось на мобильных устройствах, планшетах, и вам хочется, чтобы качество видео подходило под пропускной канал пользователя, то вам нужно создавать огромное множество копий одного и того же видео-файла. Encoding.com посочувствовали нам, и выпустили бесплатный сервис под названием Vid.ly. Он конвертирует любое загруженное видео в различные форматы. К сожалению, пока что сервис находится в режиме приватного бета-тестирования, хотя вы можете воспользоваться пригласительным кодом: HNY2011.

Синхронизация контента с видео на HTML5

Vid.ly конвертирует любое загруженное видео в различные форматы.

Более того, Vid.ly автоматически создает URL для вашего видео, и автоматически перекидывает пользователя с определенным устройством на соответствующий формат и качество. Это позволяет вам пользоваться встроенным кодом почти без забот:

<video src="http://vid.ly/4f3q1f?content=video" controls></video>

Мощь АПИ HTML5 Video: Синхронизация контента

И так, наше видео уже на странице, теперь давайте проверим силу работы АПИ. Например, нам нужно узнать, какая часть видео проигрывается в данный момент. Это также просто определить, как подписаться на события элемента «video»:

<div id="stage">
  <video src="http://vid.ly/4f3q1f?content=video" controls></video>
  <div id="time"></div>
</div>
<script>
  (function(){
    var v = document.getElementsByTagName('video')[0]
    var t = document.getElementById('time');
    v.addEventListener('timeupdate',function(event){
      t.innerHTML = v.currentTime;
    },false);
  })();
</script>

Если вы сделаете это в своём браузере, то вам будет видно текущее время под проигрывающимся роликом.

Синхронизация контента с видео на HTML5

Вы также заметите, что событие timeupdate часто слетает и всегда в разное время. Если вам хочется использоваться этим для синхронизации отображения и скрытия частей документа, тогда вам надо как-то с этим разобраться. Самый простой способ – это ограничить число полных секунд используя parseInt():

<div id="stage">
  <video src="http://vid.ly/4f3q1f?content=video" controls></video>
  <div id="time"></div>
</div>
<script>
  (function(){
    var v = document.getElementsByTagName('video')[0]
    var t = document.getElementById('time');
    v.addEventListener('timeupdate',function(event){
      t.innerHTML = parseInt(v.currentTime) + ' - ' + v.currentTime;
    },false);
  })();
</script>

Синхронизация контента с видео на HTML5

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


Для более подробного разбора этого демо, вам лучше ознакомиться с данной записью в блоге Mozilla Hacks.

Давайте попробуем нечто схожее: видео, которое отображает контент из веб-страниц ссылается на источник. Посмотрите это видео с объяснением того, что мы сейчас здесь делаем, того, как контент появляется и скрывается в определенные отрезки видео. Также не забудьте ознакомиться с контроллерами видео.

Синхронизация контента с видео на HTML5

Мы уже выяснили то, как определить текущее время ролика в секундах. А далее мы хотим рассказать вам о том, как отображать и скрывать некоторые части веб-сайта в конкретных отрезках видео. Если видео не поддерживается браузером, то вам следует отображать всё содержимое без синхронизации.

Первое, что пришлось решить – это разрешить контролирование того, что и когда будет отображено. В целом, мы использовали объект JSON в javascript, и нами было замечено, что если использовать поддержку в самой разметке, то мы имеем больше гибкости.

HTML5 позволяет вам размещать информацию в атрибутах data-. Так что, для облегчения контроля над скриптом, мы просто воспользуемся атрибутами data-start и data-end, которые определяют временные рамки для статей, которые мы хотим синхронизировать с видео:

<article data-start="64" data-end="108">
  <header><h1>Archive.org for conversion</h1></header>
  <p><a href="http://archive.org">Archive.org</a> is a website dedicated to
archiving the Internet. For content released as under a Creative Commons
license, it offers hosting for video and audio and automatically converts the
content to MP4 and Ogg video for you.</p>
  <iframe src="http://archive.org"></iframe>
</article>

Вы можете опробовать это, скачав код и изменив значения по собственному усмотрению (или использовать Firebug или Web Inspector, чтобы можно было всё сделать на лету).

Вот скрипт (использует jQuery), который помогает реализовать то, что нам нужно:

/* if the document is ready… */
$(document).ready(function(){

/* if HTML5 video is supported */
  if($('video').attr('canPlayType')){

    $('aside::first').append('<p>Play the video above and see how ' +
                             'the different connected content sections ' +
                             'in the page appear at the right moment. '+
                             'Feel free to jump forward and backward</p>');

    var timestamps = [],
        last = 0,
        all = 0,
        now = 0,
        old = 0,
        i=0;

/* hide all articles via CSS */
    $('html').addClass('js');

/*
   Loop over the articles, read the timestamp start and end and store
   them in an array
*/
    $('article').each(function(o){
      if($(this).attr('data-start')){
        timestamps.push({
          start : +$(this).attr('data-start'),
          end : +$(this).attr('data-end'),
          elm : $(this)
        });
      }
    });

    all = timestamps.length;

/*
  when the video is playing, round up the time to seconds and call the
  showsection function continuously
*/
    $('video').bind('timeupdate',function(event){
      now = parseInt(this.currentTime);

      /* throttle function calls to full seconds */
      if(now > old){
        showsection(now);
      }
      old = now;

    });

/*
  Test whether the current time is within the range of any of the
  defined timestamps and show the appropriate section.
  Hide all others.
*/
    function showsection(t){
      for(i=0;i<all;i++){
        if(t >= timestamps[i].start && t <= timestamps[i].end){
          timestamps[i].elm.addClass('current');
        } else {
          timestamps[i].elm.removeClass('current');
        }
      }
    };

  };
});

Итак, что же здесь происходит? Для начала, мы проверяем, может ли браузер проигрывать HTML5 video, тестируя атрибут canPlayType. Если здесь всё в порядке, то добавляется небольшой объясняющий текст документа (который не появится, если браузер не может воспроизвести видео). Далее, мы определяем некоторые переменные для использования и добавления класса javascript к родительскому элементу документа. Это, в купе с селектором статей .js в CSS, прячет все статьи в документ.

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

Далее мы подписываем событие timeupdate, которое включает в себя полный объем секунд, и каждую секунду вызываем функцию showsection().

Функция showsection() проходит по всем временным отметкам и проверяет, находится ли текущий момент видео в пределах какой-либо из статей. Если да, то статья отображается (посредством добавления текущего класса), а все остальные спрятаны. Это может быть оптимизировано за счёт сохранения текущей секции и удаления класса из конкретного элемента.

Можно ли сделать то же самое с меньшим объемом кода или вообще без него?

Если вам нравится идея синхронизации видео с контентом, то попробуйте ознакомиться с платформой Popcorn. Она основана на той же технологии, но даёт вам гораздо больше контроля над самим видео.

Синхронизация контента с видео на HTML5

Есть другая система, Butter, где самая суть заключается интерфейсе типа «point-and-click». Здесь есть красивый редактор временной шкалы, который позволяет вам проигрывать видео и отображать любой тип веб-контента в конкретный отрезок времени. Вы можете экспортировать и отсылать свои творения друзьям.

Синхронизация контента с видео на HTML5

С помощью систем типа Popcorn или Butter, мы еще на один шаг приближаемся к инструментам для богатейшего взаимодействия с тем, что нам предлагает HTML5.

Заключение

Сегодня мы рассмотрели то, каким образом можно встроить видео в веб-документ, и познакомились с родным АПИ, который даёт нам рычаги управления событиями в видео. Мы увидели, насколько просто сделать так, чтобы видео-файл взаимодействовал с остальным документом. Вместо контролирования видео, мы использовали родные контроллеры, которые создавали взаимодействие между страницей и тем, что происходит в видео. Мы использовали семантический HTML и атрибуты данных для того, чтобы использовать синхронизирующий скрипт без применения javascript, а также рассмотрели некоторые полезные и удобные сервисы для конвертации видео-файлов.

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

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

Также советуем вам ознакомиться с видео о синхронизации контента с HTML video в блоге Mozilla Hacks.

Удачи вам!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5
Опубликовал Mysterious Master   Прочитано (раз): 9535   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 2 апреля 2012 @ 04:55
Написал: zhadiger — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
cvs
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

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


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930