[Coding Tutorial] HTML5 Video Player

by **Dumbledore27** 2011-07-21, 07:46

Have you wanted to make a video player, but you don't have Flash? Well, so did I. Laughing

And yet, there is a solution with HTML5 a.k.a. "Flash Killer".

Preview ~ Autoplay
Preview ~ No Autoplay, Image

Before you start, you must know that not every browser will support HTML5 or your video format! You can check if your browser does support it or not here. What are you interested in? It's "Video" section.
Check if there's a check (no pun intended Razz

) for Video Element. If there isn't one, you will have to use another browser.
You also want to check which formats are supported: MPEG-4 (*.mp4), Ogg Theora (*.ogg) and WebM (*.webm). But don't worry if one of them isn't supported, we will get into it later.

First, create an HTML document. You can do this with pretty much any word processor, including Notepad. Wink

You can put any other codes or text in the document too.

Code:: <head><title>Place title here</title></head> <body><video></video></body>

If you want the video to automatically play when the page loads, add autoplay="autoplay" to the video tag, so it will be like this:

Code:: <video autoplay="auoplay"></video>

Other features you can add are:
controls="controls" It will show the Play/Pause button, Mute button and other controls.
loop="loop" Will loop the video
poster="IMAGE URL" Will add an image, displayed until the video plays. Replace IMAGE URL with an actual image URL.
preload="preload" Will load the video when page loads and not when user presses Play button like it usually does. Ignored if Autoplay is on.

When you are done, you need to convert the video to the right format. Try to use one that most browsers can support. Here are browsers that support certain formats:

Format	Internet Explorer	Mozilla Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

Source: W3Schools

For conversion, I would personally suggest Miro Converter (www.mirovideoconverter.com).
Convert the videos to:

Theora (*.ogg)
WebM (vp8) (*.webm)
MP4 video (*.mp4)

Once you are done, upload the videos to an online server. If you have a website with File Managers, upload it there. Otherwise, also Mediafire.com would do.

Now in between the VIDEO and /VIDEO tags, add this:

Code:: <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> Your browser does not support HTML5 video.

Replace the MOVIE with the link to the video. Note that if you uploaded it to Mediafire, you mustn't give the download link, but direct link (right click on "Click here to start download" and select "Copy link address").

What this will do, the browser will first try to play the OGG-encoded video. If it won't support it, it will go to the next one, which is MP4-encoded. If it won't support that one either, it will go to WEBM-encoded video. And if it won't support any of the formats or HTML5 itself, it will write the text Your browser does not support HTML5 video. (Note: you can change that line. Wink

).
When you are done, you should have a code, somewhat like this one:

Code:: <video autoplay="autoplay" controls="controls"> <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> Your browser does not support HTML5 video.</video>

Thank you for reading this tutorial.
Next time, we are going to take a look at HTML5 audio player, like this:
https://advertisingfield.forumotion.com/h19-

Tips and warnings:

To view the video in full screen, use Firefox. Right-click on the video and selct Full screen mode
Remember to save the page with extension .HTM or .HTML!
If you will not upload the page anywhere, put the videos and the HTML file in the same folder and for the video URL just write movie.mp4 etc.

Want this forum?

[Coding Tutorial] HTML5 Video Player

[Coding Tutorial] HTML5 Video Player