videojs双击全屏幕观看,videojs动态加载视频

前段时间闲来无事弄了弄video.js,感觉蛮好玩,能应用到各个应用端,自己在最后玩耍的时候,需要注意的只剩下两方面了,1,动态加载播放视频内容2,双击全屏观看,

var urlRoad = "";
        var myPlayer = videojs('my-video');
        videojs("my-video", {}, function() {
            window.myPlayer = this;
            $(" #my-video source").attr("src", "");
            myPlayer.src(urlRoad);
            myPlayer.load(urlRoad);
            myPlayer.play();

        });

只需要把路径动态放进去就好,但是点击全屏 就有点懵逼了,找了一下,最后发现了个插件,

https://github.com/ctd1500/videojs-hotkeys,按照方法就ok,瞬间精神爽 ,

var urlRoad = "";
        var myPlayer = videojs('my-video');
         videojs('my-video').ready(function() {
          this.hotkeys({
            volumeStep: 0.1,
            seekStep: 5,
            enableVolumeScroll: false, 
            enableModifiersForNumbers: false
          });
        });
        videojs("my-video", {}, function() {
              window.myPlayer = this;
              $(" #my-video source").attr("src", urlRoad);
              myPlayer.src(urlRoad);
              myPlayer.load(urlRoad);
              // myPlayer.enterFullScreen();
              myPlayer.play();
              myPlayer.on("ended", function(){
                videoShowFun (num);
            });
        });

 当然在视频结束后,还可以执行新的方法,言简意赅,贴代码去吧!!

posted @ 2018-03-22 14:45  王老五Plus  阅读(1638)  评论(0编辑  收藏  举报