HTML Video Codes

So you've made a video, you've uploaded it to a web server on the Internet, and now you want to show it to your users?

No problem! This page provides you with all the code you need to do the job!

HTML5 <video> Tag

The latest version of HTML (i.e. HTML5) makes it extremely easy to add video to a web page. HTML5 allows you to use a <video> tag, which, believe it or not, embeds video right into your web page!

Here's an example:

CodeResult

If you can see the video controls but the video doesn't play when you click the "Play" button, your browser might not support this file type (i.e. Ogg). In this case, try the same code, but with a different file format.

At the time of writing, the <video> tag has only recently been introduced into the HTML5 specification (which is still in draft status). Despite this, browser support is quite widespread, and I expect the HTML5 video tag will become the most popular way to view videos on the web. Even YouTube appears to be moving away from Flash based video to HTML5 video.

For more detail, see this page about the HTML <video> tag.

If the HTML5 <video> tag doesn't work for you, you can always try the old method of embedding video on a web page. See below.

HTML <object> Tag

You can also embed HTML video code into your web page using the <object> tag. To cater for browsers that don't support the <object> tag, you can nest the <embed> tag inside the <object> tag.

The parameters inside the param attributes allow you to customize your video.

Example:

CodeResult

This code embeds a MySpace video into the web page. MySpace uses Shockwave (or Flash) to present the video controls. You could just as easily embed a different video format and the user's browser should use the appropriate plugin to display the video and it's controls.

The <embed> Tag's Attributes

AttributeDescriptionPossible Values
autostartDetermines whether to start the video as soon as the page has loaded.
  • True
  • False
hiddenDetermines whether to hide the video. For example, if you just want background noise with no video.
  • True
  • False
loopDetermines whether to continously replay the video after it has finished.
  • True
  • False
playcountDetermines how many times to repeat the video.A number value
volumeDetermines how loud the audio should be.Number value between 1 and 100

Linking to a video file

The easiest way to include video on your website is to link to it. This is suitable if you don't want to actually embed the video within your HTML page. You can link to a video file using the <a> tag. All you need to do is write something like this:

CodeResult

Watch this video

This assumes that the video file is in the specified location.

Video Formats

Some of the more common video formats are:

Web Server Support for MIME Type

You must ensure that your web server supports the video format that you use. If you find that your video plays OK on your local computer, but doesn't play on your live web server, it's probably because the live web server isn't configured properly for your video format. You need to ensure your web server supports the MIME type of your video.

If you're using an Apache web server, you can add the following code to your httpd.conf file or to an .htaccess file in the directory where your video file is:

Copy to Clipboard
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

If you're using Plesk:

  1. Select the website you want to configure (if you have more than one website)
  2. Go to Web Directories
  3. Click on the MIME Types tab
  4. Click Add New MIME Type
  5. Enter the file extension into the Extension field (eg, .ogg)
  6. Enter the content into the Content field (eg, video/ogg). Alternatively, you may be able to select the value from the drop down menu (if it's available).
  7. Click OK

Enjoy this page?

  1. Link to this page (copy/paste into your own website or blog):
  2. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!

Sponsored Link: Design CODE-FREE Websites

Check a Domain:

ZappyHost Logo