Alvarez February 2016

How to copy videojs from one div into another div?

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?

Answers


dchayka February 2016

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

            
studio-klik February 2016

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

Post Status

Asked in February 2016
Viewed 2,015 times
Voted 7
Answered 2 times

Search




Leave an answer