video.js分段自动加载视频【html5视频播放器】

webSong 2021-11-29 原文

突发奇想的需求，要在官网上放一个一个半小时的视频教程……

然而，加载成了问题，页面是cshtml的.net混合网站，不知道哪儿的限制，导致视频加不出来。

没有办法，只能前端想办法了。

于是将视频切割成4个

依次加载自动播放。效果还可以。

代码：

引入：<link rel=”stylesheet” href=”//cdn.bootcss.com/video.js/6.0.0-RC.5/alt/video-js-cdn.min.css”>

html：

<video id="my_video_1" class=\'video-js vjs-default-skin vjs-big-play-centered\' controls preload=\'auto\' width="450" height="375" data-setup=\'{}\' autoplay="autoplay">
                <source src=\'http://xxxx.com/video/home1.mp4\' type=\'video/mp4\'>
            </video>

js:

 var vList = [\'http://xxx.com/video/home2.mp4\', \'http://xxx.com/video/home3.mp4\', \'http://xxx.com/video/home4.mp4\', \'http://xxx.com/video/home1.mp4\']; // 初始化播放列表  
        var vLen = vList.length; // 播放列表的长度  
        var curr = 0; // 当前播放的视频  
        
        var video = videojs("my_video_1", {}, function () {
            this.on(\'ended\', function () {
                play();
                function play(e) {
                    video.src(vList[curr]);
                    video.load();
                    video.play();
                    curr++;
                    if (curr >= vLen) {
                        curr = 0; // 播放完了，重新播放  
                    }
                }
            })
        })

官网api说明：

http://docs.videojs.com/