HTML5 video tutorial

Unfortunately the World Wide Web did not have a built in language for video back when it was created, so web browsers were unable to play or embed videos without a third party plug-in/software application. Now with HTML5, you are able to add native video to your web pages without needing a third party software installed onto your computer/web browsers.

Open the eh5v-howto.html file to see how to add an HTML5 video to your web page

Open the 'eh5v-howto.html' file to see how to add an HTML5 video to your web page

There are three main formats that all major browsers may support and they are: WebM, MP4, and OGV. Not every browser will support all three, so it is important that you add in multiple sources within the language coding for your video file, so that the browser can look in more than one place if the first one in the list does not work or is not supported. Here is an example of a single source:

<video src="my-video.webm" width="400" height="200"></video>

- you will have multiple of these within the video tag with multiple different file formats. The video will look at the first one that will work; if all won't work then the video will not play.

In order to embed the video file into your web page you will need to use the video element attribute. Within this tag you will have a SRC or source attribute, which is where the web browser will look for the video. Within the video element, you can specify the <height> and <width> of the video and then close it off with a element attribute.

Within the video elements attribute, you can add in a controls option so that the browser will playback the video using the default controls. If this is not inputted then the browser may not use any controls at all, and thus the video will not have a play, stop, pause control mechanism. In addition to this, you can add in a <loop> attribute within the video element to have the video automatically be looped by the browser. Here is an example:

<video src="my-video.webm" width="400" height="200" loop></video>.

If you want to have a promotional image or picture that the user sees prior to hitting the play button on the video controls, then you can add in the <poster> attribute that will input an image to be displayed in place of the video until the video begins playing. If you do not specify this, then the browser may fill it with the first frame of the video, or a black box. Here is an example of the poster attribute:

<video src="my-video.webm" width="400" height="200" poster="featured-frame.png"></video>

In addition to the above attributes you can also add in a mute and auto-play attribute that will either instruct the browser to mute the video when the page loads, or auto-play the video.

Step by step:

  • 1.Choose the language of your HTML5 document.
  • 2. Place a header and add a title.
  • 3. Then use the body element to add in your video attribute.
  • 4. Choose the dimensions of your video, and the sources for the browser to play from.
  • 5. Add in the control attribute.
  • 6. Choose whether you want to have the poser, mute, and auto-play attributes available.
  • 7. Close off your video and body of your HTML5 document with: , </body>
  • 8. End the document with: </html>.

HTML5 will allow a lof of web developers and people who code their own web pages to add in native video without requiring a third party application. All major browsers will support at least one of the three format options, and will have fall backs such as Flash if required. If you are looking for an easy place to start with HTML, please check out EasyHTML5Video at: http://easyhtml5video.com.

Free Download

Support

For troubleshooting, feature requests and general help contact us at Mail Support. Make sure to include details on your browser, operating system, Easy Html5 Video version, link to your page. In most cases you'll get a reply within 1 business day.