Language: HTML | XAML

Quickstart: playing video in an app (HTML)

Applies to Windows and Windows Phone

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

  1. In Microsoft Visual Studio, open the designer for the application manifest by double-clicking the package.appxmanifest item in Solution Explorer.
  2. Click Capabilities.
  3. 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="http://www.contoso.com/clip.mp4" controls/>
</body>


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.

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="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.

Summary

This topic demonstrated how to play video at a URL using a <video> tag.

Related topics

Roadmaps
Roadmap for Windows Runtime app using JavaScript
Designing UX for apps
Adding multimedia
Samples
HTML media playback sample
Media Extension Sample
Reference Namespaces
Windows.Media
Windows.Media.PlayTo
Windows.Media.Protection
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

 

 

Show:
© 2014 Microsoft