Schnellstart: Verwenden von „Wiedergeben auf“ in Apps (HTML)

Artikel
02/16/2016

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

Verwenden Sie "Wiedergeben auf", damit Benutzer auf einfache Weise Audiodaten, Videodaten oder Bilder von ihrem Computer auf Geräte in ihrem Heimnetzwerk streamen können. In diesem Thema erfahren Sie, wie Sie Benutzern einer Windows Store-App mithilfe von "Wiedergeben auf" das Streamen von Medien auf ein Zielgerät ermöglichen.

Ziel: Streamen von Medien auf ein Zielgerät mithilfe von "Wiedergeben auf".

Voraussetzungen

Microsoft Visual Studio

Anweisungen

1. Erstellen eines neuen Projekts und Ermöglichen des Zugriffs auf Medienbibliotheken

Öffnen Sie Visual Studio, und wählen Sie im Menü Datei die Option Neues Projekt aus. Wählen Sie im Abschnitt JavaScript die Option Leere Anwendung aus. Geben Sie für die App den Namen PlayToSample ein, und klicken Sie auf OK.
Öffnen Sie die Datei "package.appxmanifest", und wählen Sie die Registerkarte Funktionen. Aktivieren Sie die Funktionen Musikbibliothek, Bildbibliothek und Videobibliothek, um der Anwendung den Zugriff auf die Medienbibliotheken eines Computers zu gewähren. Schließen und speichern Sie die Manifestdatei.

2. Hinzufügen einer HTML-Benutzeroberfläche

Öffnen Sie die Datei "Default.html", und fügen Sie dem Abschnitt "<body>" den folgenden HTML-Code hinzu.

  <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. Hinzufügen von Initialisierungscode

Der Code in diesem Schritt erstellt die Ereignishandler für die Klickereignisse der HTML-Schaltflächen. Die showDiv-Funktion steuert, welches HTML5-Medienelement ("<video>", "<audio>" oder "<img>") sichtbar ist, und enthält einen Verweis auf das aktive Element. Dieser Verweis wird an PlayToManager übergeben, um die Quelle des Elements auf das Ziel für "Wiedergeben auf" zu streamen. Für den schnellen Zugriff auf die getElementById-Funktion ist die Verknüpfungsfunktion id enthalten.

Öffnen Sie den Ordner js. Öffnen Sie die Datei "Default.js", und ersetzen Sie die Standardfunktion WinJS.Application.onmainwindowactivated durch den folgenden Code.

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. Hinzufügen von Code zum Abrufen der Medienquelle aus lokalen Medienbibliotheken

Der Code in diesem Schritt wird während der Klickereignisse der HTML-Schaltflächen aufgerufen. Jede Funktion gibt das erste Element aus der ausgewählten Medienbibliothek im zugehörigen HTML5-Medienelement wieder bzw. zeigt es an. Wenn Sie also beispielsweise in der Anwendung auf die Videoschaltfläche klicken, ruft die getVideoFile-Funktion das erste Video aus den Videos ab, legt es als Quelle für das Tag <video> fest, und gibt das Video wieder.

Fügen Sie in der Datei "Default.js" nach dem Code des vorherigen Schritts den folgenden Code ein.

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. Hinzufügen von Code für "Wiedergeben auf"

Mit dem Code in diesem Schritt können Sie "Wiedergeben auf" in Ihrer Anwendung aktivieren. Er ruft einen Verweis auf PlayToManager für die aktuelle Anwendung ab und weist den Ereignishandler für das sourcerequested-Ereignis zu. Übergeben Sie im sourcerequested-Ereignishandler die msPlayToSource-Eigenschaft des HTML5-Medienelements an die setSource-Methode von PlayToManager. Daraufhin streamt PlayToManager die Medien auf das vom Benutzer ausgewählte Ziel für "Wiedergeben auf".

Fügen Sie in der Datei "Default.js" nach dem Code des vorherigen Schritts den folgenden Code ein.

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. Erstellen eines "Wiedergeben auf"-Ziels (optional)

Zum Ausführen der Anwendung ist ein Zielgerät erforderlich, auf das mit "Wiedergeben auf" Medien gestreamt werden können. Falls Sie keinen zertifizierten Empfänger für "Wiedergeben auf" haben, nutzen Sie Windows Media Player als Zielgerät. Ihr PC muss mit einem privaten Netzwerk verbunden sein, damit Sie Windows Media Player als Zielgerät verwenden können.

Microsoft Windows Media Player
Erweitern Sie das Menü Streamen, und aktivieren Sie die Option Remotesteuerung des Players zulassen.... Lassen Sie Windows Media Player geöffnet. Der Player muss ausgeführt werden, damit er als Ziel für "Wiedergeben auf" verfügbar ist.
Öffnen Sie in der Systemsteuerung Geräte und Drucker. Klicken Sie auf Geräte und Drucker hinzufügen. Suchen Sie im Assistenten zum Hinzufügen von Geräten und Druckern im Fenster Gerät oder Drucker zum Hinzufügen zu diesem PC auswählen den Digital Media-Renderer für Ihren PC. Dies ist Windows Media Player für Ihren PC. Wählen Sie ihn aus, und klicken Sie auf Weiter. Beim Abschließen des Assistenten wird die Instanz von Windows Media Player in der Liste der Multimediageräte angezeigt.

7. Ausführen der App

Drücken Sie in Visual Studio F5 (Debuggen), um die App auszuführen. Sie können eine beliebige Medienschaltfläche auswählen, um das erste Medienelement in den verschiedenen Medienbibliotheken wiederzugeben oder anzuzeigen. Öffnen Sie während der Medienwiedergabe den Charm "Geräte", und wählen Sie das Ziel für "Wiedergeben auf" aus, um das Medium auf das Zielgerät zu streamen.

Zusammenfassung

In dieser Schnellstartanleitung haben Sie einer Anwendung die Funktion "Wiedergeben auf" hinzugefügt, mit der Video- und Audioinhalte wiedergegeben und Bilder angezeigt werden. Mit der Funktion "Wiedergeben auf" können Benutzer Inhalt aus der App auf einen Empfänger für "Wiedergeben auf" im Netzwerk streamen.