HTML5 Video on iPad not working after DOM changes

Question

Here is a script that adds markup for the html5 video in the DOM:

document.body.innerHTML = '<video id="video" controls="controls" src="http://mirror.cessen.com/blender.org/peach/trailer/trailer_iphone.m4v" type="video/mp4"></video>'; var el = document.getElementById('video'); document.body.removeChild(el); document.body.appendChild(el); 

jsfiddle demo: http://jsfiddle.net/h8RLS/2/

This works in all tested browsers except Safari on iOS. On iOS, when the HTMLVideoElement is again added to the DOM, it no longer plays.

Has anyone else resolved or encountered this problem?

Answer 1

I do not have an iPad, but I can reproduce your problem on the iPhone. This seems to be a Webkit bug, but it can be easily circumvented by changing the video src attribute. Hope this is enough for your scenario. Here you can see a working demo:

http://vidhtml5.appspot.com/jsembed.html

This is the code:

 var el = document.getElementById('video'); el.src= "http://mirror.cessen.com/blender.org/peach/trailer/trailer_iphone.m4v"; el.load(); 

Answer 2

I had the same problem and I found a workaround using a timer (here I use jQuery).

 var v = $('#videoID'); v.appendTo( $('#toDivID') ); var timer = setInterval( function() { clearInterval( timer ); v[0].load(); v[0].play(); }, 200 ); 

I tested it only on iPad2 on iOS 6.1.

Answer 3

You can include two "source" tags for your video. I did this on the site and it works great.

 <video class="video" controls="controls" id="video1"> <source type="video/mp4" src="demo.mp4"> <source type="video/webm" src="demo.webm"> </video>