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!
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:
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.
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
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.
The parameters inside the
param attributes allow you to customize your video.
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.
<embed> Tag's Attributes
|autostart||Determines whether to start the video as soon as the page has loaded.|
|hidden||Determines whether to hide the video. For example, if you just want background noise with no video.|
|loop||Determines whether to continously replay the video after it has finished.|
|playcount||Determines how many times to repeat the video.||A number value|
|volume||Determines 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:
||Watch this video|
This assumes that the video file is in the specified location.
Some of the more common video formats are:
- .swf - Shockwave/Flash File (by Macromedia/Adobe)
- .wmv - Windows Media Player video format (by Microsoft)
- .mov - Quicktime video format (by Apple)
- .mpeg - Video compression format (specified by the Moving Pictures Experts Group)
- .ogg - Open standard container format maintained by the Xiph.Org Foundation. Also includes .ogv, .oga, .ogx, and .spx extensions
- .webM - royalty-free, high-quality open video compression format for use with HTML5 video.
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:
AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm
If you're using Plesk:
- Select the website you want to configure (if you have more than one website)
- Go to Web Directories
- Click on the MIME Types tab
- Click Add New MIME Type
- Enter the file extension into the Extension field (eg, .ogg)
- 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).
- Click OK
Enjoy this page?
- Link to this page (copy/paste into your own website or blog):
- Link to Quackit using one of these banner ads.
Thanks for supporting Quackit!