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

Duplicating HTML5 Video into a jQuery Dialog Modal Window

本文关键字：对话框 模式 窗口 jQuery HTML5 视频 复制      更新时间：2023-09-26

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

有没有办法简单地将视频复制到对话窗口中，动态，而不是被迫为此"新"视频重新创建所有自定义控件代码？

我希望不要有像playPause()和playPauseModal()这样的功能，但该技术足够聪明，只需将playPause()用于两者。

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

您可以将父级与 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>

相关文章：