video.js 点击播放按钮,因为网速的原因,想在视频上面显示个加载的loading。没有分了....

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了video.js 点击播放按钮,因为网速的原因,想在视频上面显示个加载的loading。没有分了....相关的知识,希望对你有一定的参考价值。

我记得有个proload不过那么应该是个封面图片,如果可以的我们可以加一个load事件,当视频资源被加载的时候设置loading这个图片的display为block,加载完毕后display为no。其实一般播放组件不是自己做的话,采用默认的浏览器应该都会有加载的动画的。 参考技术A 怎么解决了 教教我吧

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/

  

以上是关于video.js 点击播放按钮,因为网速的原因,想在视频上面显示个加载的loading。没有分了....的主要内容,如果未能解决你的问题,请参考以下文章

如何在视频播放器之外显示 video.js 控件

html5 怎么点一个按钮,播放一个相应的视频

video.js 问题

Video.js - 阻止点击播放功能

解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了

如何在 video.js 上添加新组件(按钮)?