Schnellstart: Wiedergeben von Videos in einer App (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 ]

In diesem Thema wird gezeigt, wie das HTML5-Element Video zum Wiedergeben eines Videos in einer Windows-Runtime-App mit JavaScript verwendet wird.

Ein weiteres Beispiel für die Verwendung von Audio und Video in einer Windows-Runtime-App mit JavaScript finden Sie im Beispiel für die HTML-Medienwiedergabe.

Informationen zu unterstützten Audio- und Videomedienformaten in Windows-Runtime-Apps finden Sie unter Unterstützte Audio- und Videoformate.

Voraussetzungen

Dieses Thema setzt voraus, dass Sie eine einfache Windows-Runtime-App mit JavaScript erstellen können. Informationen zum Erstellen der ersten App finden Sie unter Erstellen Ihrer ersten Windows Store-App mit JavaScript.

Anweisungen

1. Deklarieren der Internetclientfunktionen

Öffnen Sie die Manifestdatei der App ("package.appxmanifest.xml"), und aktivieren Sie den Internet (Client) capability

Öffnen Sie in Microsoft Visual Studio den Designer für das Anwendungsmanifest, indem Sie im Projektmappen-Explorer auf package.appxmanifest doppelklicken.
Klicken Sie auf Funktionen.
Aktivieren Sie das Feld für die Internet (Client) -Funktion.

Diese Funktionen ermöglichen einer App ausgehenden Internetzugriff. Dies ist für die Videowiedergabe über eine Internet-URL erforderlich.

Hinweis Diese Funktionalität wird bei der Wiedergabe lokaler Videodateien nicht benötigt.

2. Hinzufügen des video-Elements

Öffnen Sie die HTML-Datei mit dem Namen "Default.html", und fügen Sie das video-Element im "body"-Abschnitt hinzu.

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

Sie sollten anstelle der URL "https://www.contoso.com/clip.mp4" im Beispiel eine existierende URL angeben.

Das Video-Element stellt eine Reihe von integrierten Wiedergabesteuerelementen bereit, mit denen der Benutzer das Video starten und anhalten, an eine Stelle im Video springen und die Lautstärke anpassen kann. Die Wiedergabesteuerelemente werden standardmäßig nicht angezeigt. Fügen Sie das controls-Attribut wie folgt hinzu, um sie zu aktivieren. Die Steuerelemente werden angezeigt, wenn der Benutzer den Mauszeiger über das Video bewegt.

3. Legen Sie die Breiten- und Höhenattribute fest.

Wenn Sie die Auflösung des Videos bereits kennen, ist es empfehlenswert, das width-Attribut und das height-Attribut für das video-Element festzulegen. Diese Attribute legen die Layoutgröße des Elements in CSS (Cascading Style Sheets)-Pixeln fest. Beim Laden der Seite wird Speicherplatz für das Element reserviert. Wenn Sie die Breiten- und Höhenattribute nicht angeben, wird die Seite nach dem Download des Videos wieder geändert.

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

Die Breiten- und Höhenattribute werden immer in CSS-Pixel angegeben. Die Angabe einer Einheit ist nicht zulässig. "5 cm" und "100 %" sind z. B. keine gültigen Werte.

Wenn die Breiten- und Höhenattribute nicht mit der systemeigenen Größe des Videos übereinstimmen, wird das Video vom Videosteuerelement gestreckt, wobei das Seitenverhältnis ggf. mithilfe des Letterboxformats beibehalten wird. Ein Strecken des Videos sollte jedoch vermieden werden, da dadurch visuelle Artefakte entstehen können. Codieren Sie Videos nach Möglichkeit immer in der gewünschten Anzeigegröße.

Zusammenfassung

In diesem Thema wurde dargestellt, wie Videos über eine URL mithilfe des <video>-Tags wiedergegeben werden.