將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>