javascript - 为什么videojs中不计算开始时间或显示空白

Question

我正在使用 video.js 插件，其中不计算开始时间，这会引入许多错误while markin,markout seek 等

下面是我的图像，显​​示未计算开始时间(红色边框)

注意:问题非常随机，我也在使用marker.js

问题:我怎样才能永久解决这个问题

下面是我的代码:

var player;

function initVideojsWithMarker(playerId){
           try{
               if(player) player.dispose();
           }catch(e){}
    
            try {
                player = videojs(playerId);
                player.markers({
                    markerTip: {
                        display: false,
                        text: function (marker) {
                            return  marker.text;
                        }
                    },
                    breakOverlay: {
                        display: false,
                        displayTime: 3,
                        text: function (marker) {
                            return  marker.text;
                        }
                    },
                    markers: []
                });
            } catch (e) {}
}


 var playerVideo = `<video id="demoVideo" disablepictureinpicture="" controlslist="nodownload" class="video-js vjs-default-skin"  controls muted data-setup="{ "inactivityTimeout": 0}">
         <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/ogg"></source>
   </video>`;

$('#videoPlayerWrapper').html(playerVideo);

initVideojsWithMarker('demoVideo');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="http://vjs.zencdn.net/4.2/video.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs-markers.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link href="http://vjs.zencdn.net/4.2/video-js.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs.markers.min.css" rel="stylesheet" />

    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />






<div id="videoPlayerWrapper">


</div>

Answer 1

使用setTimeout，延迟很小:

function initVideojsWithMarker(playerId) {
  try {
    player = videojs(playerId);
    player.markers({
      markerTip: {
        display: false,
        text: function(marker) {
          return marker.text;
        }
      },
      breakOverlay: {
        display: false,
        displayTime: 3,
        text: function(marker) {
          return marker.text;
        }
      },
      markers: []
    });
  } catch (e) {}
}


var playerVideo = `<video id="demoVideo" disablepictureinpicture="" controlslist="nodownload" class="video-js vjs-default-skin"  controls muted data-setup="{ "inactivityTimeout": 0}">
         <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/ogg"></source>
   </video>`;

$('#videoPlayerWrapper').html(playerVideo);

setTimeout(function() {
  initVideojsWithMarker('demoVideo');
}, 10)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://vjs.zencdn.net/4.2/video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs-markers.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link href="http://vjs.zencdn.net/4.2/video-js.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs.markers.min.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />






<div id="videoPlayerWrapper">


</div>