HTML5 video unable to playback in iPad after .appendTo or .detach

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.

why are you adding to the video element? Are you adding a new source? — nycynik, Dec 19 '12 at 19:02
It plays fine if you comment out the javascript appendTo line. It seems as though iPad video playing ability just breaks if the html is "moved". For instance, you can offload the appendTo to a click event if you want to see it working, and then break. — Benjamin Powers, Dec 19 '12 at 23:17
it's even more confusing now. What's the difference between the 2 URLs in your edit? — Francis Kim, Dec 20 '12 at 03:59
darn it, in my attempt to clarify, I used the wrong url. updated now. — Benjamin Powers, Dec 20 '12 at 04:20
This seems to be a bug and should probably be reported to Apple. It's device specific, re-creatable, un-debuggable, and illogical as to why it happens. For workaround try @barts answer below. — SnareChops, Dec 20 '12 at 13:38

bart s · Accepted Answer · 2013-09-25T06:30:06.703

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

Doesn't directly answer the question, but does answer the impending follow-up question. +1 — SnareChops, Dec 20 '12 at 13:34
Welcome, working on daily base with a special webapp and running into those kind of things too. — bart s, Dec 20 '12 at 20:44

score 0 · Answer 2 · answered Dec 14 '12 at 15:31

0

Try this:

$(document).ready(function(){
    $("#video1").appendTo("#new");
    $('#video1').get(0).play();
});

answered Dec 14 '12 at 15:31

Brian McDonald

116
2
6

score 0 · Answer 3 · edited May 23 '17 at 11:57

Autoplay doesn't work on iPad.

Can you autoplay HTML5 videos on the iPad?

If you want to play a video, you can add it like this (without < source>):

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

jsfiddle

In my project i make it like this:

            ...
            initVideoPlayer: function(id) {

                var firstvideo='foo.mp4';
                this.embeddVideoPlayer(firstvideo);
            },

            embeddVideoPlayer: function(videoFile) {
                this.setupVideoPlayer(videoFile);
                this.appendVideoPlayer();
            },

            /** Setup Video-Player with Size 950px x 406px */
            setupVideoPlayer: function(videoFile) {
                this.videotag = document.createElement('video');
                this.videotag.src = videoFile;
                this.videotag.height = "406";
                this.videotag.width = "950";
                this.videotag.seekable = true;
            },

            /** Setup Video-Player to DOM,  */
            appendVideoPlayer: function() {
                var node = document.getElementById('new'); 
                this._removeChildNodes(node);
                node.appendChild(this.videotag);

            },
            _removeChildNodes: function(node) {
                while (node.hasChildNodes()) {
                    node.removeChild(node.lastChild);
                };
            },
            ....

every time i start a video, i have to call embeddVideoPlayer(videoFile).

Hi Sam. Unfortunately my question is not about autoplay.. I'll clean up the html so as not to confuse. If you try to run the jsfiddle on an iPad, you'll notice that even after tapping the play button, the video will not play. — Benjamin Powers, Dec 17 '12 at 21:24
Hi Sam. The jsfiddle ( jsfiddle.net/RHuuU ) does not play on iPad. — Benjamin Powers, Dec 19 '12 at 17:08

score 0 · Answer 4 · edited May 23 '17 at 12:04

0

I think you can find you solution in this link: How do I embed a mp4 movie into my html?

By the way I tried jsfiddle on my iphone it seems it is not compatible. no controls at all.

@BenjaminPowers Did you try to add controls="controls" in your video tag ?

Edit:

I think I finally got the solution, could you confirm that you are using the correct doctype for html5 like below:

<!DOCTYPE html>
<html>

Here is a code from W3Schools :

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4"/>
  <source src="movie.ogg" type="video/ogg"/>
  Your browser does not support the video tag.
</video>

</body>
</html>

I tried the below link on my iPhone and it worked fine, the video goes full scrine and you will be using IOS controls:

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all

edited May 23 '17 at 12:04

Community

1
1

answered Dec 19 '12 at 18:43

Mehdi Karamosly

5,388
2
32
50

Yes, unfortunately it seems as though no variation of the html seems to help. (doctypes, source tag vs. src property, different video types etc..) The video plays fine on it's own, it's just the javascript above that will cause it to not play. – Benjamin Powers Dec 19 '12 at 23:34
@BenjaminPowers I am a bit confused here, is the video showing and playing in iPad ? what is the problem exactly, given that auto-load is by default deactivated for IOS devices ? Do you want your video to loop ? what do you exactly want to do with the javascript ? – Mehdi Karamosly Dec 20 '12 at 00:12
It's just a simple problem of the video working unless an .appendTo or .detach is applied to the code. The original jsfiddle shows the issue pretty well. Comment out the javascript and it will play no problem. Leave the javascript, and iPad will not be able to play the video any more. – Benjamin Powers Dec 20 '12 at 01:16
@BenjaminPowers did you try to turn debugging mode on in your browser on iPad ? you will probably see something breaking in the console or find a error. – Mehdi Karamosly Dec 20 '12 at 01:20
Yes, I have used debugging mode, but this is not throwing an error. Nor should it really, it's only utilizing a jQuery method that allows for appending or detaching. If you would actually try it, you would see the behavior. – Benjamin Powers Dec 20 '12 at 03:15

HTML5 video unable to playback in iPad after .appendTo or .detach

4 Answers4