Quickstart: playing video in an app (Windows Store apps using JavaScript and HTML) (Windows)

Language: JavaScript and HTML | VB/C#/C++ and XAML

1 out of 3 rated this helpful - Rate this topic

In this article

Prerequisites
Declare Internet client capability
Add the video element
Set the Width and Height Attributes
Summary
Related topics

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

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

Objective: Add video to a Windows Store app using JavaScript by using just HTML markup.

Prerequisites

This topic assumes that you can create a basic Windows Store app built for Windows using JavaScript that uses the Windows Library for JavaScript template. 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 Express 2012 for Windows 8, 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.

HTML


<body>
  <video 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.

HTML


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

Quickstart: playing video in an app (Windows Store apps using JavaScript and HTML)