为什么videojs不是一直在播放，它只在第一次播放

Question

我正在使用从 4.* 升级而来的 videojs 最新插件 7.6.5（4.* 工作正常）。

我模拟了我的项目videojs。

我想通过更改 html 内容在同一对话框中显示图像或视频

问题：videojs播放器不是每次加载或播放（只有第一次播放），如何让它一直播放。

重现我的问题的步骤：

请参阅下面的代码片段或转到此代码笔 link https://codepen.io/eabangalore/pen/PoPwQjZ
等待 30 秒，videojs 将在对话框中第一次正确出现。

3.dialog 会消失，图像会出现。

再等 30 秒，现在 videojs 将不会加载。

下面是我的代码：

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

你需要处理播放器而不是仅仅删除它的元素，否则你无法初始化具有相同 ID 的其他播放器。

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

为什么videojs不是一直在播放，它只在第一次播放

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

html

javascript

jquery

video.js