Video tag of html5 implemented in Safari

The new video tag

<video>

is now implemented in the new version of Safari. The html5 video tag makes it possible to embed video in pretty much the same manor as we do images:

<video src="movie.mov">
fallback content here.
</video>

or in it’s simplest form:

<video src="movie.mov"/>

Henrik Sjökvist gives us a great example on how to make a flash fallback with a little help of SWFObject, you simply put the video tag inside a div that you give an id of “demo-video-flash”, and then with a little help of jQuery:

<script type="text/javascript">
$(document).ready(function() {
    var v = document.createElement("video");
    if ( !v.play ) {
        var params = {allowfullscreen: "true",allowscriptaccess: "always"};
        var flashvars = {file: "video.f4v", image: "snapshot.jpg"};
        swfobject.embedSWF("player.swf", "demo-video-flash", "480", "272", "9.0.0", "expressInstall.swf", flashvars, params);
    }
});
</script>

More info on the html5 video tag can be found at w3schools.

And a little example for those of you that have a html5 enabled browser:

Archives

Categories