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

Question

I have a div with videojs in it

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

Now I'm trying to copy this video into another div

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

It copies that video player, but it doesn't work (can't play the video). What is the right way to copy videojs from one div into another div?

Answer 1

I don't have Video JS installed but it seems like all you need to do is re-initialize the player itself.

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

I hope this is what you're looking for.

Answer 2

Copy the whole HTML from id#video into id#block like this:

Example: http://codesheet.org/codesheet/T4qjlenn

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