video.js进度条指定时间预览图

image.png

第一步：引入video.js 、videojs.markers.css 、videojs-markers.js

<video id="example_video_1" class="video-js vjs-default-skin video" controls preload="none" width="640" height="264" poster="" style="object-fit: fill; width: 100%; height: 490px;">
    <source id="source" src="http://xxx.playlist.m3u8" type="application/x-mpegURL"></source>
</video>

var player = videojs('example_video_1', {
                muted: true,
                controls: true,
                height: 300,
                width: 300,
                loop: false,
                autoplay:true
            });
            player.markers({
                markerStyle: {
                    'width': '9px',
                    'border-radius': '40%',
                    'background-color': 'orange'
                },
                markerTip: {
                    display: true,
                    text: function(marker) {
                        return marker.text;
                    },
                    img: function(marker) {
                        return marker.img;
                    },
                },
                markers: [{
                        time: 239.5,
                        text: "高三英语地理融合课《全球变暖》",
                        img: '/Public/img/info-img3.png',
                        class: "special-blue"
                    },
                    {
                        time: 2683.6,
                        text: "高三英语生物融合课_流行病",
                        img: '/Public/img/info-img3.png',
                    },
                    {
                        time: 5841,
                        text: "专家点评",
                        img: '/Public/img/info-img3.png',
                    }
                ]
            });

进度条时间改为正序

.video-js .vjs-time-control {
    display: block;
}

.video-js .vjs-remaining-time {
    display: none;
}