jwPlayer播放器基本使用

本是古典何须时尚 2022-08-17 14:14 247阅读 0赞

找一个相对比较好点的播放器，国内的ckpkayer用的多，但是bug也很多，国外知名的jwplaye播放器很出名，比如慕课网使用的就是jw播放器，看了官方的文档之后简单的操作进行了记录。

HTML代码:

<!DOCTYPE html>
    <html>
    <head>
     <title>jwplayer播放器测试</title>
     <script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
     <script type="text/javascript" src="scripts/jwplayer.js"></script>
    
      <script type="text/javascript">jwplayer.key="xxxxxxxxxxxxxxxxxxxxx";</script>
    </head>
    <body>
    
    <div id="container"></div>  
    <input type="button" class="player-play" value="播放" />  
    <input type="button" class="player-stop" value="停止" />  
    <input type="button" class="player-status" value="取得状态" />  
    <input type="button" class="player-current" value="当前播放秒数" />  
    <input type="button" class="player-goto" value="转到第4秒播放" />  
    <input type="button" class="player-length" value="视频时长(秒)" />
    
     
    </body>
    <script type="text/javascript">  
        var temp = 1;
        $(function() {  
    
    
      var playerInstance = jwplayer('container');
      //初始化视频
      playerInstance.setup({
        //视频文件来源
           file: 'scripts/video.mp4',
           //显示的背景图片
           image: 'scripts/bg.jpg',
         
       });
      /*playerInstance.on('pause',function(obj){
    
       alert(obj.oldstate);
      });*/
      playerInstance.on('complete',function(){
    
        alert("播放完毕");
    
      });
      //监控播放时间
      playerInstance.on('time',function(obj){
        //总时间
        //alert(obj.duration);
        //获取当前的播放时间
        var time = obj.position;
        var v1 = parseFloat(time.toFixed(0));
        //不回答问题不能进行播放下面的视频
        if(v1 > 3 && temp ==1){
    
         playerInstance.seek(3);
        }
        var v2 = parseFloat("3");
        if(v1 == v2){
         if(temp == 1){
         playerInstance.pause();
    
         var name = prompt("请输入您的名字","");
         if(name == "高旭旭"){
    
          temp += 1;
          playerInstance.play();
          }
        }
       }
      });
      //点击播放执行的事件
      /*playerInstance.on('play',function(){
    
        var time = playerInstance.getPosition();
        var v1 = parseFloat(time.toFixed(0));
        if(v1 > 3 && temp ==1){
    
         playerInstance.seek(4);
        }
       
      });*/
      //缓冲
      /*playerInstance.on('buffer',function(obj){
    
       var name = obj.reason;
       if(name == "loading"){
    
        alert("正在缓冲");
       }
    
      });*/
      //在播放之前触发的时间
      playerInstance.on('playAttempt',function(){
    
       alert("开始播放了，是否检测登录?");
       
      });
      //加载视频的时间
      /*playerInstance.on('firstFrame',function(obj){
    
       alert("加载视频时间:"+(obj.loadTime/1000));
      });*/
    
      playerInstance.on('error',function(){
    
       alert("视频出错了...");
       playerInstance.play();
      });
      //停止播放
      $(".player-stop").click(function(){
    
       playerInstance.pause();
    
      });
      //播放
      $(".player-play").click(function(){
    
       playerInstance.play();
      });
      //获取当前播放的秒数（时间）
      $(".player-current").click(function(){
    
       var time = playerInstance.getPosition();
       alert(time);
      });
      //转到多长时间
      $(".player-goto").click(function(){
    
       playerInstance.seek(4);
    
      });
      //获取播放状态
      $(".player-status").click(function(){
       
       /**4种状态
        * 1:没有播放 idle
        * 2：正在播放playing
        * 3:停止paused
        * 4:播放完毕complete
        */
       alert(playerInstance.getState());
      });
    
           });
    </script>  
    </html>

![Center][]

[Center]: /images/20220731/38d94c05d6e64bef993101347169dcaf.png