Как работает swoosh на beautyoftheweb.com?

Question

На Красота в Интернете , в начале есть фиолетовая / синяя галочка, если вы используете IE9 или Chrome. Как это сделать? Что это такое? Почему он отображается только в IE9 и Chrome?

Answer 1

Это видео размещено с html5. Ищите id = "streak". Вот видео, если вы заботитесь:)

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

Редактировать: HTML, который на самом деле делает это

<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 - это JS, который контролирует видео.

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];
}

и на странице здесь:

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

похоже, что это делается через холст.

Answer 3

Это файл MP4 http://az6680.vo.msecnd.net/botwcontent/assets/videos/layout/streak.mp4
Причина, по которой он работает только в Chrome и IE9, заключается в том, что он находится в теге <video>, который только в HTML5.