jwPlayer播放器基本使用

最新推荐文章于 2021-06-17 09:41:54 发布

一只勤奋的代码狗

最新推荐文章于 2021-06-17 09:41:54 发布

阅读量8.2k

点赞数 1

分类专栏： js 文章标签：视频播放器

本文链接：https://blog.csdn.net/gaoxuaiguoyi/article/details/50042613

版权

js 专栏收录该内容

3 篇文章 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>
<!-- jwplayer播放器的key是在官方网站注册之后才会给的，没有这个key就不能使用播放器，下面是我申请的key -->
  <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>