Videoplayer.Markers is Not a function error

Question

I want to add markers to my videojs player dynamically. I am trying to videojs-markers plugin. but I get error

Videoplayer.markers is not a function

 <video id="vEpisodePlayer"
               class="video-js vjs-default-skin vjs-big-play-centered "
               controls="controls"
               preload="auto">
 </video>
 @section Scripts{
<script src="~/js/video.js" defer="defer"></script>
@*<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/6.9.0/videojs.ads.min.js" integrity="sha512-ff4Rc39SC+LyUOUEKUvQ5VW/BMtzy+p3/zN+zB/VloiEfFpkY4JseoJC2TtwJTnn2PrSsm+dvSW6S4yV6uADUA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>*@
<script src="~/js/videojs-seek-buttons.min.js" defer="defer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs-markers.js"></script>
<script src="~/js/Development/videoPlayer.js" asp-append-version="true"></script>
<script src="~/js/Development/videoDetail.js" asp-append-version="true"></script>
}

javascript:

Videoplayer = videojs("#vEpisodePlayer", options, function onPlayerReady() {
    this.fill(false);
    this.seekButtons({
        forward: 10,
        back: 10
    });
    

});

Videoplayer.src({ type: 'video/mp4', src: source });

Videoplayer.markers({
    markerStyle: {
        'width': '190px',
        'border-radius': '2px',
        'background-color': 'orange'
    }
});

How can I fix this error and add markers to my videojs player?

Answer 1

The error means the Video.js plugin has not been registered. You have used defer on some scripts but not the markers plugin script. You should defer that one too, otherwise it is executing before videojs exists and it's not possible to register a plugin against it.