Мультимедиа

Файлы к данной лекции Вы можете скачать здесь.

Говорить, что средства аудиовизуальной информации важны для приложений – и для культуры в целом – это грубое преуменьшение. С тех пор, как люди, подобные Эдисону, сделали возможным записывать произведения для того, чтобы позже ими можно было насладиться, влечение человечества к мультимедийным данным – к изображениям, аудиозаписям, видеоклипам – возможно превысило тягу к автомобилям, электричеству и нездоровой пище. В ранние дни Интернета передача изображений легко занимала большую часть сетевого трафика. Сегодня, потоковое видео даже из одного отдельно взятого ресурса вроде Netflix поддерживает усилия по увеличению возможностей инфрастрктуры широкополосных сетей! (У меня дома это так и есть, с любимыми фильмами моего маленького сына вроде "Curious George", "Bob the Builder", "Dinosaur Train" и другими.)

Включение в себя, в той или иной форме, мультимедийной информации, это одна из основных забот большинства приложений для Магазина Windows. Простые, вероятно используют лишь несколько изображений для придания приложению фирменного стиля и отображения привлекательного пользовательского интерфейса, как мы уже видели много раз. Многие другие, особенно игры, конечно, используют и графику, и видео и аудио. В контексте этого курса все это поразумевает использование таких элементов HTML5, как img, svg (Scalable Vector Graphics – Масштабируемая векторная графика), canvas, audio и video.

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

• Организация и правка медиафайлов, в том числе тех, что хранятся в библиотеках изображений, музыки и видео.
• Конверсия (преобразование) медиафайлов, возможно, с применением различных фильтров и пользовательских кодеков.
• Организация и правка плей-листов.
• Захват аудио и видео с доступных устройств.
• Потоковая передача данных с сервера на устройства, или с устройства на целевые объекты воспроизведений (PlayTo target), возможно, с применением DRM.

Эти возможности, для реализации которых существует множество API WinRT, вместе с мультимедиа-элементами HTML5 и их особыми возможностями в среде Windows 8, будут рассмотрены в этой лекции.

