Question

我有一个带有videojs的div

<div id="video">
    <video id="example_video_1" class="video-js vjs-default-skin" width="200" height="200" data-setup="{}">
        <source src="clip.mp4" type='video/mp4' />
    </video>
</div>

现在我正在尝试将此视频复制到另一个div

jQuery(document).ready(function(){
    var video = jQuery('#video').clone(true, true);
    jQuery('#block').append( video );
});

它复制该视频播放器，但它不起作用（无法播放视频）。将videojs从一个div复制到另一个div的正确方法是什么？

Answer 1

我没有安装Video JS，但似乎你需要做的就是重新初始化播放器本身。

参考：http://docs.videojs.com/docs/guides/setup.html

如果您的网页或应用程序动态加载视频代码（ajax， appendChild 等），以便在页面加载时可能不存在，则您需要手动设置向上播放器而不是依赖于数据设置属性。为此，首先从标记中删除data-setup属性，以便在初始化播放器时不会产生混淆。接下来，在加载Video.js javascript库之后，以及在将视频标记加载到DOM之后，运行以下javascript。

＆＃13;

videojs("example_video_1", {}, function(){
  // Player (this) is initialized and ready.
});

＆＃13;

videojs函数中的第一个参数是视频标记的ID。用你自己的替换它。第二个参数是选项对象。它允许您使用data-setup属性设置其他选项。第三个论点是准备好的＆＃39;打回来。一旦Video.js初始化，它将调用此函数。您也可以传递对元素本身的引用，而不是使用元素ID。

＆＃13;

videojs(document.getElementById('example_video_1'), {}, function() {
  // This is functionally the same as the previous example.
});

＆＃13;

videojs(document.getElementsByClassName('awesome_video_class')[0], {}, function() {
  // You can grab an element by class if you'd like, just make sure
  // if it's an array that you pick one (here we chose the first).
});

＆＃13;

我希望这是你正在寻找的。

Answer 2

将整个HTML从id＃video复制到id＃block，如下所示：

示例：http://codesheet.org/codesheet/T4qjlenn

 $( "#copy" ).click(function() {
  var htmlString = $( "#video" ).html();
  $( "#block" ).html( htmlString );
});

如何将videojs从一个div复制到另一个div？

2 个答案: