Почему время начала не рассчитывается или отображается пустым в videojs

Question

Я использую плагин video.js, где время запуска не рассчитывается, что вносит много ошибок, в то время как markin,markout seek et c

ниже мое изображение, которое показывает starting время не рассчитывается (выделено красной рамкой)

Примечание: Проблема очень RANDOM , я также использую 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

Трудно сказать наверняка, не имея возможности воспроизвести, но ожидание готовности проигрывателя перед настройкой источника может помочь. Это очень старая версия Video. js, так что, на мой взгляд, это не просто sh, если когда-либо это было проблемой, но это может быть условие гонки, когда браузер загружает исходный код, пока DOM работает. модифицированный, который может объяснить, что это так непостоянно.

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

  player.markers({...}); 
]);

Answer 2

Используйте 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>