HTML5 Tutorial: “How to use the Video Tag”

Posted on 01. Aug, 2011 by in HTML5, Photoshop Tutorials 102 views

Skill Level: Beginner

Okay, so in this tutorial I will teach you how to use the new tag in HTML5 called the video tag <video></video>

Before we begin, keep in mind that HTML5 is not completely launched yet; however it is partially supported by some newer browsers.

For this tutorial, I will recommend using Google Chrome version five or greater because you may face issues if you are using Internet Explorer, Firefox, Opera or Safari; though it all depends on the video format you’re using.

Let’s begin

  1. Okay create a new folder anywhere on your hard drive and name it anything you want. I’ll name it “FN”.
  2. Open the folder and paste your video into the folder you just created. Make sure that your video is either of these formats (MPEG4, Ogg or WebM). The format I am using for my video is MPEG4.
  3. Now create a new notepad text file in the same folder.
  4. Open the text file and write in all the standard HTML tags. Like this<html>
    <head>
    <title> HTML5 Tutorial: “How to use the Video Tag” </title>
    </head>
    <body>    </ body>
    </html> 
  5. Now between the body tags we will add the new HTML5 tag called the video tag.<video controls>
    <source src=”testvideo.mp4” />
    </video>
  6. Now save your notepad document as test.html or any name you like as long as the extension is .html
  7. Open your browser (Google Chrome recommended) and test your HTML5 new video tag.
  8. And we’re done!

Leave a Reply

Get Adobe Flash playerPlugin by wpburn.com wordpress themes