How to keep the display on during audio/video playback (Windows Store apps using JavaScript and HTML)

Learn how to keep the display on while playing back local or streaming video. Normally, a Windows 8 device will dim the display (and eventually turn it off) to save battery life when the user is away, but video apps need to keep the screen on so the user can see the video. The DisplayRequest class lets you tell Windows to keep the display turned on so the user can see the video.

What you need to know

Technologies

• Windows.System.Display

Prerequisites

• This topic shows how to add code to an existing multimedia app. In particular, your app should have code for the video player event handlers. For more info see Quickstart: Using Play To in apps.

Instructions

Step 1: Create a DisplayRequest object

Create a global DisplayRequest variable. Initialize it to null.

// Create this variable at a global scope.
var dispRequest = null;

Step 2: Activate the DisplayRequest just before starting video playback

Call requestActive to notify Windows that the app requires the display to remain on.

The following example activates the request before starting video playback:

function startVideoPlayback() {
    
    if (dispRequest === null) {
        
        // Activate a display-required request. If successful, the screen is 
        // guaranteed not to turn off automatically due to user inactivity.
        dispRequest = new Windows.System.Display.DisplayRequest;
        dispRequest.requestActive();
        
        WinJS.log && WinJS.log("Display request activated", 
                               "sample", 
                               "status");
        
        
        // Insert your own code here to start the video.
        
    }
}

Step 3: Deactivate the DisplayRequest when video playback stops or is paused

Call requestRelease to release the display request whenever video playback is stopped, paused, or interrupted by a playback error. When your app no longer has any active display requests, Windows will save battery life by dimming the display (and eventually turn it off) when the device is not being used.

The following example deactivates the request:

function stopVideoPlayback() {
    
    // Insert your own code here to stop the video.
    
    if (dispRequest != null) {
        
        // Deactivate the display request and set the var to null.
        dispRequest.requestRelease();
        dispRequest = null;
        
        WinJS.log && WinJS.log("Display request released", 
                               "sample",
                               "status");
        
    }
}

Remarks

Note  Windows automatically deactivates your app's active display requests when it is moved off screen, and re-activates them when your app comes back to the foreground.

You can also use this API to keep the screen on while giving directions in a GPS app. In this case, substitute navigation events for video playback events.

To see similar code in the context of functions, download the display power state sample.

Related topics

Quickstart: playing video in a Windows Store app

Build date: 11/29/2012