I'm working on a site for a video production agency.

As they normally work with quite tech-savy agency's, we've decided to go with mainly HTML5 video for their show reel, like so...

 

<video controls>
<source src="video/BH.ogg" type="video/ogg" />
       <source src="video/BH.mp4" type="video/mp4" />
       <source src="video/BH.webm" type="video/webm" />
</video>

 

That's all working lovely in Chrome, Firefox, Safari and Opera (as expected) but not so well in IE (as expected).

As this will be the least used browser we were looking to implement a Flash fall-back but the client is quite adamant that we fall back to flash playing an .MP4 file.

 

My problem is I'm not to good with Flash and can't figure out how to get it to play an .MP4. I've done the normal Google searches but to no avail, all they bring up is JWPlayer and i don't think there would be a need for this and would rather do it myself (with help of course).

 

So has anyone here got experience of HTML5 video to MP4 flash fall-back?

 

Thanks in advance guys

Hi Mike trust you are well. Not sure if this helps but had a similar request not long ago. Sorry if it doesn't resolve your issue.

 

For IE and other browsers I implemented this which needed swfobject.js, jquery.js and a SNAPSHOP IMAGE with head and body code, but it did validate.

 

 

 

 

 

<head>

 

<script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { var v = document.createElement("video"); // Browser support <video>? if ( !v.play ) { // If no, use Flash. var params = { allowfullscreen: "true", allowscriptaccess: "always" }; var flashvars = { file: "video.f4v", image: "snapshot.jpg" }; swfobject.embedSWF("player.swf", "client-video", "480", "272", "9.0.0", "expressInstall.swf", flashvars, params); } }); </script> </head>

 

 

 

<body> <div id="content"> <div id="client-video"> <video id="client-video" poster="snapshot.jpg" controls> <source src="video.m4v" type="video/mp4" /> <!-- MPEG4 for Safari --> <source src="video.ogg" type="video/ogg" /> <!-- Ogg Theora for Firefox 3.5+ --> </video> </div> </div> </body></html>

Cheers mate, i've got to pop out for the afternoon but i'll have a look through this when i get back

Cheers guys, i'm back on this project later so i'll have a look through these posts

Hi Mike trust you are well. Not sure if this helps but had a similar request not long ago. Sorry if it doesn't resolve your issue.

 

For IE and other browsers I implemented this which needed swfobject.js, jquery.js and a SNAPSHOP IMAGE with head and body code, but it did validate.

 

 

 

 

[/code]

<head>

<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function() {

var v = document.createElement("video"); // Browser support <video>?

if ( !v.play ) { // If no, use Flash.

var params = {

allowfullscreen: "true",

allowscriptaccess: "always"

};

var flashvars = {

file: "video.f4v",

image: "snapshot.jpg"

};

swfobject.embedSWF("player.swf", "client-video", "480", "272", "9.0.0", "expressInstall.swf", flashvars, params);

}

});

</script>

</head>

<body>

<div id="content">

<div id="client-video">

<video id="client-video" poster="snapshot.jpg" controls>

<source src="video.m4v" type="video/mp4" /> <!-- MPEG4 for Safari -->

<source src="video.ogg" type="video/ogg" /> <!-- Ogg Theora for Firefox 3.5+ -->

</video>

</div>

</div>

</body>

</html>

[/code]

 

Hmmm this looks like it may be what i am after i shall play and get back to you.

 

Hi Mike,

 

I presume the .MP4 file is encoded using H.264?

 

If so, and you are delivering the video file progressively, the MOOV Atom information is stored at the end of the file and therefore flash won't begin playing it until the whole file had been downloaded.

 

The MOOV Atom needs to be located at the beginning of the video file as this is the meta information for the video file.

 

More info here - LINKY

 

Hope this helps.

 

Cheers man, yup the vids are encoded in H.264, the videos themselves are only about 30 seconds long so i'm not sure that this is a problem but very interesting reading and i will take it in to account anyway.