How is it smeared with beauty?

Question

In “Beauty from the Internet”, in the beginning there is a purple / blue swoosh if you are in IE9 or Chrome. How it's done? What is it? Why is it displayed only in IE9 and Chrome?

Answer 1

This video is hosted on html5. Look for id = "streak". Here's a video if you're interested :)

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

Edit: html that actually does this

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

Answer 2

home.video.streak.js is the JS that controls 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 his page here:

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

Looks like doing it through a canvas.

Answer 3

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