How to open media files from the network (HTML)

  • Article

[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]

Set the media source of an audio or video element to a media file on the network.

Prerequisites

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

This topic assumes you are familiar with the HTML the audio and video elements. For an introduction on using the audio and video elements, see the Quickstart: playing video in an app.

Instructions

Step 1: Introduction

The audio and video elements play audio or video media in a Windows Runtime app using JavaScript. The src property specifies the media file to play. This can be a file on the network, a file included with the application, or a file on the local system.

To play files on the network or files embedded with the app, set the src property to the path of the file.

To open files on the local system or from Microsoft OneDrive, you can use the FileOpenPicker to get the file. See How to open local media files using the FileOpenPicker control for more info.

In this topic we will go over setting the src to a media file on the network or embedded in the app.

For info on supported audio and video media formats in Windows Store app, see Supported audio and video formats.

Step 2: Capabilities

If you are getting files off the internet you will need to set the Internet (Client) capabilities in the Package.appmanifest file of your project. See App capability declarations for more info on declaring capabilities.

Step 3: Set the source to a file on the network in HTML

Here is some code that attempts to set the src property of the video element.

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

Step 4: Set the source in JavaScript

    var media = document.getElementById("mediaVideo");
    media.src = "https://www.contoso.com/clip2.mp4";

How to open local media files using the FileOpenPicker control