Синхронизация содержимого с HTML5 видео

Одним из основных изменений HTML4 на HTML5 является то, что новая спецификация нарушает несколько границ, что браузеры были ограничены.Вместо того, чтобы ограничивать взаимодействие с пользователем в текст, ссылки, изображения и форм, HTML5 способствует мультимедиа, из общего <object> элемент высоко указанных <video> и <audio> элемент, и с богатым API для доступа в чистом JavaScript.

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

Конечные пользователи имеют полный контроль над multimedia.Собственные средства управления браузеры позволяют пользователям сохранять видео локально или отправить их друзьям.Кроме того, HTML5 видео и аудио клавиатуры включена по умолчанию, который является большим доступность benefit.
Конечные пользователи не должны установить плагин для воспроизведения them.Браузер уже есть все необходимое для воспроизведения фильмов и sound.
Видео и аудио контента на странице может быть manipulated.Они просто два новых элемента, как и любые другие, которые могут быть стилизованы, перемещать, управлять, сложены и rotated.
Вы можете создать свой собственный управления с помощью HTML, CSS и JavaScript.Нет новых навыков или среды разработки needed.
взаимодействие с остальной частью страницы simple.Мультимедийного API дает вам полный контроль над видео, и вы можете сделать видео реагировать как на изменения в само видео и на странице вокруг it.

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

Внедрение Video

Это старые новости.Вложение видео в документе так же просто, как добавление <video> элементов и направляя его к источнику видеосигнала.Добавление controls атрибут дает вам родной управления:

<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 в качестве выходного формата, а также наблюдать за прогрессом.Несколько других преобразователей для окон и Linux имеются, too.

Хостинг и автоматизированных преобразованием Archive.org

Потому что я лицензировать мои видео с КреативныеCommons, я могу использовать Archive.org как хозяин видео и конвертировать WebM версии в MP4 и ОГВ.Просто загрузите ваше видео и подождать около часа.Обновить страницу, и сервер феи в Archive.org будут созданы два других форматов (а также прохладно анимированные GIF вашего видео)

Вы можете использовать Archive.org как хозяин видео и конвертировать WebM версии в MP4 и ОГВ. Большой view.

Промышленно-Сила преобразования с Vid.ly

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

Vid.ly преобразует любое видео, которое вы загружаете в различные форматы более или менее в реальном времени. Большой view.

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

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

Cool, не так ли

The Power Of The Video HTML5 API: синхронизация Content

Теперь, когда наше видео на странице, давайте проверим власти API.Скажем, например, вы хотите знать, что часть фильма играет прямо сейчас.Это так же просто, как подписаться на событие <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>

Если вы попробовать это out в вашем браузере, вы увидите текущее время под видео, когда вы играете it.

Вы также увидите, что timeupdate событие получает произвели много, и на несколько случайные моменты времени.Если вы хотите использовать это, чтобы синхронизировать отображения и скрытия частей документа, то вам нужно душитьэто как-то.Самый простой способ сделать это состоит в ограничить число в полном seconds использованием 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>

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

Для полного объяснения этой демо-версии, проверить Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 11.03.2011 by Newsbot