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?

CodePudding user response：

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.