Why videojs is not playing all the time, it plays for the first time only

Question

I'm using videojs plugin latest one 7.6.5 upgraded from 4.*(4.* was working fine).

I have simulated my project working with videojs.

I want to display image or video in the same dialog by changing html content

Question: videojs player is not loading or playing everytime(plays only first time), how to make it to play all the time.

Steps to reproduce my problem:

1. see below code snippet or go to this codepen link https://codepen.io/eabangalore/pen/PoPwQjZ

2. wait for 30sec videojs will come for the 1st time correctly in a dialog.

3.dialog will disappear, image will show up.

4. wait for another 30sec now videojs won't load.

below my code:

function initializePlayer(){
          var player = videojs('vplayer', {inactivityTimeout: 0});
                  player.ready(function() {
                    player.src({
                      src: "https://vjs.zencdn.net/v/oceans.webm",
                      type: "video/webm"
                   });
                 });
}

var showCloseNum = 0;
var intId = setInterval(function(){
           showCloseNum++;
           $('#videojs_player_dialog').dialog({
            modal: true,
            resizable: false,
            autoOpen: false,
             width: 600,
             height: 350,
            open: function(){
                 var player = `
        <video  disablepictureinpicture="" autoplay controlslist="nodownload"  id="vplayer" class="video-js vjs-default-skin"  controls muted data-setup='{ "inactivityTimeout": 0}' style="width:600;height:350;">
                <source src="#"></source>
            </video>
                `;
              
              var image = '<img src="https://via.placeholder.com/468x60?text=Visit+Blogging.com+NoC/O https://placeholder.com/">';
              
              if(showCloseNum % 2 == 0){
                              $('#videojs_player_dialog').html(player);
initializePlayer();
              }else{
                $('#videojs_player_dialog').html(image);
              }
            
                
             },
             beforeClose: function () {
                 $('#videojs_player_dialog').html('');
                 $(this).dialog('destroy');
              }
         });
    if(showCloseNum % 2 == 0){
       $('#videojs_player_dialog').dialog('open');
        
    }else{
      $('#videojs_player_dialog').dialog('close');
    }
},6000);

video{
  width: 100%;
  height:100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.6.5/video.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://vjs.zencdn.net/7.5.5/video-js.css" rel="stylesheet"/>





<div id="videojs_player_dialog">

</div>

Answer 1

You need to dispose of the player rather than just removing its elements, otherwise you can't initialise a other player with the same id.

videojs.getPlayer('vplayer').dispose()