• 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);
                });
            });
    

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

  • 相关阅读:
    互联网对实体经济的三轮冲击
    虎嗅网
    RabbitMQ实战-死信队列
    RabbitMQ实战
    Hadoop之MapReduce流程
    Hadoop之HDFS读写流程
    GitHub预览网页[2019最新]
    Java操作Hadoop集群
    Hadoop分布式集群搭建
    Hadoop Local(本地)模式搭建
  • 原文地址:https://www.cnblogs.com/wanglaowu/p/8623769.html
Copyright © 2020-2023  润新知