Дублирование HTML5-видео в окно диалога jQuery Модальное окно

Question

В настоящее время у меня есть HTML5-видео в теле страницы с настраиваемыми элементами управления. Одним из этих настраиваемых элементов управления является кнопка POP-OUT, которая позволяет пользователю вывести видео в изменяемое по размеру диалоговое окно JQuery. Чтобы включить все пользовательские элементы управления, у меня есть внешний javascript, который загружает во всех элементах и ​​eventHandlers и функции, чтобы заставить пользовательские элементы управления работать.

Есть ли способ, чтобы просто дублировать видео, в диалоговом окне, на лету, и не вынуждены воссоздать весь код пользовательских элементов управления для этого «нового» видео?

Я надеюсь, что у меня не будет таких функций, как 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>