HTML5 Multimedia

by horhey

HTML

<h1>HTML5 Multimedia</h1>

<h2>AUDIO</h2>
<audio controls>
    <source src="http://playground.html5rocks.com/samples/html5_misc/rushus-modal_blues.mp3" type="audio/mpeg" />
    <source src="http://playground.html5rocks.com/samples/html5_misc/rushus-modal_blues.ogg" type="audio/ogg" />
    AUDIO tag not supported
</audio>

<h2>VIDEO</h2>
<video poster="http://media.w3.org/2010/05/sintel/poster.png" controls>
    <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
    <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm" />
    <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg" />
    VIDEO tag not supported
</video>

<h2>CANVAS</h2>
<canvas id="canvas" width="500" height="300">
    CANVAS tag not supported
</canvas>

<h2>SVG</h2>
<svg>
    <polygon fill="#E44D26" points="107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512" />
    <polygon fill="#F16529" points="256,480.523 376.03,447.246 404.27,130.894 256,130.894" />
    <polygon fill="#EBEBEB" points="256,268.217 195.91,268.217 191.76,221.716 256,221.716 256,176.305 255.843,176.305 142.132,176.305 143.219,188.488 154.38,313.627 256,313.627" />
    <polygon fill="#EBEBEB" points="256,386.153 255.801,386.206 205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333 162.771,407.634 255.791,433.457 256,433.399" />
    <path d="M108.382,0h23.077v22.8h21.11V0h23.078v69.044H152.57v-23.12h-21.11v23.12h-23.077V0z" />
    <path d="M205.994,22.896h-20.316V0h63.72v22.896h-20.325v46.148h-23.078V22.896z" />
    <path d="M259.511,0h24.063l14.802,24.26L313.163,0h24.072v69.044h-22.982V34.822l-15.877,24.549h-0.397l-15.888-24.549v34.222h-22.58V0z" />
    <path d="M348.72,0h23.084v46.222h32.453v22.822H348.72V0z" />
    <polygon fill="#FFFFFF" points="255.843,268.217 255.843,313.627 311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435 348.937,407.634 349.62,399.962 360.291,280.411...

CSS

canvas, img, video, audio, svg {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
    width:500px;
}

canvas {
    border: 1px solid #ccc;
}

JavaScript

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    res = 30,
    rad = Math.PI / 180,
    aa = ab = ac = ad = 0,
    cr = cg = cb = 128,
    a = seed(6),
    hw = Math.ceil(canvas.width / res),
    hh = Math.ceil(canvas.height / res),
    timer;


function plasma() {

    for (var x = 0; x < res; x++) {

        aa += 0.0005 * Math.cos(rad * x * a[0]);
        ac += 0.0010 * Math.sin(rad * (res - x) * a[2]);

        for (var y = 0; y < res; y++) {

            ab += 0.001 * Math.cos(rad * y * a[1]);
            ad += 0.001 * Math.sin(rad * (res - y) * a[3]);

            var h = x * 8 * Math.sin(rad * (aa + ab) * a[4]),
                j = y * 8 * Math.cos(rad * (ac + ad) * a[5]),
                k = (x * a[0] + y * a[1]) * 32 * Math.sin(rad * ((res - x) * h + (y - res) * h) * a[2] / 720),
                l = (res * a[3] - x * a[3] + (res * a[4] - y * a[4])) * 32 * Math.sin(rad * (x * h + y * j) * a[5] / 720);

            h = 48 * Math.cos(rad * h) + 42 * Math.cos(rad * j);


            cr = 128 + Math.ceil(42 * Math.cos(rad * k) + h);
            cg = 128 + Math.ceil(42 * Math.cos(rad * l) + h);
            cb = Math.ceil((cr + cg) / 2 - h * 2);

            context.fillStyle = 'rgb(' + cr + ',' + cg + ',' + cb + ')';
            context.fillRect(y * hw, x * hh, hw, hh);

        }

    }

    timer = setTimeout(plasma, 20);

}

function seed(count) {
    var res = [];
    for (var i = 0; i < count; i++) {
        res[i] = Math.ceil(Math.random(0, 1) * 3 + 1);
    }
    return res;
}

canvas.onmouseover = function() {  
    plasma();
};

canvas.onmouseout = function() {
    clearTimeout(timer);
};