我正在尝试将 Brightcove 播放器克隆到另一个 div 中，但克隆后视频无法播放

Question

我想将 Brightcove 播放器克隆到另一个 div 中，然后单击“单击克隆”按钮在新 div 中播放。但视频没有在克隆的 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>

在上面的代码片段中，我添加了一个 Brightcove 播放器，它在加载时初始化，并且我创建了一个按钮。单击按钮后，我将克隆整个 Brightcove 播放器并将其添加到另一个未播放视频的 div 中。不确定需要做什么才能使视频在克隆的 div 中播放。需要一些帮助。预先感谢

Answer 1

仅复制 DOM 是不够的。您需要复制原始嵌入（使用新 ID）并使用

bc(newId)

初始化新播放器。