将HTML5视频复制到jQuery对话框模式窗口中

Question

我目前在具有自定义控件的页面正文中使用了HTML5视频。其中一个自定义控件是一个POP-OUT按钮，它允许用户将视频弹出到可调整大小的JQuery模式对话窗口中。为了启用所有的自定义控件，我有一个外部JavaScript加载所有的元素和事件处理函数和函数来使自定义控件工作。

有没有办法简单地复制视频，到对话窗口，对飞，并不被迫重新创建所有的自定义控件代码，这个“新”的视频？

我希望没有像playPause()和playPauseModal()这样的功能，但该技术足够聪明，只需使用playPause()即可。

我目前使用jquery-ui来启动模态对话窗口。

Answer 1

您可以将父母从DOM中分离出来，然后将其重新插入到模式对话框中 - 它不会复制视频，但您可以在模式中随时在后台使用占位符，并在关闭模式窗口时将其移回。

一个简单的例子：

var hasMoved = false; 
 

 
$("#move").on("click", function() { 
 

 
    var parent = $("#parent"); 
 
    var player = $("#player"); // get reference to add and to keep alive 
 

 
    if (hasMoved) { 
 
    $("#modal").remove("#player"); // remove from modal container 
 
    parent.append(player); 
 
    $("#video")[0].play();  // video will stop, continue to play 
 
    hasMoved = false; 
 
    } 
 
    else { 
 
    parent.remove("#player"); // remove player container and all controls inside 
 

 
    $("#modal").append(player); // append to new container 
 
    $("#video")[0].play();  // video will stop, continue to play 
 
    hasMoved = true; 
 
    } 
 
    
 
});

#parent {border:1px solid blue} 
 
#modal {border:1px solid red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent"> 
 
    <div id="player"> 
 
    <video id="video" width="500" height="280" preload="auto" autoplay> 
 
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"> 
 
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm"> 
 
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg"> 
 
    </video> 
 
    <button>Play</button><button>Stop</button> 
 
</div> 
 
</div> 
 
<button id="move">Move --&gt;</button> 
 
<div id="modal"></div>