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

admin管理员组

文章数量:1125625

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=".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=".min.js"></script>

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

• javascript
• html
• jquery
• brightcove

Share Improve this question Follow edited 2 days ago Thajudeen K asked 2 days ago Thajudeen KThajudeen K 2311 gold badge11 silver badge66 bronze badges 2

• id should be unique in HTML. Your cloned video player will have the same id and your JS won't work on the cloned one. -- one of the many options is to clone the Brightcove player, assign a different id, and update JS to work on the updated ID. – Tushar Gupta Commented 2 days ago
• @TusharGupta, thanks for the response. I have updated the ID now but still the video is not playable. Can you please let me know if there is any other better options I can try? – Thajudeen K Commented 2 days ago

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 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).

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.

本文标签：