zoukankan      html  css  js  c++  java
  • 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);
                });
            });
    

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

  • 相关阅读:
    CSS
    HTML
    MySQL:PyMySQL&ORM
    MySQL:SQL进阶
    03-body标签中相关标签
    02-body标签中相关标签
    01-html介绍和head标签
    并发编程
    异常处理、网络编程
    面向对象进阶和模块
  • 原文地址:https://www.cnblogs.com/wanglaowu/p/8623769.html
Copyright © 2011-2022 走看看