在.appendTo或.detach之后,HTML5视频无法在iPad中播放

Question

我遇到了一个有趣的问题,即我的视频是无法在后iPad的播放.appendTo或.detach.它显示一个播放按钮,但是当按下播放按钮时,没有任何反应.

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"));
});?

---

编辑

好的伙计们,对于什么是有效的,什么是无效的,有一些混乱.让我让它变得非常简单.

http://jsfiddle.net/LHTb5/2/ <---有效

http://jsfiddle.net/ecbUP/ <----不起作用

与html,标签或自动播放没有任何关系.这只是一个简单的事情,让iPad无法播放.我只是想知道为什么,或者如何做.appendTo或者.detach让它工作.

Answer 1

移动时似乎确实存在问题video tag.重建整个视频标签是一个可以工作的解决方案(见小提琴)

$(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'));
});?

我使用硬编码值来组合新视频标记,但您可以.attr()在视频标记和源上使用来从标记中获取值.

我知道这不能解决问题appendTo().

完整性:在iPad2上测试 - iOS4.3.3/iPod 5 - iOS6.0.1/iPod 5 - iOS 7

编辑:更新了小提琴中的视频链接并在iOS7上进行了测试