Add HTML5 Video To iWeb With Fallback For Flash

If you have been adding video to your iWeb Site pages, you may have fallen foul of the ‘Big Blue Q Syndrome’ – OK, I just made that up but it definitely feels like some sort of syndrome when all you see is the Quicktime Q instead of your Video.

Most modern browsers and mobile devices make use of HTML5 Video, which is a much better way of presenting this type of rich media, but not all browsers support it or go about it in the same way. The best way to create ‘Cross Browser Harmony’ is to provide various formats of your video, in a player that can deliver the correct video format depending on the system and browser that requests it.

In this Screencast about how to add HTML5 Video to iWeb with fall back for Flash, we are using Video-js from videojs.com.

We are also using the Miro Video Converter from mirovideoconverter.com to create the necessary video files we are using.

All you need to do is upload your video files and placeholder image to your web server, change the values in blue in the code shown below, and paste it into the HTML widget on your iWeb page.

When you publish your iWeb site, your video will be ready to play in all the popular web browsers and mobile devices.

Your Widget Code

<html>
<head>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
<div style="width:640px;height:360px; text-align: center;" class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
<video class="video-js vjs-default-skin" controls width="640" height="360" poster="http://alittlebirdietellsme.com/videos/iChickenPlaceholder.jpg" preload="auto" data-setup="{}">
<source type="video/mp4" src="http://alittlebirdietellsme.com/videos/iChicken.mp4">
<source type="video/ogg" src="http://alittlebirdietellsme.com/videos/iChicken.oggtheora.ogv">
<source type="video/webm" src="http://alittlebirdietellsme.com/videos/iChicken.webmsd.webm">
</video>
</div>
</body>
</html>

Leave a Comment

Your email address will not be published. Required fields are marked *