admin管理员组

文章数量:1571606

一.JW Player 简介

JW Player是当今最流行的开源Flah网页播放器,可播放Adobe Flash Player所支持的媒体,具体包括:FLV、MP4、MP3、AAC、JPG、PNG和GIF等,还支持RTMP、HTTP、实时视频流、各种播放清单格式、灵活的设置和广泛的javascript API。此外它还提供多种外观、功能性插件来扩展播放器,以便我们可以分享、推荐、搜索、分析甚至广告投放。

JW Player的github地址:https://github/JWPlayer
二.安装 1.先去官网用邮箱注册一个账号,才能下载。官网链接:https://www.jwplayer/。 注册成功后,登录进去,可以看到下载按钮,如下图所示。
点击“DOWNLOADS”按钮,进入下载页面,如下图所示。
2.根据需求下载相应的版本,我下载的是第一个,现在版本已经更新到7.7.2了。这个版本播放时没有水印,右键菜单也只有一个版本信息,越来越人性化。网上很多教程使用的都是老版本,经测试已经无法播放。还有很多破解版,也都无法正常使用。所以去官网下载,才是王道。 注意到上图中的LICENSE KEY,将它拷贝备用。需要说明的是,这个KEY并没有绑定任何信息,也就是说我的KEY,大家都可以拿去用。但是没KEY的话,JW Plyer不能工作。 下载完成后,随便解压到一个位置,我直接解压到桌面了C:\Users\zhang\Desktop\jwplayer-7.7.1。我下载的时候版本还是7.7.1,不得不说,更新得真快。 3.找两个测试视频放到这个目录中,480320.mp4和sample.flv,这两个视频文件待会打包上传。然后在这个目录新建一个文本,比如test.txt,输入如下代码。 [cpp]  view plain  copy
  1. <html>  
  2. <head>  
  3. <script src="jwplayer.js"></script>  
  4. <script src="jwplayer.flash.swf"></script>  
  5. <!--这是KEY-->  
  6. <script>jwplayer.key="iP+vLYU9H5KyhZeGt5eVuJJIoULUjltoaMeHXg==";</script>  
  7. </head>  
  8. <body>  
  9. <div id='myplayer'></div> <script type='text/javascript'>      
  10.  jwplayer('myplayer').setup({         
  11.  file: '480320.mp4',       
  12.  width: '640',          
  13.  height: '480'});   
  14. </script>  
  15. </body>  
  16. </html>  
然后将tes.txt改为test.html,用浏览器打开,我用的是360浏览器,其他的未测试。上述代码不要输错,即使少了一个引号,打开也是一片空白。 播放效果如下图所示。

还有就是视频的名字不要输错了,否则提示:Error loading player:No playable sources found 现在把代码中的480320.mp4替换成sample.flv,开始测试本地播放flv视频。但是发现播放不了,提示:Flash plugin failed to load,这个提示其实带有误导性,让人觉得是浏览器的Adobe Flash Player插件没有安装好,然后就是拼命的重装该插件,最后还是不行...... 这个问题我也弄了很久,最后去官网查找,官网明确说明JW Player应该放在web服务器中,也就是说双击text.html这种使用方法是不对的。这样的话那句提示就很好理解了,因为JW Player使用不当导致即使浏览器有Flash插件,也会加载失败。 4.如果使用Adobe Media Server自带的Apache服务器组件(这样的话就不用再单独安装服务器了),可以参考: Adobe Media Server 5(AMS)的安装及使用
这时要将C:\Users\zhang\Desktop\jwplayer-7.7.1整个文件夹拷贝到Adobe\Adobe Media Server 5\webroot目录中,如下图所示。

并将test.html改为index.html,然后在浏览器地址中输入http://localhost/jwplayer-7.7.1,sample.flv可以正常播放了。所以以后不管是播放本地视频,还是播放实时流媒体,都通过这种方式来播放。
5.如果使用自己安装的Aapche服务器,参考:Apache服务器最新版下载、安装及配置(windows版) 或者使用服务器开发套件比,如说XAMPP,参考: xampp的安装及使用 则需要将C:\Users\zhang\Desktop\jwplayer-7.7.1整个文件夹拷贝到这两个服务器安装目录的htdocs文件夹中,并将test.html改为index.html,然后在浏览器地址中输入http://localhost/jwplayer-7.7.1。
三.使用 其实前面已经讲了一部分使用,即播放本地视频,现在演示如何播放在线rtmp流。这里分享一个可用的rtmp直播源,如下所示。 香港卫视:rtmp://live.hkstv.hk.lxdns/live/hks  其他的源可参考:http://blog.csdn/chinabinlang/article/details/45092297 代码如下所示。 [cpp]  view plain  copy
  1. <html>  
  2. <head>  
  3. <script src="jwplayer.js"></script>  
  4. <script src="jwplayer.flash.swf"></script>  
  5. <script>jwplayer.key="iP+vLYU9H5KyhZeGt5eVuJJIoULUjltoaMeHXg==";</script>  
  6. </head>  
  7. <body>  
  8. <div id='myplayer'></div> <script type='text/javascript'>      
  9.  jwplayer('myplayer').setup({         
  10.  file: 'rtmp://live.hkstv.hk.lxdns/live/hks',       
  11.  width: '640',          
  12.  height: '480'});   
  13. </script>  
  14. </body>  
  15. </html>  
播放效果如下所示。
如果直播源有问题,会提示:Error loading stream:Could not connect to server
更多错误的处理可参考官网:https://support.jwplayer/customer/portal/articles/1403682-common-error-messages
RTMP局域网直播环境搭建可参考:http://blog.csdn/caoshangpa/article/details/52996547 JW Player7.7.1+测试视频下载链接:见http://blog.csdn/caoshangpa/article/details/529

本文标签: 解决方法使用方法正确JWPlayerflash