Embed Video on Website Using HTML5

HTML5 video is a new element introduced in the HTML5 for the purpose of playing videos or movies, partially replacing the object element. The Flash is using object element. HTML5 video is intended by its creators to become the new standard way to show video online, but has been hampered by lack of agreement as to which video formats should be supported in the video element. Now, there're three formats the video element supports: H.264, OGG Theora, and WebM. Different web browsers support different file formats. Refer to the following table.

Browser	H.264	OGG Theora	WebM
Internet Explorer	9.0	No	Manual install
Mozilla Firefox	No	3.5	4.0
Google Chrome	3.0 (will be removed)	3.0	6.0
Safari	3.1	Manual install	Manual install
Opera	No	10.50	10.60

So, you need to create 3 formats for your every video. However, from the table above, two formats is enough: H.264+OGG Theora, or H.264+WebM. It's your choice to create 2 or 3 formats for your video according to your situation. We recommend creating all the 3 formats.

First, convert your video file to H.264, OGG Theora, and WebM.

We recommend you a great video converter - Total Video Audio Converter that supports all of the H.264, OGG Theora, and WebM formats.

Free Download Total Video Audio Converter
Install the Program by Step-by-step Instructions
Launch Total Video Audio Converter
Choose Video Files

Add Files

Open

Choose Output Format

to OGV

H.264

to H.264 (*.mp4)

WebM

to WebM (*.webm)

Convert

Click "Convert" to convert all video files in list to target format.
Done

Second, embed video on your web page using video element.

It's quite simple. Just insert <video> and </video> code block to where you want the video to be on your web page. The code block might look something like this:

<video src="path/to/video.mp4" width="width_in_pixel" height="height_in_pixel" controls></video>

To specify multiple sources, the code block might look something like this:

You can use the following optional attributes for video element.

autoplay: specifies that the video will play automatically
controls: specifies if video controls bar will be displayed. The controls bar includes play, pause, seeking, volume, and full screen toggle
height: sets height of the video player in pixel
loop: specifies if the video plays repeatedly (Firefox and Opera don't support the attribute)
poster: specifies an image to be shown while the video is downloading. It could be a path to a image file or an URL
preload: specifies if the web browser will load the video when the page loads. The value could be one the following values. (IE and Opera don't support the attribute)

auto: load the video automatically when the page loads
metadata: load only metadata when the page loads
none: NOT load the video when the page loads

src: specifies source of the video file. It could be path to a video file on your website or an URL beginning with http://
width: sets width of the video player in pixel

Attributes for source element.

src: specifies source of the video file. It could be path to a video file on your website or an URL beginning with http://
type: the MIME type of the video file. It could be one of the following values.

video/ogg
video/mp4
video/webm

If you want to show some information for the web browser that doesn't support video element, you could add some text like this:

So, let's view a sample video.

Code of video above is:

<video width="640" height="360" controls>
<source src="html5/640x360.mp4" type="video/mp4">
<source src="html5/640x360.webm" type="video/webm">
<source src="html5/640x360.ogv" type="video/ogg">
Your browser does not support the video element.
</video>

The video above doesn't play on compatible web browser? Oh, I forgot to say another important factor. It's MIME-type on web server side. As the Firefox won't play the OGG video if the MIME-type is wrong.

Apache: Add the following lines in .htaccess file at root directory of your web/www directory. If there isn't the file, please create it manually.

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Nginx: Add the following lines in mime.types file at nginx conf directory, and then reload nginx.

video/ogg ogv;
video/mp4 mp4;
video/webm webm;

And then, you can check if the MIME-type/Content-Type is set correctly using the Web Sniffer.

If you're using the Safari and it doesn't play video above, please make sure the QuickTime has been installed on your computer.

To be compatible with IE9, you need to add the following line in first line of your webpage file. The line makes Internet Explorer 9 displays webpages that contain the HTML5 document type in IE9 Standards mode. Click here to get more detailed information.

<!doctype html>

Is the video above compatible with iPhone/iPad/iPod? Yes, it is. However, the iPhone/iPad/iPod only plays H.264 (.mp4), and the MP4 must be encoded with "H.264 Baseline Profile". And, it's possible with the Total Video Audio Converter. Before converting to H.264, please click Options on the Total Video Audio Converter, and then choose "H.264 (Baseline Profile)" at Codec, refer to the following screen shot.

And then, convert your video to H.264 (*.mp4). The outputted MP4 file will works on iPhone/iPad/iPod.

Samples:

H.264 only 640x360, 00:30 (works on IE 9.0, Chrome 3.0+, Safari 3.1+, and iPhone/iPad/iPod)
OGG only 640x360, 00:30 (works on Firefox 3.5+, Chrome 3.0+, and Opera 10.50+)
WebM only 640x360, 00:30 (works on Firefox 4.0+, Chrome 6.0+, and Opera 10.60+)
H.264, WebM, and OGG 480x204, 02:13 (works on IE 9.0, Firefox 3.5+, Chrome 3.0+, Safari 3.1+, Opera 10.50+, and iPhone/iPad/iPod)
H.264, WebM, and OGG 640x266, 03:30 (works on IE 9.0, Firefox 3.5+, Chrome 3.0+, Safari 3.1+, Opera 10.50+, and iPhone/iPad/iPod)
H.264, WebM, and OGG 720x406, 02:29 (works on IE 9.0, Firefox 3.5+, Chrome 3.0+, Safari 3.1+, Opera 10.50+, and iPhone/iPad/iPod)
H.264, WebM, and OGG 1280x690, 02:15 (works on IE 9.0, Firefox 3.5+, Chrome 3.0+, Safari 3.1+, Opera 10.50+, and iPhone/iPad/iPod)

Top

Free Download Total Video Audio Converter

Embed Video on Website Related Topics: