Total Video Audio Converter Screen Shots
Home Getting Started Download Buy Now! Screen Shots Support Contact
Total Video Audio Converter

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 Internet Explorer 9.0 No Manual install
Mozilla Firefox Mozilla Firefox No 3.5 4.0
Google Chrome Google Chrome 3.0 (will be removed) 3.0 6.0
Safari Safari 3.1 Manual install Manual install
Opera 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.

  1. Free Download Total Video Audio Converter
  2. Install the Program by Step-by-step Instructions
  3. Launch Total Video Audio Converter
  4. Choose Video Files

  5. Click Add Files
    Click "Add Files" to choose video files.

    Choose one or more video files
    Choose one or more video files you want to convert and then click Open.

  6. Choose Output Format

  7. to OGV
    Click on combo-box of output format and then choose "to OGV". Why not "to OGG"? Because the OGG is also extension of OGG audio; the OGV is OGG Video.

    To convert to H.264, please choose "to H.264 (*.mp4)".

    To convert to WebM, please choose "to WebM (*.webm)".

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

    Converting

  9. 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:

<video width="width_in_pixel" height="width_in_pixel" controls>
<source src="path/to/video.mp4" type="video/mp4">
<source src="path/to/video.webm" type="video/webm">
<source src="path/to/video.ogv" type="video/ogg">
</video>

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:

<video width="width_in_pixel" height="width_in_pixel" controls>
<source src="path/to/video.mp4" type="video/mp4">
<source src="path/to/video.webm" type="video/webm">
<source src="path/to/video.ogv" type="video/ogg">
Your browser does not support the video element.
</video>

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">
<p><b><font color="#AA0000">Your browser does not support the video element.</font></b></p>
</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.

H.264 Baseline Profile

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

Samples:

 

 

Top

Embed Video on Website Related Topics:

 

Home | Getting Started | Download | Buy Now! | Screen Shots | Support | Contact | Links
Copyright © 2009-2014 Hoo Technologies All rights reserved. Privacy Policy