Brightcove视频未加载完成时关闭模态框仍后台播放如何解决

动态创建的Brightcove脚本标签加入DOM后，即使后续提前删除该标签，已经发起的脚本加载请求不会终止，脚本加载完成后仍然会执行绑定的callback回调。如果回调执行前用户已经关闭弹窗，初始化和自动播放逻辑仍会运行，就会出现视频在后台播放的问题。

新增弹窗开闭状态标记，在所有执行播放、初始化的逻辑前先判断状态，同时优化终止逻辑的边界兼容，修改后的完整代码如下：

HTML代码（无改动） #

<a class="videoTutorialB" href="#">Watch video tutorial</a>
<div id="watchvideopopup" class="modal" role="dialog" tabindex="-1">
  <div class="modal-content">
    <div id="closevideopopup" aria-label="Close" role="button">Close</div>
    <div id="watch-video-tutorial"></div>
  </div>
</div>

修改后的JavaScript代码 #

var playerInstance;
// 新增状态标记，记录弹窗是否处于激活状态
var isPopupActive = false;
    
$(document).ready(function() {
  $(".videoTutorialB").click(function() {
    // 打开弹窗时标记状态为激活
    isPopupActive = true;
    $("#watchvideopopup").css("background","rgba(0, 0, 0, 0.7)");
    init();
    $("#watchvideopopup").addClass('temp');
  });
    
  $("#closevideopopup").click(function() {
    // 关闭弹窗时先标记状态为非激活
    isPopupActive = false;
    terminate();
    $("#watchvideopopup").css("background","rgba(0, 0, 0, 0)");
    $("#watchvideopopup").removeClass('temp');
    $("#watchvideopopup").css("display","none");
  });
});
    
function init() {
  var container = document.getElementById('watch-video-tutorial');
  var playerHTML;
  var data = {
    videoId: '4845831078001',
    accountId: '1752604059001',
    playerId: 'default'
  };
  var script = document.createElement('script');
  script.src = "https://players.brightcove.net/" + data.accountId + "/" + data.playerId + "_default/index.min.js";
  script.id = "brightcoveJs";

  playerHTML = '<video-js id="brightcovePlayer" ' +
    ' data-video-id="' + data.videoId + '" ' +
    ' data-account="' + data.accountId + '" ' +
    ' data-player="' + data.playerId + '" ' +
    ' data-embed="default" class="video-js" ' +
    ' controls></video-js>';

  container.innerHTML = playerHTML;
  container.appendChild(script);

  script.onload = callback;
}

function callback() {
  // 回调执行时先判断弹窗是否已关闭，已关闭则直接终止逻辑
  if (!isPopupActive) {
    terminate();
    return;
  }
  playerInstance = bc('brightcovePlayer');
  playerInstance.on('loadedmetadata', function () {
    // 元数据加载完成后也要判断状态，避免加载过程中弹窗被关闭
    if (isPopupActive) {
      playerInstance.play();
    } else {
      terminate();
    }
  })
}

function play() {
  if (playerInstance && isPopupActive) {
    playerInstance.play();
  }
}

function pause() {
  if (playerInstance) {
    playerInstance.pause();
  }
}

function terminate() {
  // 兼容元素不存在的场景，避免报错
  const playerEl = document.getElementById('brightcovePlayer');
  const scriptEl = document.getElementById('brightcoveJs');
  if (playerEl) playerEl.remove();
  if (scriptEl) scriptEl.remove();
  if (playerInstance) {
    playerInstance.dispose();
    delete playerInstance;
  }
}

• 新增的isPopupActive状态会在弹窗打开/关闭时第一时间更新，所有涉及播放器操作的逻辑都会先校验该状态，避免弹窗关闭后仍执行播放逻辑
• 优化了terminate函数，增加元素存在性判断，同时调用Brightcove官方提供的dispose()方法销毁播放器实例，彻底释放资源，比单纯删除DOM更稳妥
• 修复了原代码中pause函数的语法错误
• 即使在脚本加载、播放器初始化的任意阶段关闭弹窗，都不会触发后续的自动播放逻辑，彻底解决后台播放问题

内容的提问来源于stack exchange，提问作者Niranga Sandaruwan