Alex Rivera | Logout

HTML5 Video in iPad not working after DOM changes

Asked 2013-01-25T02:14:24.590
8

Here is a script that appends the markup for an html5 video to 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 browsers tested, except for Safari on iOS. In iOS, when the HTMLVideoElement is re-appended to the DOM, it is no longer playable.

Has anyone else resolved or encountered this issue?

Edit
Report

1 Answer

-1

You can include two 'source' tags for your video. I've done this on a 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>
answered 2013-02-04T20:09:58.927

Your Answer