突发奇想的需求,要在官网上放一个一个半小时的视频教程……
然而,加载成了问题,页面是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/