Quickstart: playing video in an app (HTML)
For info on supported audio and video media formats in Windows Runtime apps, see Supported audio and video formats.
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.
Open the HTML file named Default.html and add the video element to the body of the document.
You should substitute a real URL for the "http://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.
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="http://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.
This topic demonstrated how to play video at a URL using a <video> tag.
- Designing UX for apps
- Adding multimedia
- HTML media playback sample
- Media Extension Sample
- Reference Namespaces
- HTML5 Audio and Video
- Other resources
- Supported audio and video formats
- Audio and video performance
- How to keep the display on during audio/video playback