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

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

If your web page or application loads the video tag dynamically (ajax, appendChild, etc.), so that it may not exist when the page loads, you'll want to manually set up the player instead of relying on the data-setup attribute. To do this, first remove the data-setup attribute from the tag so there's no confusion around when the player is initialized. Next, run the following javascript some time after the Video.js javascript library has loaded, and after the video tag has been loaded into the DOM.

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

The first argument in the videojs function is the ID of your video tag. Replace it with your own. The second argument is an options object. It allows you to set additional options like you can with the data-setup attribute. The third argument is a 'ready' callback. Once Video.js has initialized it will call this function. Instead of using an element ID, you can also pass a reference to the element itself.

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

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

希望这就是您要找的。