Yours HTML5 video
by AaronLayton
HTML
<!-- "Video For Everybody" http://camendesign.com/code/video_for_everybody -->
<video id="yvid" controls="controls" poster="http://www.yourscontent.co.uk/Video/tvadvert/YoursAdvert1.png" width="956" height="538">
<source src="http://www.yourscontent.co.uk/Video/tvadvert/YoursAdvert1.mp4" type="video/mp4" />
<source src="http://www.yourscontent.co.uk/Video/tvadvert/YoursAdvert1.webm" type="video/webm" />
<source src="http://www.yourscontent.co.uk/Video/tvadvert/YoursAdvert1.ogv" type="video/ogg" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="956" height="538">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':['http%3A%2F%2Fwww.yourscontent.co.uk%2FVideo%2Ftvadvert%2FYoursAdvert1.png',{'url':'http%3A%2F%2Fwww.yourscontent.co.uk%2FVideo%2Ftvadvert%2FYoursAdvert1.mp4','autoPlay':false}]}" />
<img alt="Shop the Yours TV Advert" src="http://www.yourscontent.co.uk/Video/tvadvert/YoursAdvert1.png" width="956" height="538" title="No video playback capabilities, please download the video below" />
</object>
</video>
<div id="duration"></div>
JavaScript
video = $("#yvid")[0];
window.setInterval(function(t){
if (video.readyState > 0) {
var duration = $('#duration');
var vid_duration = Math.round(video.duration);
duration.html(vid_duration);
clearInterval(t);
}
},500);