javascript - HTML5 video unable to playback in iPad after .appendTo or .detach - Stack Overflow

admin管理员组

文章数量:1292691

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 /

HTML

<video id="video1">
    <source id="mp4" src=".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.

/ <--- works

/ <---- 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.

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/LHTb5/1/

HTML

<video id="video1">
    <source id="mp4" src="https://s3.amazonaws./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/LHTb5/2/ <--- works

http://jsfiddle/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.

• javascript
• jquery
• html
• ipad

Share Improve this question Follow edited Dec 20, 2012 at 13:34 SnareChops 13.3k1010 gold badges7171 silver badges9191 bronze badges asked Dec 11, 2012 at 16:00 Benjamin PowersBenjamin Powers 3,25622 gold badges2020 silver badges2323 bronze badges 6

• Does the video play directly from the IPAD ? – Amitd Commented Dec 18, 2012 at 8:14
• why are you adding to the video element? Are you adding a new source? – nycynik Commented Dec 19, 2012 at 19:02
• It plays fine if you ment 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 Commented Dec 19, 2012 at 23:17
• it's even more confusing now. What's the difference between the 2 URLs in your edit? – Francis Kim Commented Dec 20, 2012 at 3:59
• darn it, in my attempt to clarify, I used the wrong url. updated now. – Benjamin Powers Commented Dec 20, 2012 at 4:20

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 7 +50

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/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 pleteness: 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

Try this:

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

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./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).

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 patible. 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./html/tryit.asp?filename=tryhtml5_video_all

本文标签： javascriptHTML5 video unable to playback in iPad after appendTo or detachStack Overflow