Question

I’m running into an interesting issue where my video is unable to play back in iPad after .appendTo or .detach. It presents a play button, but when the play button is pressed, nothing happens.

Jsfiddle
http://jsfiddle.net/LHTb5/1/

HTML

<video id="video1">
    <source id="mp4" src="https://s3.amazonaws.com/s3hub-1b3c58271cb3e0dfa49d60cae0ac8b86ade30aed6294bdb5fe682e2bf/HTML5/sintel_trailer-480.mp4" type="video/mp4"/>
</video>


<div id="new"></div>

Javascript

​$(document).ready(function(){
   $("#video1").appendTo($("#new"));
});​

---

Edit

Ok folks, there’s been some confusion as to what’s working, and what is not. Let me make it really easy.

http://jsfiddle.net/LHTb5/2/ <— works

http://jsfiddle.net/ecbUP/ <—- doesn’t work

Doesn’t have anything to do with html, tags, or autoplay. It’s just a dead simple thing that makes iPad not play. I’m just wondering why, or how to do an .appendTo or .detach and have it work.

Answer 1

There indeed seems to be a problem with moving the video tag. Rebuilding the entire video tag is an solution that can work (see fiddle)

$(document).ready(function(){
    var tt = $('<video/>', {
        id: 'video2',
        'autobuffer' : 'autobuffer',
        'controls'   : 'controls',
        'autoplay'   : 'autoplay',
        html         : $('<source />', {
            'src'    : 'http://media.w3.org/2010/05/sintel/trailer.mp4',
            'type'   : 'video/mp4'       
        })
    });
    $("#video1").remove();
    tt.appendTo($('#new'));
});​

I used hard-coded values for assembling the new video tag, but you can use .attr() on the video tag and the source to get the values from the tag.

I am aware this is not solving the problem with appendTo().

For completeness: Tested on iPad2 – iOS4.3.3 / iPod 5 – iOS6.0.1 / iPod 5 – iOS 7

EDIT: Updated video link in fiddle and tested on iOS7