Примечание. Обратите внимание на полный список аудио и видео-форматов, которые поддерживаются WinRT-приложениями: "Поддерживаемые форматы звука и видео" (http://msdn.microsoft.com/library/windows/apps/hh986969.aspx).

Врезка: Трюки по повышению производительности для создания более быстрых приложений

Некоторые из рекомендаций, данных в этой лекции, взяты из отличного выступления Джейсона Вебера, который занимается вопросами производительности Internet Explorer. Это выступление называется "50 трюков по повышению производительности, которые позволяют сделать ваше приложение для Windows 8, использующее HTML5, быстрее" (http://channel9.msdn.com/events/BUILD/BUILD2011/PLAT-386T). В то время, как некоторые из этих трюков имеют смысл для веб-приложений, которые исполняются в браузере, многие из них полностью применимы к приложениям для Магазина Windows, написанных на JavaScript, так как они исполняются на основе той же инфраструктуры, что имеется в Internet Explorer.

Создание мультимедиа-элементов

Конечно, самый простой способ включить мультимедийные данные в приложение – это то, что мы делаем уже многие годы: просто использовать подходящий HTML-элемент в разметке, и вуаля! – все сделано. С элементами img , audio, и video, на самом деле, вы без проблем можете исползовать содержимое из почти любого источника. То есть, атрибутам src этих элементов может быть назначены URI, которые указывают на содержимое в пакете приложения (с использованием относительных путей, URI ms-appx:/// , или путей, основанных на Windows.ApplicationModel.Package.current.installedLocation, которые затем передают в URL.createObjectURL), на файлы в папках данных приложения (с использованием URI ms-appdata:/// , или путей, основанных на Windows.Storage.ApplicationData.current с применением URL.createObjectURL), на удаленные файлы с применением http:// и других URI. В случае с элементом img сюда можно еще добавить использование в качестве источников SVG-файлов.

Существуют три способа создания мультимедиа-элемента на странице или на элементе управления страницы:

Во-первых, можно включить элемент напрямую в декларативный HTML-код. Часто полезно использовать атрибут preload="auto" для удаленного аудио или видео для увеличения скорости реакции элементов управления и других элементов пользовательского интерфейса, которые зависят от этих элеменов. (Это важно делать и для локальных медиафайлов, хотя они и так являются локальными!). Часто мультимедийные элементы размещают ближе к верхней части HTML-файла, в порядке приоритета, таким образом, их загрузка может начаться уже в то время, когда остальные части документа еще обрабатываются.

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

Воспроизведение для элементов, заданных декларативно, может быть начато автоматически, благодаря атрибуту autoplay, посредством встроенного пользовательского интерфейса, если элемент имеет атрибут controls, или с помощью вызова из JavaScript команды <element>.play().

Второй метод заключается в создании HTML-элемента в JavaScript посредством document.createElement и в добавлении его в DOM с помощью команды <parent>.appendChild и похожих методов. Вот пример использования мультимедиа-файлов, который находится в дополнительных материалах к этой лекции, хотя вам нужно поместить этот код в новый собственный проект:

 //Создаем элемент и добавляем его в DOM, что приведет к изменению макета
var picture = document.createElement("img");	
picture.src = "media/wildflowers.jpg";	
picture.width = 300;	
picture.height = 450;	
document.getElementById("divShow").appendChild(picture);	

var movie = document.createElement("video");
movie.src = "media/ModelRocket1.mp4"; 
movie.autoplay = false;
movie.controls = true;
document.getElementById("divShow").appendChild(movie);

var sound = document.createElement("audio");	
sound.src = "media/SpringyBoing.mp3";	
sound.autoplay = true; //Запускаем проигрывание как только элемент будет добавлен в DOM	
sound.controls = true; //Если установлено false, аудио проигрывается, но не влияет на макет
document.getElementById("divShow").appendChild(sound);

Если элементы для вывода изображений или видео не скрыты с помощью стилей, а так же, если речь идет об элементах с установленным атрибутом controls, то их добавление вызывает повторную отрисовку макета документа. Аудио-элемент без данного атрибута не приводит к повторному выводу макета. Как и в декларативном HTML, установка аutoplay в значение true приведет к запуску воспроизведения видео или аудио сразу после того, как элемент будет добавлен в DOM.

И, наконец, для аудио, приложения могут создавать объект Audio в JavaScript для проигрывания звуков или музыки без какого-либо воздействия на пользовательский интерфейс. Больше об этом будет позже. В JavaScript так же есть класс Image, класс Audio может быть использован для загрузки видео:

//Создаем объекты (с предварительной загрузки), затем нужным образом задаем источники других DOM-объектов	
var picture = new Image(300, 450);	
picture.src = "http://www.kraigbrockschmidt.com/downloads/media/wildflowers.jpg";

document.getElementById("image1").src = picture.src;	

//Объект Audio можно использовать для предварительной загрузки 
(но не воспроизведения) видео
var movie = new Audio("http://www.kraigbrockschmidt.com/downloads/media/ModelRocket1.mp4");
document.getElementById("video1").src = movie.src;

var sound = new Audio("http://www.kraigbrockschmidt.com/downloads/media/SpringyBoing.mp3");
document.getElementById("audio1").src = sound.src;
 

Создание объектов Image или Audio из кода не приводит к созданию элементов в DOM, что может быть полезным. Объект Image, например, многие годы используется для предварительной загрузки массивов исходных изображений для использования в задачах наподобие вращения изображений или при реализации всплывающих меню. Предварительная загрузка в данном случае означает лишь то, что изображения были загружены и кэшированы. Таким образом, присваивание того же самого URI атрибуту SRC элемента, который уже находится в DOM, как показано выше, приведет к немедленному появлению изображения. То же самое справедливо для предварительно загруженного видео и аудио, но, опять же, это, в первую очередь, полезно для использования с удаленными источниками, в то время, как файлы из локальной файловой системы загружаются сравнительно быстро и без дополнительных усилий с нашей стороны. Тем не менее, если у вас есть большие локальные изображения, и вы хотите быстро показать их, когда они понадобятся, предварительная загрузка их в па мять – это полезная стратегия.

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