用JW Player,ckplayer,Smartideo搭建视频直播站-支持各大视频网站和rtmp-CNIDC测评

由于一个朋友的问题，最近测试了好几个Wordpress网站播放器，其中包括Smartideo,ckplayer,JW Player。总的感觉就是，在线网络播放器有很多，其中大部分都可以自己上传播放器的JS、CSS等文件快速搭建，而且Wordpress程序本身就自带视频播放器，无需额外安装。

但是，有些朋友可能想要解析优酷、爱奇艺、腾讯视频等视频放在自己的网站上播放，那就需要播放器的外部解析支持了。老牌的ckplayer自带了视频外部解析，可以自动解析国内各大视频网站的视频实现在个人网站上播放，但是经过测试发现解析速度慢且视频速度也受影响。

Smartideo也是国人开发的一款基于Wordpress的视频播放器，它的好处就在于可以自动识别你插入到文章当中的视频地址，然后自动解析变成视频嵌入，用户可以直接在网页上点击观看。经过我的测试，Smartideo对于国内各大视频网站支持良好，尤其是B站和腾讯视频，播放流畅。

而JW Player则国外一款强大的视频播放器，支持本地上传视频音乐和解析Youtube视频观看。如果利用Wordpress JW Player插件，则可以一键插入Youtube视频，十分地方便。试用了JW Player了后，发现JW Player确实是一个优秀的视频播放器，干净美观，加载起来也是大气。

Smartideo,ckplayer,JW Player这三款视频播放器都可以单独安装在网站上，为了方便Wordpress用户可以直接使用插件，不同的播放器有各自的优势与不足，本篇文章就来简单地分析一下，大家可以根据自己的需求来选择。更多的关于建站的文章，可以看看：

一、JW Player-干净美观的视频播放器

JW Player是一款非常优秀的网页媒体播放器，支持HTML5和和Flash Player。格式支持H.264 ( .mp4, .mov, .f4v )、FLV ( .flv ) 、3GPP ( .3gp, .3g2 )、OGG Theora ( .ogv )和WebM ( .webm )视频格式，MP3 ( .mp3 )、AAC ( .aac, .m4a )、OGG Vorbis ( .ogg )和WAV ( .wav )音频，同时也支持swf和图片( gif 、jpg、png)和YouTube格式视频。

1.1 JW Player 申请使用

首先是进入到JW Player 官网申请一个Key，这个Key是免费的，并且官网还提供了丰富的文档供你参考。

点击下载，你可以在页面最下方看到JW Player 的Key以及程序安装包。

1.2 JW Player 通用方法

下载下来的JW Player 安装包，你可以解压上传到你的网站根目录。

以下是JW Player 播放器使用的实例，比较简单，第一步在Head前引入JS和Key，然后第二步在body内添加div设置视频文件路径。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>视频测试 – 挖站否wzfou.com</title>
<script src="//wzfou.com/jwplayer/jwplayer.js"></script>
<script>jwplayer.key="98Sx98LQbaqk/BA4RCpM8AV3aoIscantvQSDjA==";</script>
</head>
<body>
<div id='myplayer'></div> 
<script type='text/javascript'>    
 jwplayer('myplayer').setup({       
 file: '/shi/big.mp4',     
 width: '640',        
 height: '480'}); 
</script>
</body></html>

Key你需要换成你自己的，可以在官网的下载中找到。jwplayer.js文件和file 请换成你自己的路径。效果如下图：

JW Player 变身直播利器。JW Player 支持rtmp源，你只需要找到合适的rtmp源就可以利用JW Player 在线观看了。效果如下：

JW Player自定义Logo和链接。JW Player支持你添加自己的视频Logo和视频点击链接地址，你只需要在代码中添加aboutlink、abouttext、logo这几个参数就行了。添加多个视频就是复制代码然后修改Div的Id即可，代码示例如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>视频测试 – 挖站否wzfou.com</title>
<script src="//wzfou.com/jwplayer/jwplayer.js"></script>
<script>jwplayer.key="98Sx98LQbaqk/BA4RCpM8AV3aoIscantvQSDjA==";</script>
</head>
<body>
<div id='myplayer'></div> 
<script type='text/javascript'>    
jwplayer('myplayer').setup({       
file: 'rtmp://live.hkstv.hk.lxdns.com/live/hks',  
aboutlink: "http://wzfou.org", 
abouttext: "更多视频请进入挖站否",
logo: {
        file: 'https://wzfou.cdn.bcebos.com/wp-content/uploads/2017/06/wzfou_logo7.png',
        link: 'http://wzfou.com/'
    },
width: '640',        
height: '480'}); 
</script>
<br >
<br >
<br >
<div id='myplayer1'></div> 
<script type='text/javascript'>    
jwplayer('myplayer1').setup({       
file: 'rtmp://live.hkstv.hk.lxdns.com/live/hks',     
width: '640',        
height: '480'}); 
</script>
</body></html>

Logo修改和右键链接效果见下图：