Share via


How to flip video horizontally (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]

Use the msHorizontalMirror attribute to flip a video horizontally.

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

Step 1: Using the msHorizontalMirror attribute

When the msHorizontalMirror attribute is set to True, the Video element flips the rendered video horizontally. This is useful when the video tag is used for webcam preview, where the image in the preview window should move left or right with the user rather than going in the opposite direction.

This example gets a Video object defined in HTML and sets the msHorizontalMirror attribute to True.

function mirrorVideo() {
    var myVideo = document.getElementById("videoTag1");
    myVideo.msHorizontalMirror = true;
    myVideo.play();
}

Basic Media Playback Sample

Video