How to enable effects in a <video> tag (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 video and audio effects in a Windows Runtime app using JavaScript.

The following example applies the VideoStabilization effect to a Video element. To apply a different effect, replace the first parameter with the activatable ClassID of your media extension.

function effects() {
    var myVideo = document.getElementById("videoTag1");
    myVideo.msInsertVideoEffect(
        "Windows.Media.VideoEffects.videoStabilization", // ClassID
        true,   // effectRequired
        null);  // config
    myVideo.play();
}

Note  The number of effects on each active stream is limited to a maximum of 2. For example, a video tag can have two video effects enabled and two audio effects enabled if there is an audio stream being played out of the same video file.

 

For an example of using custom effects, see the Media Extension Sample. Using media extensions

Video

Audio

Media Playback Sample

Using media extensions