Quickstart: playing video in an app (HTML)

Article
10/13/2015

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

This topic shows how use the HTML5 Video element to play a video in a Windows Runtime app using JavaScript.

For another sample that uses audio and video in Windows Runtime app using JavaScript, see the HTML media playback sample.

For info on supported audio and video media formats in Windows Runtime apps, see Supported audio and video formats.

Prerequisites

This topic assumes that you can create a basic Windows Runtime app using JavaScript. For help creating your first app, see Create your first Windows Store app using JavaScript.

Instructions

1. Declare Internet client capability

Open the application manifest file, package.appxmanifest.xml, and enable the Internet (Client) capability

In Microsoft Visual Studio, open the designer for the application manifest by double-clicking the package.appxmanifest item in Solution Explorer.
Click Capabilities.
Check the box for Internet (Client) capability.

This capability gives an application outbound access to the Internet, which is necessary to play video from an Internet URL.

Note This capability is not required when playing local video files.

2. Add the video element

Open the HTML file named Default.html and add the video element to the body of the document.

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

You should substitute a real URL for the "https://www.contoso.com/clip.mp4" URL in the example.

The Video element provides a set of built-in playback controls that enable the user to start or pause the video, seek to a new position, and adjust the volume. The playback controls are not visible by default. To enable them, just add the controls attribute, as shown. The controls appear when the user hovers the mouse over the video.

3. Set the Width and Height Attributes

If you know in advance the dimensions of the video, it is a good idea to set the width and height attributes on the video element. These attributes give the layout size of the element, in Cascading Style Sheets (CSS) pixels. When the page is loading, space is reserved for the element. If you leave out the width and height attributes, the page will reflow after the video is downloaded.

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

The width and height attributes always specify CSS pixels and do not take a unit. For example, "5cm" and "100%" are not valid.

If the width and height attributes don’t match the intrinsic size of the video, the video control stretches the video, while preserving the aspect ratio by using letterboxes if needed. However, it’s best to avoid stretching the video, as this can create visual artifacts. Whenever possible, encode video at the desired viewing size.