Краткое руководство: воспроизведение видео в приложении (HTML)

Статья
02/16/2016

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

В этом разделе показано, как использовать элемент HTML5 Video для воспроизведения видео в приложении среды выполнения Windows на JavaScript.

Еще один образец использования звука и видео в приложении среды выполнения Windows на JavaScript см. в разделе Образец воспроизведения мультимедиа с помощью HTML.

Сведения о мультимедийных аудио- и видеоформатах, поддерживаемых в приложениях среды выполнения Windows, см. в разделе Поддерживаемые аудио- и видеоформаты.

Необходимые условия

Предполагается, что вы умеете создавать простые приложения среды выполнения Windows на JavaScript. Подробнее: Создание первого приложения Магазина Windows на JavaScript.

Инструкции

1. Объявление характеристики интернет-клиента

Открытие файла манифеста приложения (package.appxmanifest.xml) и включение Internet (Client) capability

В Microsoft Visual Studio откройте конструктор манифеста приложения, дважды щелкнув элемент package.appxmanifest в обозревателе решений.
Щелкните Возможности.
Установите флажок характеристики Internet (Client) .

Эта характеристика предоставляет приложению выход в Интернет, который необходим для воспроизведения видео по URL-адресу в Интернете.

Примечание При воспроизведении локальных видеофайлов данная характеристика не требуется.

2. Добавление элемента видео

Откройте HTML-файл Default.html и добавьте элемент видео в тело документа.

<body>
  <video id="mediaVideo" src="https://www.contoso.com/clip.mp4" controls/>
</body>

Вместо "https://www.contoso.com/clip.mp4" следует подставить реальный URL-адрес.

Элемент Video предоставляет набор встроенных элементов управления воспроизведением, которые дают пользователю возможность запускать или приостанавливать воспроизведение, перематывать до нового места, регулировать громкость. По умолчанию элементы управления не отображаются. Чтобы включить их, просто добавьте атрибут controls, как показано в примере. Элементы управления появляются, когда пользователь наводит указатель мыши на видео.

3. Задание атрибутов ширины и высоты

Если размеры видео известны заранее, будет полезно указать атрибуты width и height для элемента video. Эти атрибуты определяют размеры макета элемента в пикселях каскадных таблиц стилей (CSS). При загрузке страницы для элемента резервируется пространство. Если вы не указали атрибуты ширины и высоты, страница будет адаптирована после того, как будет скачано видео.

<body>
   <video src="https://www.contoso.com/clip.mp4" controls width=640 height=480/>
</body>

Атрибуты ширины и высоты всегда задают размеры в пикселях CSS без указания единиц измерения. Например, значения "5cm" и "100%" недопустимы.

Если атрибуты ширины и высоты не соответствуют собственному размеру видео, элемент управления растягивает видео, сохраняя пропорции и используя при необходимости киноформаты "Letterbox". Однако растяжения видео следует избегать, поскольку это может привести к появлению визуальных артефактов. При возможности кодируйте видео в том размере, в котором его предполагается воспроизводить.