Jquery - I am trying to clone the brightcove player into another div but once cloned the video is not getting played

ThajudeenK
January 10, 2025
191 views
0 votes
2 Answers

I wanted to clone the brightcove player into another div and play in the new div on clicking the click to clone button. But the video is not playing in the cloned div

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  
  // +++ Wait for loadstart to read video information +++
  myPlayer.on("loadstart", function(evt) {
    
    // +++ Read test and link from video info and build anchor tag +++
    var linkText = myPlayer.mediainfo.link.text,
      linkURL = myPlayer.mediainfo.link.url,
      hrefString =
        '<a href = "' + linkURL + '" target="_blank">' + linkText + "</a>";
    
    
  });
});


$('.click-to-clone').on('click', function() {
  console.log('button clicked');
  var videoPlayer = $(document).find('video-js');
  if (videoPlayer.length > 0) {
    var clonedDiv = document.querySelector('.clonedElement');
    clonedDiv.innerHTML = videoPlayer.prop('outerHTML');
    clonedDiv.querySelector('.video-js').setAttribute('id', 'myPlayerID1');
  }
})

/* * The body style is just for the
 * background color of the codepen.
 * Do not include in your code.
 */
body {
  background-color: #bbb;
  color: #f00;
}
/*
 * Styles essential to the sample
 * are below
 */
.video-js {
  height: 344px;
  width: 610px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<video-js id="myPlayerID"
    data-video-id="5165694790001"
    data-account="1752604059001"
    data-player="HJSEihoR"
    data-embed="default"
    data-application-id
    controls></video-js>
<button class="click-to-clone">Click to Clone</button>
<div class="clonedElement"></div>
    <script src="https://players.brightcove.net/1752604059001/HJSEihoR_default/index.min.js"></script>

In the above snippet I have added a brightcove player and it is initialised on load, and I have created a button. Once the button is clicked I am cloning the entire brightcove player and adding it to another div where the video is not getting played. Not sure what needs to be done to make the video play in the cloned div also. Need some help. Thanks in advance

Answers

- misterben
- January 9, 2025 at 1:54 pm
- 0 votes
0
Copying the DOM isn’t sufficient. You’d need to copy the original embed (with a new id) and initialise a new player from it with bc(newId).

Login or Signup to reply.

- Sergei
- January 10, 2025 at 9:33 am
- 0 votes
0
I don’t understand what this is for, but if I get it right, then try to change your function to this:
```
$('.click-to-clone').on('click', function() {
  console.log('button clicked');
  var videoPlayer = $('#myPlayerID')
  if (videoPlayer.length > 0) {
     var clonedPlayer = videoPlayer.clone().prop('id','myPlayerID1');
     var clonedDiv = $('.clonedElement');
     clonedDiv.clear();
     clonedDiv.append(clonedPlayer);
  }
})
```
I didn’t test it, so there can be some errors, always check the console of your browser, it sometimes can be useful to catch some of the errors that you might be facing.

Update: in Js, when you copy and append elements dynamically, all triggers and events, like clicks, hovers etc aren´t copied from the original and you need to set them after copying, maybe your player doesn’t play because when you click on play button, it doesn’t count your click.

If this is the reason, then I recommend you to add the same player in to the clonedElement node and hide it, then write code to just copy the props of your main player, but not the whole player, when click on copy button and reveal “cloned” player.
Login or Signup to reply.