Краткое руководство: использование функции воспроизведения на устройстве в приложениях (HTML)

Статья
02/16/2016

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

Функция воспроизведения на устройстве позволяет пользователям легко передавать звук, видео и изображения с компьютера на устройства домашней сети. В этом разделе показано, как использовать функцию воспроизведения на устройстве в приложении Магазина Windows, чтобы пользователи могли передавать мультимедиа на целевое устройство.

Цель: Использование функции воспроизведения на устройстве для передачи мультимедийного содержимого на целевое устройство.

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

Microsoft Visual Studio

Инструкции

1. Создайте новый проект и сделайте доступными библиотеки мультимедиа

Откройте Visual Studio и выберите пункт Создать проект в меню Файл. В разделе JavaScript выберите Пустое приложение. Назовите приложение PlayToSample и нажмите кнопку ОК.
Откройте файл package.appxmanifest и выберите вкладку Возможности. Чтобы разрешить вашему приложению доступ к библиотекам мультимедиа на компьютере, выберите возможности Библиотека музыки, Библиотека изображений и Библиотека видео. Сохраните и закройте файл манифеста.

2. Добавление пользовательского интерфейса на языке HTML

Откройте файл Default.html и добавьте следующий код HTML в раздел <body>.

  <div style="position:fixed;width:300px;height:30px;">
      <button id="videoButton">Video</button>
      <button id="audioButton">Audio</button>
      <button id="imageButton">Image</button>
  </div>
  <div id="displayDiv" style="position:fixed;top:40px;height:360px">
    <div id="videoDiv">
      <video id="vplayer" height="338" width="600" controls >
         Cannot play video.
      </video>
    </div>
    <div id="audioDiv">
      <audio id="aplayer" controls >Cannot play audio.</audio>
    </div>
    <div id="imageDiv">
      <img id="iplayer" height="338" width="600" alt="image">
    </div>
     <br/>
  </div>

  <div id="messageDiv" style="position:fixed;top:400px;height:auto"></div>

3. Добавление кода инициализации

Код, добавляемый на этом этапе, создает обработчики для событий нажатия кнопок HTML. Функция showDiv задает, какой из мультимедийных элементов HTML5 (<video>, <audio> или <img>) будет видимым, и сохраняет ссылку на активный элемент. Эта ссылка передается объекту PlayToManager для потоковой передачи источника данного элемента на целевое устройство, которое выбрано для воспроизведения. В коде предусмотрена функция-ярлык id для удобного доступа к функции getElementById.

Откройте папку js. Откройте файл Default.js и добавьте следующий код вместо функции WinJS.Application.onmainwindowactivated по умолчанию.

app.onactivated = function (eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        id("videoButton").addEventListener("click", videoButtonClick, false);
        id("audioButton").addEventListener("click", audioButtonClick, false);
        id("imageButton").addEventListener("click", imageButtonClick, false);

        videoButtonClick();

        WinJS.UI.processAll();
    }
};

function id(tagName) {
    return document.getElementById(tagName);
}

// Save a reference to the current media element for PlayTo.
var mediaElement;

function showDiv(divName) {
    id("audioDiv").style.display = "none";
    id("aplayer").src = null;
    id("imageDiv").style.display = "none";
    id("videoDiv").style.display = "none";
    id("vplayer").src = null;

    id(divName).style.display = "block";

    switch (divName) {
        case "audioDiv":
            mediaElement = id("aplayer");
            break;
        case "videoDiv":
            mediaElement = id("vplayer");
            break;
        case "imageDiv":
            mediaElement = id("iplayer");
            break;
    }
}

function videoButtonClick() {
    showDiv("videoDiv");
    getVideoFile(0);
}

function audioButtonClick() {
    showDiv("audioDiv");
    getAudioFile(0);
}

function imageButtonClick() {
    showDiv("imageDiv");
    getImageFile(0);
}

4. Добавление кода для получения источника мультимедиа из локальных библиотек мультимедиа

Код, добавляемый на этом этапе, вызывается в ходе обработки событий нажатия кнопок HTML. Каждая функция анализирует первый обнаруженный элемент в выбранной библиотеке мультимедиа и воспроизводит или отображает его в соответствующем элементе мультимедиа HTML5. Например, если вы нажимаете кнопку "Видео" в приложении, функция getVideoFile находит первую видеозапись в библиотеке видео, обозначает ее как источник для тега <video> и воспроизводит видеозапись.

В файле Default.js после кода, описанного на предыдущем шаге, добавьте следующий код.

