JWPlayer 7的正确使用方法及Flash plugin failed to load解决方法

最新推荐文章于 2024-06-29 10:55:21 发布

草上爬

最新推荐文章于 2024-06-29 10:55:21 发布

阅读量5.5w

点赞数 16

分类专栏：资料文章标签： jwplayer rtmp

本文链接：https://blog.csdn.net/caoshangpa/article/details/52954552

版权

资料专栏收录该内容

56 篇文章 16 订阅

订阅专栏

一.JW Player 简介

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

JW Player的github地址： https://github.com/JWPlayer

二.安装

1.先去官网用邮箱注册一个账号，才能下载。官网链接： https://www.jwplayer.com/。

注册成功后，登录进去，可以看到下载按钮，如下图所示。

点击“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，输入如下代码。

<html>
<head>
<script src="jwplayer.js"></script>
<script src="jwplayer.flash.swf"></script>
<!--这是KEY-->
<script>jwplayer.key="iP+vLYU9H5KyhZeGt5eVuJJIoULUjltoaMeHXg==";</script>
</head>
<body>
<div id='myplayer'></div> <script type='text/javascript'>    
 jwplayer('myplayer').setup({       
 file: '480320.mp4',     
 width: '640',        
 height: '480'}); 
</script>
</body>
</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.com/live/hks

其他的源可参考：http://blog.csdn.net/chinabinlang/article/details/45092297

代码如下所示。

<html>
<head>
<script src="jwplayer.js"></script>
<script src="jwplayer.flash.swf"></script>
<script>jwplayer.key="iP+vLYU9H5KyhZeGt5eVuJJIoULUjltoaMeHXg==";</script>
</head>
<body>
<div id='myplayer'></div> <script type='text/javascript'>    
 jwplayer('myplayer').setup({       
 file: 'rtmp://live.hkstv.hk.lxdns.com/live/hks',     
 width: '640',        
 height: '480'}); 
</script>
</body>
</html>

播放效果如下所示。