开源网页播放器JWplayer使用

网上关于JWplayer的知识和文档很多,本文只介绍如何使用JWplayer。

这里使用JWPlayer,需要搭建网络环境(本文使用appserv2.6.0集成环境)

appserv 2.6.0的安装很简单,apache2.2的启动端口80可能会有冲突,解决方法同样google,安装好最好重启下。

JWPlayer官网http://www.longtailvideo.com/

JWPlayer下载页面http://www.longtailvideo.com/jw-player/download/

解压后,将jwplayer整个文件夹放到appserv/www目录下

1. 新建html文件

[html]  view plain copy
  1. <html>  
  2. <head>  
  3. <script src="/jwplayer/jwplayer.js">script>  
  4. head>  
  5. <body>  
  6. <div id='myplayer'>div> <script type='text/javascript'>      
  7.  jwplayer('myplayer').setup({         
  8.  file: 'testfile/H264_640x480_AAC(LC).mp4',         
  9.  width: '640',          
  10.  height: '480'     });   
  11. script>  
  12. body>  
  13. html>  

file参数根据自己实际情况进行修改

在浏览器中打开就可以观看了(直接打开无效,要不搭appserv网站环境干嘛)

如:http://127.0.0.1/jwplayer/test.html


2.利用jquery 加一些控制

jquery是一个javascript框架,是一个轻量级的js库,可以下载到本地。具体应用请google

[html]  view plain copy
  1. <html>  
  2. <head>  
  3. <script src="//code.jquery.com/jquery-1.11.0.min.js">script>  
  4. <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js">script>  
  5. <script src="/jwplayer/jwplayer.js">script>  
  6. head>  
  7. <body>  
  8. <div id='myplayer'>div>  
  9. <input type="button" class="player-play" value="Play" />  
  10. <input type="button" class="player-stop" value="Stop" />  
  11. <input type="button" class="player-status" value="Status" />  
  12. <input type="button" class="player-position" value="TimeStamp" />  
  13. <input type="button" class="player-seek" value="Seek_15s" />  
  14. <input type="button" class="player-duration" value="Duration" />  
  15. <script type='text/javascript'>  
  16.  var thePlayer;  
  17.  thePlayer = jwplayer('myplayer').setup({     
  18.  file: 'testfile/H264_640x480_AAC(LC).mp4',         
  19.  width: '640',          
  20.  height: '480',  
  21.  dock: false,  
  22.  repeat: true});   
  23.   
  24.  //Play Pause  
  25.  $('.player-play').click(function(){  
  26.     if(thePlayer.getState() != 'PLAYING'){  
  27.         thePlayer.play(true);  
  28.         this.value = 'Pause';  
  29.     }else {  
  30.         thePlayer.play(false);  
  31.         this.value = 'Play';  
  32.     }  
  33.     });  
  34.       
  35.  //Stop  
  36.  $('.player-stop').click(function(){thePlayer.stop();});  
  37.       
  38.  //Status  
  39.  $('.player-status').click(function(){  
  40.     var state = thePlayer.getState();  
  41.     var msg;  
  42.     switch(state){  
  43.         case 'BUFFRING':  
  44.             msg = 'Buffering';  
  45.             break;  
  46.         case 'PLAYING':  
  47.             msg = 'Playing';  
  48.             break;  
  49.         case 'PAUSED':  
  50.             msg = 'Pause';  
  51.             break;  
  52.         case 'IDLE':  
  53.             msg = 'Stop';  
  54.             break;  
  55.         }  
  56.         alert(msg);  
  57.     });  
  58.   
  59.     //get current position  
  60.     $('.player-position').click(function() { alert(thePlayer.getPosition()); });  
  61.   
  62.     //Seek  
  63.     $('.player-seek').click(function(){  
  64.         if(thePlayer.getState()!= 'PLAYING'){  
  65.         thePlayer.play();  
  66.         }  
  67.         thePlayer.seek(15);  
  68.     });  
  69.       
  70.     //get duration  
  71.     $('.player-duration').click(function() {alert(thePlayer.getDuration());});    
  72.       
  73. script>  
  74. body>  
  75. html>  

你可能感兴趣的:(开源软件,Multimedia)