– doesn’t work with IOS –

I had been playing with this issue for a couple hours and realized that it’s difficult to make a cross platform HTML5 video. It’s really easy for desktop client but not the mobile one.

With this method I’ve tried on both Android [Chrome/Firefox/Opera] and Windows Phone 8 [IE] they’re all working.

This is the bottom line how to make your HTML5 video tag be able to play cross platform.

  • You’ll need at least one mp4 for Windows Phone/iOS and one webm for android based devices.
  • You’ll need to enable controls=”true” for android devices otherwise it won’t play even you set it with autoplay.
  • Modernizr comes in very handy to detect supported format for different devices.

Transcoding from mp4 to webm can be done with ffmpeg -i input.mp4 output.webm

Transcoding from mp4 to ogg/ogv can be done with ffmpeg2theora -o output.ogv input.mp4

both can be installed via apt-get install.

Here’s  HTML/Javascript code, you’ll need to include modernizer.js aswell.

<video autoplay muted controls=”true”  id=”introvideo”  poster=”<?php echo site_url(‘static’); ?>/video/intro-thumbnail.png”  style=”display:block;width: 100% !important;height: auto !important;”>

<script>

//From http://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag
var v = new Array();

v[0] = [
“<?php echo site_url(‘static’);?>/video/intro.webm”,
“<?php echo site_url(‘static’);?>/video/intro.ogv”,
“<?php echo site_url(‘static’);?>/video/intro.mp4”
];
v[1] = [
“<?php echo site_url(‘static’);?>/video/intro2.webm”,
“<?php echo site_url(‘static’);?>/video/intro2.ogv”,
“<?php echo site_url(‘static’);?>/video/intro2.mp4”
];

function changeVid(n){
var video = document.getElementById(‘introvideo’);

if(Modernizr.video && Modernizr.video.webm) {
video.setAttribute(“src”, v[n][0]);
video.setAttribute(“type”, “video/webm”);
} else if(Modernizr.video && Modernizr.video.ogg) {
video.setAttribute(“src”, v[n][1]);
video.setAttribute(“type”, “video/ogg”);
} else if(Modernizr.video && Modernizr.video.h264) {
video.setAttribute(“src”, v[n][2]);
video.setAttribute(“type”, “video/mp4”);
}

video.load();
}
var vidcount = v.length;
var i = 0;
function myvidhandler(){

if (i == (vidcount – 1)) {
i = 0;
changeVid(i);
document.getElementById(“introvideo”).play();
} else {
i++;
changeVid(i);
document.getElementById(“introvideo”).play();
}
}
changeVid(0);
document.getElementById(“introvideo”).play();
document.getElementById(“introvideo”).addEventListener(“ended”, myvidhandler, false);

</script>

reference : http://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag