Brightcove播放器克隆后无法播放的问题求助

我明白你想实现点击按钮后把Brightcove播放器克隆到新容器并正常播放的需求，直接克隆DOM元素确实会遇到这个问题——因为Brightcove播放器不是静态HTML，它是通过官方JS库初始化生成的实例，你克隆的只是初始化前的静态标签，没有触发播放器的初始化流程，所以新容器里的播放器没法正常工作。

给你一个可行的解决方案：

• 不要直接复制原播放器的outerHTML，而是手动构建一个新的video-js元素，带上所有必要的Brightcove属性（注意ID必须唯一，避免和原播放器冲突）
• 把新元素插入目标容器后，调用Brightcove的初始化方法激活这个新播放器

修改后的完整代码 #

HTML（无需改动）

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

CSS（无需改动）

/* * 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;
}

JS（核心修改部分）

// 原有的播放器初始化逻辑保留
videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  
  myPlayer.on("loadstart", function(evt) {
    var linkText = myPlayer.mediainfo.link.text,
      linkURL = myPlayer.mediainfo.link.url,
      hrefString =
        '<a href = "' + linkURL + '" target="_blank">' + linkText + "</a>";
    // 这里原代码没用到hrefString，你可以根据需求处理它
  });
});

$('.click-to-clone').on('click', function() {
  console.log('button clicked');
  var clonedDiv = document.querySelector('.clonedElement');
  // 先清空目标容器
  clonedDiv.innerHTML = '';
  
  // 获取原播放器的配置信息，这样可以复用当前播放的视频（可选，也可以固定写死）
  var originalPlayer = videojs.getPlayer('myPlayerID');
  var videoId = originalPlayer.mediainfo.id;
  var accountId = originalPlayer.options_.account;
  var playerId = originalPlayer.options_.playerId;
  
  // 构建新的video-js元素
  var newPlayer = document.createElement('video-js');
  newPlayer.id = 'myPlayerID1'; // 必须唯一的ID
  newPlayer.setAttribute('data-video-id', videoId);
  newPlayer.setAttribute('data-account', accountId);
  newPlayer.setAttribute('data-player', playerId);
  newPlayer.setAttribute('data-embed', 'default');
  newPlayer.setAttribute('data-application-id', '');
  newPlayer.setAttribute('controls', '');
  
  // 插入到目标容器
  clonedDiv.appendChild(newPlayer);
  
  // 初始化新的Brightcove播放器
  videojs(newPlayer);
})

关键改动说明 #

1. 替换了克隆DOM的逻辑，改为手动创建符合要求的video-js元素，确保所有Brightcove必要属性完整
2. 插入新元素后调用videojs(newPlayer)触发播放器初始化，让Brightcove JS库处理加载和播放逻辑
3. 新增了从原播放器获取配置的逻辑，这样克隆的播放器会同步原播放器的视频内容，更灵活（如果不需要同步，直接写死属性值也可以）

备注：内容来源于stack exchange，提问作者Thajudeen K