HTML5
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
Here's an example:
If you are reading this, it is because your browser does not support the 'video' element. Try using the 'object' element listed further down the page.
HTML Code:
If the HTML5
HTML
You can also embed HTML video code into your web page using the
The parameters inside the
Example Code:
Result:
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
This results in:
<video>
TagThe 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 are reading this, it is because your browser does not support the 'video' element. Try using the 'object' element listed further down the page.
At the time of writing, the
For more detail, see this page about the HTML
<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 Code:
Result:
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
Attribute | Description | Possible Values |
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:
<a href="http://mediaservices.myspace.com/services/media/embed.aspx/m=5385825">Watch this video</a>
This results in:
Watch this video
This assumes that the video file is in the specified location.Video Formats
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.