How to enable stereo video playback (HTML)

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

This topic shows how to enable stereo video playback by setting the msStereo3DRenderMode attribute.

When a video element is in the optimized rendering mode, stereo video can be enabled only if the following are all true:

  • The system is stereo-capable
  • The display setting is turned on for stereo rendering
  • The video element has been extended to provide the interfaces for Windows Runtime app using JavaScript to include the stereo video experience

The read-only (Boolean) attribute msIsStereo3D indicates whether the video source of the video element is stereo 3D. The msStereo3DPackingMode attribute indicates the frame packing mode of the video. The value is none for regular 2D video. Other possible values include topbottom and sidebyside. The value of this attribute can be adjusted when there is no standard metadata in the video stream to indicate the stereo property of the video. When the system display setting is set to enable stereo display (the system is stereo-capable), apps can turn on the stereo display mode by setting the msStereo3DRenderMode attribute to stereo. The default value of the attribute is always mono.

function stereoPlay() {
    var myVideo = document.getElementById("videoTag1");
    if (myVideo.msIsStereo3D == true &&
        myVideo.msIsLayoutOptimalForPlayback == true &&
        Windows.Graphics.Display.DisplayProperties.stereoEnabled == true)
        myVideo.msStereo3DRenderMode = "stereo";
    myVideo.play();
}

The stereo display setting status is available through the Windows.Graphics.DisplayProperties.StereoEnabled property (Boolean). The setting can only be changed by going to display control panel directly. Windows Store apps using JavaScript should also register the Windows.Graphics.DisplayProperties.StereoEnabledChanged event to capture actual system settings.