How is the swoosh done on beautyoftheweb.com?

Question

On Beauty of the Web, there is a purple/blue swoosh at the beginning, if you are in IE9 or Chrome. How is that done? What is that? How come it only displays in IE9 and Chrome?

Answer 1

This is a video placed with html5. Look for id="streak". Here is the video if you care :)

http://az6680.vo.msecnd.net/botwcontent/assets/videos/layout/streak.mp4

Edit: The html that actually does this

<div id="streak">
        <video id="vid" src="http://az6680.vo.msecnd.net/botwcontent/assets/videos/layout/streak.mp4"&gt;
        </video>
        <canvas id="streak_canvas" width="1920" height="256"></canvas>
    </div>

Answer 2

It's an MP4 file http://az6680.vo.msecnd.net/botwcontent/assets/videos/layout/streak.mp4
The reason it only works in Chrome and IE9 is because it's in a <video> tag, which is only in HTML5.

Answer 3

home.video.streak.js is the JS that is controlling the video.

var homeVideo;
var homeVideoTimer;
var homeVideoCanvas;
var homeVideoCanvasCtx;
function beginBackgroundVideo() {
    try {
        homeVideo = document.getElementById("vid");
        homeVideoCanvas = document.getElementById('streak_canvas');
        homeVideoCanvasCtx = homeVideoCanvas.getContext('2d');
        homeVideoCanvas.style["display"] = "block";
        homeVideoTimer = setInterval(drawBackgroundVideo, 16);
    } catch (e) { //sometimes, modernizr canvas detection fails
    }
}
function drawBackgroundVideo() {
    if (!isNaN(homeVideo.duration)) {
        if (homeVideo.ended === true) {
            homeVideoCanvas.style["display"] = "none";
            clearInterval(homeVideoTimer);
            return;
        } else {
            homeVideo.play();
        }
        // Draw the video
        try {
            homeVideoCanvasCtx.drawImage(homeVideo, 0, 0, homeVideoCanvas.width, 250);
        } catch (e) {
        }
    }
} /*   paste in your code and press Beautify button   */
if ('this_is' == /an_example/) {
    do_something();
} else {
    var a = b ? (c % d) : e[f];
}

and on the page its here:

<div id="streak">
        <video id="vid" src="http://az6680.vo.msecnd.net/botwcontent/assets/videos/layout/streak.mp4"&gt;
        </video>
        <canvas id="streak_canvas" width="1920" height="256" style="display: inline; "></canvas>
</div>

looks like its doing via canvas.