HTML5 has entered our lives for good and it is changing the way we are embedding media on our web pages. Two of the new greatest features are the <video> elements. No more do we have to resort to Flash to serve videos to our visitors. The new solutions HTML5 has to offer are really tempting but enough with the introductory words. Let’s see what <video> do.
<video>
As with the <audio> element, the syntax is the same with the <video> element.
<video controls>
<source src="video-file.mp4" type="video/mp4"/>
<source src="video-file.ogv" type="video/ogg"/>
<p>Fallback message - Your browser does not support the video element.</p>
</video>
Again, we have to use multiple sources and different file types and encodings of the same video file to support all the compatible browsers. You can read more about file types and browser support on the W3Schools HTML5 Video page.
<video controls>
<source src="video-file.mp4" type="video/mp4"/>
<source src="video-file.ogv" type="video/ogg"/>
<p>Fallback message - Your browser does not support the video element.</p>
</video>
Again, we have to use multiple sources and different file types and encodings of the same video file to support all the compatible browsers. You can read more about file types and browser support on the W3Schools HTML5 Video page.
height/width
The autoplay, loop and preload attributes of the audio element work the same way in the video element too. Apart from those, we have some other video specific attributes such as the height and width. They work the same way they do for the img element.
<video controls height="480" width="640">
<source src="video-file.mp4" type="video/mp4"/>
<source src="video-file.ogv" type="video/ogg"/>
<p>Fallback message - Your browser does not support the video element.</p>
</video>
<video controls height="480" width="640">
<source src="video-file.mp4" type="video/mp4"/>
<source src="video-file.ogv" type="video/ogg"/>
<p>Fallback message - Your browser does not support the video element.</p>
</video>
poster
When our video is not playing, we can use the poster attribute to link to a thumbnail image to display instead of just displaying the first frame of the video.
<video controls poster="video-thumbnail.jpg">
<source src="video-file.mp4" type="video/mp4"/>
<source src="video-file.ogv" type="video/ogg"/>
<p>Fallback message - Your browser does not support the video element.</p>
</video>
<video controls poster="video-thumbnail.jpg">
<source src="video-file.mp4" type="video/mp4"/>
<source src="video-file.ogv" type="video/ogg"/>
<p>Fallback message - Your browser does not support the video element.</p>
</video>
fallback
Browser support is good considering this is a new feature but of course there are older browsers that we need to take care of. To do so there is only one good and efficient solution, to use a Flash as a fallback. A great plugin to help with browser support for both the audio and video elements is html5media.
No comments:
Post a Comment