function getVideoFile(fileIndex) {
    try {
        var videosLibrary = Windows.Storage.KnownFolders.videosLibrary;
        videosLibrary.getFilesAsync().then(function (resultLibrary) {
            if (resultLibrary.length > 0) {
                id("messageDiv").innerHTML +=
                    "Play video: " + resultLibrary[fileIndex].name + "<br/>";
                id("vplayer").src = URL.createObjectURL(resultLibrary[fileIndex]);
                id("vplayer").play();
            }
        });
    } catch (ex) {
        id("messageDiv").innerHTML +=
            "Exception encountered: " + ex.message + "<br/>";
    }
}

function getAudioFile(fileIndex) {
    try {
        var musicLibrary = Windows.Storage.KnownFolders.musicLibrary;
        musicLibrary.getFilesAsync().then(function (resultLibrary) {
            if (resultLibrary.length > 0) {
                id("messageDiv").innerHTML +=
                    "Play audio: " + resultLibrary[fileIndex].name + "<br/>";
                id("aplayer").src = URL.createObjectURL(resultLibrary[fileIndex]);
                id("aplayer").play();
            }
        });
    } catch (ex) {
        id("messageDiv").innerHTML +=
            "Exception encountered: " + ex.message + "<br/>";
    }
}

function getImageFile(fileIndex) {
    try {
        var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;
        picturesLibrary.getFilesAsync().then(function (resultLibrary) {
            if (resultLibrary.length > 0) {
                id("messageDiv").innerHTML +=
                    "Show image: " + resultLibrary[fileIndex].name + "<br/>";
                id("iplayer").src = URL.createObjectURL(resultLibrary[fileIndex]);
            }
        });
    } catch (ex) {
        id("messageDiv").innerHTML +=
            "Exception encountered: " + ex.message + "<br/>";
    }
}

5. Добавление кода функции воспроизведения на устройстве

Чтобы включить функцию воспроизведение на устройстве в разрабатываемом приложении, вам понадобится только код, добавляемый на этом этапе. Код получает ссылку на компонент PlayToManager для текущего приложения и связывает с ним обработчик события sourcerequested. В обработчике событий sourcerequested вы передаете свойство msPlayToSource элемента мультимедиа HTML5 методу setSource объекта PlayToManager. После этого объект PlayToManager передает мультимедийное содержимое на целевое устройство, выбранное пользователем для функции воспроизведения на устройстве.

В файле Default.js после кода, описанного на предыдущем шаге, добавьте следующий код.

var ptm = Windows.Media.PlayTo.PlayToManager.getForCurrentView();
ptm.addEventListener("sourcerequested", sourceRequestHandler, false);

function sourceRequestHandler(e) {
    try {
        var sr = e.sourceRequest;
        var controller;

        try {
            controller = mediaElement.msPlayToSource;
        } catch (ex) {
            id("messageDiv").innerHTML +=
                "msPlaytoSource failed: " + ex.message + "<br/>";
        }

        sr.setSource(controller);
    } catch (ex) {

        id("messageDiv").innerHTML +=
            "Exception encountered: " + ex.message + "<br/>";
    }
}

6. Создание целевого объекта для функции воспроизведения на устройстве (необязательный этап)

Для работы приложения необходимо целевое устройство, на которое функция воспроизведения на устройстве будет передавать мультимедиа. Если у вас нет сертифицированного приемника для функции воспроизведения на устройстве, можно использовать проигрыватель Windows Media. Чтобы можно было использовать проигрыватель Windows Media в качестве целевого устройства, ваш компьютер должен быть подключен к частной сети.

Запустите проигрыватель Windows Media.
Разверните меню Поток и включите параметр Разрешить удаленное управление проигрывателем.... Оставьте проигрыватель Windows Media открытым. Он должен быть запущен, чтобы функция "Воспроизвести на" могла использовать его в качестве целевого устройства.
Откройте панель управления Устройства и принтеры. Выберите Добавление устройств и принтеров. В окне Выберите устройство или принтер для добавления к этому ПК мастера Добавление устройств и принтеров найдите устройство Мультимедийный обработчик для вашего компьютера. Для вашего компьютера это будет проигрыватель Windows Media. Выберите его и нажмите кнопку Далее. Когда мастер завершит работу, экземпляр проигрывателя Windows Media будет отображаться в списке Устройства мультимедиа.

7. Запуск приложения

Чтобы запустить приложение, нажмите в Visual Studio клавишу F5 (отладка). Вы можете выбрать любую кнопку мультимедиа для воспроизведения или просмотра первого элемента списка воспроизведения в различных библиотеках мультимедиа. Чтобы направить поток мультимедиа на конечное устройство при воспроизведении мультимедиа, воспользуйтесь чудо-кнопкой "Устройства" для выбора конечного объекта функции "Воспроизведение на устройстве".

Сводка

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