Brightcove video keeps playing in background even after modal dialog gets closed

Question

I have implemented following implementation to open Brightcove video in modal dialog on button click.

Here is the code for my implemenation.

Html code:

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

var playerInstance;
    
$(document).ready(function() {
  $(".videoTutorialB").click(function() {
    $("#watchvideopopup").css("background","rgba(0, 0, 0, 0.7)");
    init();
    $("#watchvideopopup").addClass('temp');
  });
    
  $("#closevideopopup").click(function() {
    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() {
  playerInstance = bc('brightcovePlayer');
  playerInstance.on('loadedmetadata', function () {
    playerInstance.play();
  })
}

function play() {
  playerInstance.play();
}

function pause() {
  playerInstance.;
}

function terminate() {
  document.getElementById('brightcovePlayer').remove();
  document.getElementById('brightcoveJs').remove();

  delete playerInstance;
}

The Brightcove video is not playing in background when I close the modal dialog after video gets fully loaded or while playing and video successfully removed from DOM.

But if close the modal dialog before the Brightcove video get loaded fully, the Brightcove video starts playing in background even after I closed the modal dialog.

My requirement is Brightcove video should not play in the background even though I close the modal dialog before Brightcove video before fully loaded.

Answer 1

Use playerInstance.dispose() instead of document.getElementById('brightcovePlayer').remove();. That removes the player instance and not just its element from the DOM.