javascript - .appendTo 或 .detach 后 HTML5 视频无法在 iPad 中播放

Question

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

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 标签 确实有问题。重建整个视频标签是一个可行的解决方案(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'));
});​

我使用硬编码值来组装新的视频标签，但您可以在视频标签和来源上使用 .attr() 从标签中获取值。

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

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

编辑:更新视频链接并在 iOS7 上测试