Security Simplified

HTML5 Tags - Video, Audio, Canvas, etc

Example #1 - Video with Tracks

This example shows the new HTML5 video and track options that are available. This video was my teaching presentation from CIT 230, but I've added the track to it to show off the closed captioning features.

HTML

<video controls preload="none" poster="/images/video-preview-navigation-presentation.jpg" class="img_center">
    <source src="/media/navigation-presentation.mp4" type="video/mp4">
    <track src="/media/cit230-teaching-presentation-en.vtt" kind="subtitles" srclang="en-US" label="English" default>
    Your browser does not support the video tag.
</video>

Example #2 - Audio

This example shows the new HTML5 audio tag. This audio clip is of a security podcast that I tied to a page from my CIT 230 class.

HTML

<audio controls>
    <source src="/media/defensive-security-podcast-episode-127.mp3" type="audio/mpeg">
</audio>

Example #3 - Canvas

Below are just a few examples of a canvas and what can be done. Canvas can be utilized to paint any image in a bitmap type of form. This has been utilized for games and applications alike to provide functionality. Most of these examples were pulled from W3Schools.com, but the final example is something I thought would be interesting to show where you can select an image and it will draw it in the canvas. I found the solution to this at the following URL

Circle on Canvas

HTML

<canvas id="example1" width="200" height="100" style="border:1px solid #000000;">Your browsers does not support the HTML5 canvas tag.</canvas>

JavaScript

var example1 = document.getElementById("example1");
var ctx1 = example1.getContext("2d");
ctx1.beginPath();
ctx1.arc(95,50,40,0,2*Math.PI);
ctx1.stroke();

Text on Canvas

HTML

<canvas id="example2" width="200" height="100" style="border:1px solid #000000;">Your browsers does not support the HTML5 canvas tag.</canvas>

JavaScript

var example2 = document.getElementById("example2");
var ctx2 = example2.getContext("2d");
ctx2.font = "30px Arial";
ctx2.strokeText("BYUI Rules!",10,50);

Color Gradients on Canvas

HTML

<canvas id="example3" width="200" height="100" style="border:1px solid #000000;">Your browsers does not support the HTML5 canvas tag.</canvas>

JavaScript

var example3 = document.getElementById("example3");
var ctx3 = example3.getContext("2d");
var grd3 = ctx3.createLinearGradient(0,0,200,0);
grd3.addColorStop(0,"black");
grd3.addColorStop("0.3","magenta");
grd3.addColorStop("0.5","blue");
grd3.addColorStop("0.6","green");
grd3.addColorStop("0.8","yellow");
grd3.addColorStop(1,"red");
ctx3.fillStyle = grd3;
ctx3.fillRect(0,0,200,100);

Load Image on Canvas

HTML

<canvas id="example4">Your browsers does not support the HTML5 canvas tag.</canvas>
<form action="#" onsubmit="return false;">
    <input type="file" id="selectedFile">
    <input type="button" id="btnLoadFile" value="Load">
</form>

JavaScript

function loadImage() {
    var input;
    var file;
    var fileReader;
    var image;

    if(typeof window.FileReader !== "function") {
        write("The file API isn't supported on this browser yet.");
        return;
    }

    input = document.getElementById("selectedFile");
    if(!input) {
        alert("Unable to load image.");
    } else if (!input.files) {
        alert("This browser doesn't seem to support the file API.");
    } else if (!input.files[0]) {
        write("Please select a file.");
    } else {
        file = input.files[0];
        fileReader = new FileReader();
        fileReader.onload = createImage;
        fileReader.readAsDataURL(file);
    }

    function createImage() {
        image = new Image();
        image.onload = imageLoaded;
        image.src = fileReader.result;
    }

    function imageLoaded() {
        var canvas = document.getElementById("example4");
        canvas.width = image.width;
        canvas.height = image.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(image,0,0);
    }
}

document.getElementById("btnLoadFile").addEventListener("click", loadImage);

Example #4 - Additional Tags

Throughout this website you will find examples of the new HTML5 standard. From the use of the header, main, nav, and footer tags to the section and article tags, I've made use of many of them. Below are a few examples from my websites code reflecting these new tags.

<html lang="en-us">
<title>AllThingsNetwork.org | Security Simplified</title>
</head>
<body id="home">
    <div id="page">
        <header>
            <a href="/index.php"><img src="/images/allthingsnetworklogo_small.jpg" alt="AllThingsNetwork.org Logo" title="AllThingsNetwork.org Logo">
            <h1>Security Simplified</h1></a>
        </header>
        <nav>
            ...
        </nav>
	<main id="main">
            <section class="homepage_section" style="background-image: url('/images/home_header_background.jpg');">
                ...
            </section>
        </main>
            <footer>
            ...
            </footer>
    </div>
</body>
</html>