video.js分段自動加載視頻【html5視頻播放器】

突發奇想的需求，要在官網上放一個一個半小時的視頻教程……

然而，加載成了問題，頁面是cshtml的.net混合網站，不知道哪兒的限制，致使視頻加不出來。

沒有辦法，只能前端想辦法了。

因而將視頻切割成4個

依次加載自動播放。效果還能夠。

代碼：

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

　　　<script src="http://cdn.bootcss.com/video.js/6.0.0-RC.5/alt/video.novtt.min.js"></script>

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/