Video.js segment Auto-load video "HTML5 video player"

The whim of the need to put a 1.5-hour video tutorial on the official website ...

However, loading becomes a problem, the page is cshtml. NET hybrid website, do not know where the restrictions, cause the video can not be added.

No way, only the front-end to find out.

Then cut the video into 4

Load autoplay in turn. The effect is also possible.

Code:

Introduced: <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 ']; Initialize Playlist          var vLen = vlist.length;//The length of the playlist          var curr = 0;//video currently playing                  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;//play Finished, Replay                      }})        })

　　

Official Website API Description:

http://docs.videojs.com/

　　

Video.js segment Auto-load video "HTML5 video player"