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

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

下面是我的图片，显示未计算starting时间（红色边框）



注意：问题是非常随机的，我也在使用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>

最佳答案

使用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>

关于javascript - 为什么未计算开始时间或在videojs中显示空白，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60569519/