Question

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

有没有办法简单地将视频复制到对话框窗口中，并且不被强制重新创建所有自定义控件代码＆＃34;新＆＃34;视频？

我希望不要使用playPause()和playPauseModal()这样的功能，但这项技术足够聪明，可以只使用playPause()。

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

Answer 1

您可以从DOM中分离父级，然后将其重新插入到模式对话框中 - 它不会复制视频，但是您可以在模态中使用背景中的占位符，并在关闭模态窗口时将其移回

一个简单的例子：

＆＃13;

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;
  }
  
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: