javascript - 将 HTML5 视频复制到 jQuery 对话框模态窗口中

Question

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

有没有一种方法可以简单地将视频复制到对话窗口中，并且不被迫为此重新创建所有自定义控件代码"new"视频？

我希望不要有像 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>