使用videojs-markers插件报Videoplayer.markers is not a function如何解决

• 脚本加载顺序冲突：你给video.js加了defer属性，会延迟到DOM解析完成后才加载执行，但videojs-markers.js没有加defer，会先于video.js执行，此时插件找不到全局videojs对象完成注册，导致markers方法没有挂载到播放器实例上。
• 插件初始化时机错误：你在播放器实例化逻辑外直接调用markers()，可能出现播放器未完全初始化就调用方法的问题。
• 缺失插件样式文件：videojs-markers需要配套CSS才能正常显示标记点，你当前代码中没有引入对应样式。
• 版本兼容性问题：videojs-markers@0.7.0仅兼容Video.js 6.x/7.x版本，如果你使用的是Video.js 8.x及以上版本，会出现插件不兼容的问题。

1. 调整脚本加载属性 #

保证video.js先于所有依赖它的插件加载完成，要么给所有相关脚本统一加defer，要么都去掉defer，修改后的HTML脚本部分参考：

@section Scripts{
<script src="~/js/video.js" defer="defer"></script>
<script src="~/js/videojs-seek-buttons.min.js" defer="defer"></script>
<!-- 给videojs-markers也加上defer，保证在video.js之后执行 -->
<script src="~/js/videojs-markers.js" defer="defer"></script>
<!-- 引入videojs-markers配套CSS文件 -->
<link rel="stylesheet" href="~/css/videojs-markers.css" defer="defer">
<script src="~/js/Development/videoPlayer.js" asp-append-version="true" defer="defer"></script>
<script src="~/js/Development/videoDetail.js" asp-append-version="true" defer="defer"></script>
}

2. 调整JS初始化逻辑 #

把markers的初始化放到播放器ready回调内，保证播放器完全初始化后再调用插件方法：

Videoplayer = videojs("#vEpisodePlayer", options, function onPlayerReady() {
    this.fill(false);
    this.seekButtons({
        forward: 10,
        back: 10
    });
    // markers初始化移到ready回调内
    this.markers({
        markerStyle: {
            'width': '190px',
            'border-radius': '2px',
            'background-color': 'orange'
        },
        // 可通过markers数组配置具体标记点的时间、提示文本等属性
        markers: [
            {time: 10, text: "第1个标记点"},
            {time: 45, text: "第2个标记点"}
        ]
    });
});

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

3. 版本兼容处理 #

如果你的Video.js版本为8.x及以上，可降级到Video.js 7.x版本适配videojs-markers@0.7.0，也可以更换适配高版本Video.js的标记点插件。

内容的提问来源于stack exchange，提问作者user1181942