Возможности родных мельтимедийных средств имеют некоторые преимущества:
* Конечные пользователи имеют полный контроль над мультимедией.
Родные контроллеры браузеров позволяют пользователям сохранять видео к себе на жесткий диск или отправлять их по электронной почте друзьям. 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.
Хостинг и автоматическая конвертация на Archive.org
Так как здесь все видео распространяются по лицензионному соглашению Creative Commons, то можно использовать Archive.org как для размещения видео, так и для его конвертации из WebM в MP4 и OGV. Просто загрузите видео-файл и подождите около часа. Перезагрузите страницу, и вы увидите, что Archive.org уже создал два других формата (а также прикольную GIF-анимацию с вашим видео).
Вы можете использовать Archive.org как для размещения видео, так и для его конвертации из WebM в MP4 и OGV.
Конвертация с помощью Vid.ly
WebM, OGV и MP4 работают почти во всех современных браузерах, но если вы хотите, чтобы видео также воспроизводилось на мобильных устройствах, планшетах, и вам хочется, чтобы качество видео подходило под пропускной канал пользователя, то вам нужно создавать огромное множество копий одного и того же видео-файла. Encoding.com посочувствовали нам, и выпустили бесплатный сервис под названием Vid.ly. Он конвертирует любое загруженное видео в различные форматы. К сожалению, пока что сервис находится в режиме приватного бета-тестирования, хотя вы можете воспользоваться пригласительным кодом: HNY2011.
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>
Если вы сделаете это в своём браузере, то вам будет видно текущее время под проигрывающимся роликом.
Вы также заметите, что событие 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>
Вы можете использовать это для того, чтобы задействовать функционал в определенное время. Например, вы можете синхронизировать анимацию карты в стиле Индиана Джонса с видео:
Для более подробного разбора этого демо, вам лучше ознакомиться с данной записью в блоге Mozilla Hacks.
Давайте попробуем нечто схожее: видео, которое отображает контент из веб-страниц ссылается на источник. Посмотрите это видео с объяснением того, что мы сейчас здесь делаем, того, как контент появляется и скрывается в определенные отрезки видео. Также не забудьте ознакомиться с контроллерами видео.
Мы уже выяснили то, как определить текущее время ролика в секундах. А далее мы хотим рассказать вам о том, как отображать и скрывать некоторые части веб-сайта в конкретных отрезках видео. Если видео не поддерживается браузером, то вам следует отображать всё содержимое без синхронизации.
Первое, что пришлось решить – это разрешить контролирование того, что и когда будет отображено. В целом, мы использовали объект 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. Она основана на той же технологии, но даёт вам гораздо больше контроля над самим видео.
Есть другая система, Butter, где самая суть заключается интерфейсе типа «point-and-click». Здесь есть красивый редактор временной шкалы, который позволяет вам проигрывать видео и отображать любой тип веб-контента в конкретный отрезок времени. Вы можете экспортировать и отсылать свои творения друзьям.
С помощью систем типа Popcorn или Butter, мы еще на один шаг приближаемся к инструментам для богатейшего взаимодействия с тем, что нам предлагает HTML5.
Заключение
Сегодня мы рассмотрели то, каким образом можно встроить видео в веб-документ, и познакомились с родным АПИ, который даёт нам рычаги управления событиями в видео. Мы увидели, насколько просто сделать так, чтобы видео-файл взаимодействовал с остальным документом. Вместо контролирования видео, мы использовали родные контроллеры, которые создавали взаимодействие между страницей и тем, что происходит в видео. Мы использовали семантический HTML и атрибуты данных для того, чтобы использовать синхронизирующий скрипт без применения javascript, а также рассмотрели некоторые полезные и удобные сервисы для конвертации видео-файлов.
Все эти технологии дают нам огромные возможности, но мы всё ещё не можем воспользоваться простеньким кодом CSS, javascript и HTML, чтобы всё заработало как надо. Если мы хотим, чтобы эти технологии развивались, нам нужно сделать их простыми для людей. Следующий этап на сегодняшний день заключается в том, чтобы отойти от текущей фазы и подумать о создании инструментов с системой пошаговой разработки кода для пользователей, кто хочет пользоваться этими самыми технологиями, но у кого не так много времени на изучение специальных языков программирования.
С помощью родного аудио и видео в браузерах, мы сделали большой шаг на пути развития технологий. Следующий шаг заключается в использовании мультимедии не только на выходе, но и на входе. На сегодняшний день почти все девайсы оснащены камерами или хотя бы микрофонами. Нам нужно научиться поддерживать их и взаимодействовать с ними, нужно научиться извлекать преимущества из этого.
Также советуем вам ознакомиться с видео о синхронизации контента с HTML video в блоге Mozilla Hacks.
Удачи вам!
