Ello Gov'nor :)
Today we'll be looking at the shiny new HTML5 and some of it's exciting new elements.
Please note that this tutorial is part of the Build Your Own Site series of tutorials. Feel free to restart the series.
Okay let's get into it ...
"htmlfive.html"page. Oh create an
"htmlfive.html"page in the same folder as your
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> Your browser does not support the HTML5 canvas tag. </canvas> </body> </html>
Check out those attributes will ya. We got
height etc. Play around with those, when you're done; move down and check out the audio tag.
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
"Alright, alright, alright ..." - Matthew McConaughey
Catch a breather now, got get yourself a sneaker bar and a couple of lettuce leaves.
The next element on the html5 list is the mighty video tag. Yeeaahh boooii, there is an element for videos!!!
And the pretty people at W3C brought it out with all the bells and whistles. And it's easily customisable.
Okay, let's take a look at this bad boy.
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
ogg. Also note that the video tag can also take audio tags. Now copy a video file from somewhere in your PC into the same folder as the
index.htmlfile. If you can encode it into different video formats;
avietc, that would be swell. As this will allowe you to see how each is handled by different browsers. Now replace the
"movie.mp4", and the
"movie.ogg"with the names of your video files. Such that your video element now looks like this:
<video width="320" height="240" controls> <source src="yourmovie.mp4" type="video/mp4"> <source src="yourmovie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
"In this tutorial, we will not be building a lunar phase in 3D. We're just gonna look at the element and some properties."The Village Geek
"video/avi"etc. Now save and reload :
http://localhost/htmlfive.html. Aaannnnnddd Voila! :) The video tag in all it's glory. Play the video and fiddle with the controls a bit :) ... Don't worry about it, it won't break :)
Cape Town, South Africa