Java, UX, HTML, CSS, WEB-design

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

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

Название: Синхронизация контента с видео HTML5 . Краткое описание: [ad_1] ⭐ Кристиа . Дата публикации: 22.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Кристиан Хайльманн

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

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

  • 10 минут чтения

  • Кодирование, Методы, Видео, HTML5, HTML

Краткое резюме ↬

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

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

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

  • Конечные пользователи имеют полный контроль над мультимедиа.. Собственные элементы управления браузеров позволяют пользователям сохранять видео локально или отправлять их друзьям по электронной почте. Кроме того, видео и аудио в формате HTML5 по умолчанию поддерживаются клавиатурой, что является большим преимуществом доступности.
  • Конечным пользователям не нужно устанавливать плагин для их воспроизведения.. В браузере уже есть все необходимое для воспроизведения фильмов и звука.
  • Видео- и аудиоконтентом на странице можно управлять.. Это просто два новых элемента, как и любые другие, которые можно стилизовать, перемещать, манипулировать ими, складывать друг в друга и вращать.
  • Вы можете создавать собственные элементы управления с помощью HTML, CSS и JavaScript.. Никаких новых навыков или среды разработки не требуется.
  • Взаимодействие с остальной частью страницы простое.. Мультимедийный API дает вам полный контроль над видео, и вы можете заставить видео реагировать как на изменения самого видео, так и на страницу вокруг него.

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

Дальнейшее чтение на SmashingMag:

  • Креативное использование видео в веб-дизайне: фоновые видеоролики
  • Будущее видео в веб-дизайне
  • Размещение производственного видео в Интернете

Еще после прыжка! Продолжить чтение ниже ↓

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

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

<video src="https://www.smashingmagazine.com/2011/03/syncing-content-with-html5-video/chris.ogv" controls></video>

Впрочем, это теория. В реальном мире интеллектуальной собственности, корпоративной конкуренции и решений для конкретных устройств нам, разработчикам, приходится преодолевать несколько препятствий:

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

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

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

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

Miro Video Converter в действии - просто перетащите видео, выберите выходной формат и нажмите конвертировать

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

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

Различные версии видео, загруженного с сайта archive
Вы можете использовать Archive как для размещения видео, так и для преобразования версий WebM в MP4 и OGV. Большой вид.

Промышленная конверсия с Vid.ly

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

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

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

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

Круто, не так ли?

Сила HTML5 Video API: синхронизация контента

Теперь, когда наше видео размещено на странице, давайте проверим мощь API. Скажем, например, вы хотите знать, какая часть фильма сейчас идет. Это так же просто, как подписаться на событие <video> элемент:

<div id="stage">
  <video src="https://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>

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

Отображение текущего времени видео

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

<div id="stage">
  <video src="https://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>

Отображение текущего времени видео

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

Чтобы получить полное объяснение этой демонстрации, ознакомьтесь с сообщением в блоге Mozilla Hacks.

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

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

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

Первая проблема, которую я должен решить, — позволить сопровождающему контролировать, что и когда показывать. Обычно я бы использовал объект JSON в JavaScript, но я полагаю, что сохранение обслуживания в самой разметке имеет гораздо больше смысла.

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

<article data-start="64" data-end="108">
  <header><h1>Archive for conversion</h1></header>
  <p><a href="https://archive">Archive</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="https://archive"></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
      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, проверяя canPlayType атрибут. Если все в порядке, то мы добавляем в документ поясняющий текст (который не имел бы смысла, если бы браузер не мог показывать видео). Затем мы определяем некоторые переменные для использования и добавляем класс js к корневому элементу документа. Это, вместе с .js article селектор в CSS скрывает все статьи в документе.

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

Затем подписываемся на timeupdate событие, округленное до полных секунд, и вызвать showsection() функционировать каждую новую секунду.

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

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

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

попкорн.js

Butter — это интерфейс «укажи и щелкни», который можно использовать поверх Popcorn. Он имеет хороший редактор временной шкалы, который позволяет воспроизводить видео и отображать все виды веб-контента в определенное время. Вы также можете экспортировать и отправлять свои творения друзьям.

Скриншот Масло в действии
Большой вид

Благодаря таким системам, как Popcorn и Butter, мы на один шаг приблизились к инструментам разработки для разнообразных взаимодействий, которые предлагает нам HTML5. Что вы можете придумать для строительства?

Резюме

Сегодня мы рассмотрели, как встроить видео в веб-документ; а с собственным API видео, который предоставляет нам обработчики событий для изменений в видео, мы увидели, как легко заставить видео взаимодействовать с остальной частью документа. Вместо того, чтобы пытаться контролировать видео, мы используем собственные элементы управления, чтобы страница реагировала на то, что происходит в самом видео. Мы использовали семантический HTML и атрибуты данных, чтобы сопровождающие могли использовать скрипт синхронизации, не касаясь JavaScript, и рассмотрели некоторые сервисы, упрощающие размещение и преобразование видео.

Все эти крутые технологии дают нам много возможностей, но мы не можем просто, скажем, написать какой-нибудь простой CSS, JavaScript и HTML, чтобы использовать их. Если мы хотим, чтобы открытые технологии были успешными, мы должны сделать их простыми для использования людьми. Теперь следующий шаг — перейти от этапа «разовой реализации» и подумать о создании инструментов и пошаговых систем создания кода для пользователей, которые хотят использовать эти классные новые технологии, но не хотят тратить много времени. и прилагать к этому усилия.

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

Скринкаст на эту тему см. в разделе Синхронизация содержимого страницы с видео HTML5 в блоге Mozilla Hacks.

Сокрушительная редакция
(аль)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Синхронизация контента с видео HTML5

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»