So that we can all reminisce for a moment, here is an example of how to embed videos into a website in the classic way:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
Of course, such a syntax is anything but pretty.
But even if you ignore the aesthetic point of view: The syntax in this form is simply too error-prone and too complex. Videos are much easier to integrate in HTML5. The video element is used for this.
Here is an example of how this video element can be integrated:
<video src="video.ogv" width="300" height="200"> Unfortunately, your browser is not HTML5-compatible </video>
This is the simplest variant in this form. However, three attributes are crucial in this syntax form. The video to be embedded is specified via src. Make sure you enter the correct path here. The two attributes width and height determine the width and height of the video. If neither value is specified, the video is displayed in its original size. If you only enter one of the two values, the other value is calculated automatically by the browser. The autoplay attribute instructs the browser to start the video automatically as soon as the page is loaded. This attribute should not normally be set, as automatic playback is not normally desired by users. This applies all the more to users who use mobile devices with low bandwidth.
Another interesting attribute is controls. If this is used, the browser displays native control elements for playback and volume.
<video src="video.ogv" width="300" height="200" controls> Unfortunately, your browser is not HTML5-compatible </video>
Here is the result in the browser:
Not only can the video be paused and restarted via the bar that appears, it also contains the volume control.
You can use the poster attribute to specify an image that will be displayed until the video starts. The poster attribute is used for this.
<video src="video.ogv" width="300" height="200" poster="video.gif"> Unfortunately, your browser is not HTML5-compatible </video>.
Again, make sure you enter the correct path so that the image can actually be seen.
Caution is advised when using the autoplay attribute. This attribute specifies that the video should play automatically as soon as it is available.
<video src="video.ogv" width="300" height="200" autoplay> Unfortunately, your browser is not HTML5-compatible </video>
The preload attribute can be interesting in terms of traffic. This is because this attribute controls the preload behavior. The attribute can have the following values:
- auto - The browser can preload the entire file.
- none - The file does not have to be preloaded.
- metadata - The file can be preloaded.
If the preload attribute is missing, the browser's default settings apply.
Videos and the codecs
Anyone who deals with embedding and playing videos in websites will sooner or later come across the problem of the various codecs. Thanks to these codecs, videos can be efficiently compressed and decompressed. The problem is that browser manufacturers have not yet been able to agree on a common codec format. For HTML5 (and therefore ultimately for you too), this means that there are no standardized codecs for videos and audio files.
For videos, the two formats Ogg and MP4 have now become established. You are therefore always on the safe side if you offer the video in these two formats. To do this, assign two source elements to the video element.
<video width="400" height="300" controls="controls"> <source src="video.mp4" type="video/mp4" /> <source src="video.ogg" type="video/ogg" /> </video>
You do not specify the video source within the video element here. Instead, only general information about the display is provided there. Which video is to be displayed is determined via the source element. The corresponding video is assigned to the src attribute. The type is followed by the type of video and the format in which the video is available.
If several source elements are specified, the browser always plays the first video that "fits". What this "fits" is all about is described below.
But which browser actually supports which format? The following table provides the answer to this question.
| Browser | Ogg Theora (.ogg) | h.264 (.mp4) |
| Internet Explorer | From version 9 | |
| Mozilla Firefox | Yes | |
| Google Chrome | Yes | Yes |
| Opera | Yes | |
| Safari | Yes | |
| iPhone | Yes | |
| Android | Yes |
The table makes the dilemma clear: the interpretation of the formats is distributed almost equally between the individual browsers. Therefore, you are almost forced to specify videos in both formats.
The media attribute, which can only be assigned to the source element, can be used to explicitly specify the media type for which the video is suitable. To specify videos specifically for certain end devices, the media attribute must be assigned to the src. This media attribute is used to specify the desired media type.
A possible application for the source element could look like this:
<video width="400" height="300"> <!-- For mobile devices only --> <source src="video_mobil.ogg" media="handheld" /> <!-All other devices --> <source src="video_normal.ogg" media="all" /> </video>
The media attribute is used here to check whether it is a mobile device. In this case, a video is played in a smaller size. If it is a different device, the all value is used.
Integrate videos securely
It is well known that HTML5 is not yet supported by all browsers. Of course, this also applies to the video element. One solution is to combine different embedding techniques. This involves combining the familiar object and embed elements with video. This could look like this:
<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif"> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" /> <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" /> <param value="true" /> <param value="false" /> <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640 "height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>
Videos embedded in this way will be playable in most browsers. Browsers that recognize the video element will access it. Other browsers, however, use the information in the object or embed element.
