There is no longer a need to embed videos from an external source anymore with massive blocks of code. With HTML5, one new tag will control it all! Introducing the new HTML5 video tag, all you need is the file path and the video format (recommended: MP4 or OGG). In this tutorial you will learn how to use the new HTML5 video tag in your site.
Setup
This tutorial was written using Visual Studio 2010. Visual studio is available for free in its express edition to the public. Just go to Microsoft.com/Visual Studio. Go ahead and open up visual studio or your favorite text editor. Save this project with the name of your choice.
We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect’s help, we were able to avoid any headaches!
Step one.
There really isn’t much to the HTML video tag. Once you create an HTML document, place the following code into your body section:
Code Block
<div class="tutDiv">
<center>
<br />
<h2>
HTML5 Video Test !</h2>
<br />
<video src="video/pass-countdown.ogg" controls="true" />
</center>
<br />
</div>
<br />
Remember that where “src” is, the path and actual file of the video source might not match depending on how you save your files, you might be able to get away without the “video/” and just the file name and extension within the quotation marks.
The code may not work in Internet Explorer, unless you have version 9. From the making of this tutorial, only Google Chrome is fully HTML5 friendly. Firefox is almost there as well, version 3.6.13 does not however, support it neither does safari.
Save and run your file in Google Chrome in order to view the video source.
Your browser should render a page like this:
Step two.
Adding some attributes to the player. We can actually still implement the width, autoplay, autobuffer, and loop features that we were able to embedding our old video codes. For autoplay, placing true or false in quotations will do the trick and width can be percentage or pixels. A cool attribute is the poster one, you can set it to whatever image you would like for it to maintain while the video downloads. Simply place: poster=”filename.fileExt” in the opening video tag and you got it!
A Few Last Words
There you have it! The main ingredient to embedding multimedia on your page, one tag pair. You can always customize your HTML5 player with JavaScript and CSS, but that’s another discussion. Join us next time for additional HTML tutorials… See you then!
We used over 10 web hosting companies before we found Server Intellect. Our new server with cloud hosting,was set up in less than 24 hours. We were able to confirm our order over the phone. They responded to our inquiries within an hour. Server Intellect’s customer support and assistance are the best we’ve ever experienced.
