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

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

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

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

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

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

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

  1. 使用MailPoet Newsletters插件为WordPress搭建RSS邮件订阅支持SMTP
  2. 利用MailChimp建立RSS邮件订阅平台-每月免费12000封邮件可加2000用户
  3. 服务器虚拟化面板SolusVM安装与使用-支持新建管理OpenVZ, KVM和Xen VPS

一、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

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

JW Player下载程序包

1.2  JW Player 通用方法

下载下来的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 变身直播利器。JW Player 支持rtmp源,你只需要找到合适的rtmp源就可以利用JW Player 在线观看了。效果如下:

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.b0.upaiyun.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修改和右键链接效果见下图:

JW Player修改Logo

1.3  JW Player WordPress插件

JW Player 官方开发一个插件,不过我用过之后感觉没有非官方开发的插件好用。JW Player 7 for WordPress官网地址:https://wordpress.org/plugins/jw-player-7-for-wp/

Player 7 for WordPress设置页面,在第一个URL中填写JW Player的js路径。你需要提前将JW Player解压上传到你的网站根目录下,Key和上面一样。JW Player 7 for WordPress可以选择在哪里放置视频,视频的位置是在内容是上还是下。

JW Player插件设置

JW Player 7 for WordPress还可以设置相关视频、广告和分享。

JW Player相关视频

如何使用JW Player 7 for WordPress?在写文章时,拉页面到最下方,这里你就可以填写你的视频URL了,支持Youtube或者你自己上传的视频文件地址。

JW Player放出链接地址

点击“More Options”可以为视频设置标题、描述、是否自动播放、播放完是否从头开始等等。

JW Player视频选项

另外,JW Player 7 for WordPress会自动将你的文章的特色图片作为视频的封面图片。

JW Player特色图片

这是JW Player 7 for WordPress的视频播放效果。

JW Player播放效果

点击还可以分享视频。如果想要国内的分享,你可以修改插件的分享代码部分。

JW Player视频分享

二、ckplayer-国产优秀在线播放器

ckplayer是一款国人开发的在线网页播放器,支持http协议下的flv,f4v,mp4,支持rtmp视频流和rtmp视频回放,支持m3u8格式,如果搭载视频解析服务,就可以直接嵌入优酷、爱奇艺、腾讯视频等各大视频网站的视频了。

ckplayer官网:http://www.ckplayer.com/,ckplayer提供了一个在线配置工具,你可以选择视频调用方式、播放器配置、广告设置、宽高比、分享等,然后系统会自动生成调用代码,你将这个代码放在Html网页中就可以使用了。

ckplayer配置代码

如果你想用ckplayer播放优酷、爱奇艺、腾讯等视频,那么就需要借助视频解析服务了。经过测试,目前免费的视频解析服务Mine还可以用,你可以到官网搜索API接口。如果用的是Wordpress,那么可以直接安装Mine插件。

ckplayer安装插件

Mine插件下载地址:https://www.ucblog.net/mine-video.1.5.3.zip,启用插件,在写文章页面选择播放来源,填写视频ID/URL、高度,最后点击添加视频。

ckplayer添加视频

刷新网页,你就可以看到视频正常播放了。不过,由于受视频解析的影响,感觉视频播放速度方面有些慢了。

ckplayer解析成功

三、Smartideo-WP强大视频播放器

Smartideo 是为 WordPress 添加对在线视频支持的一款插件(支持手机、平板等设备HTML5播放)。 目前支持优酷、搜狐视频、土豆、56、腾讯视频、新浪视频、酷6、华数、乐视、YouTube 等网站。

Smartideo插件地址:https://wordpress.org/plugins/smartideo/,备用:https://www.ucblog.net/smartideo.zip。启用插件,然后进入设置选项,这里你可以设置一些提示语、资源加载方式等等。

Smartideo设置选项

在写文章时,直接粘贴视频播放页完整的URL到编辑器(单独一行),就可以加载视频播放器。

Smartideo添加视频地址

测试发现,Smartideo对国内大部分的视频网站是有效的,尤其是腾讯视频、B站、A站等效果很不错。

Smartideo视频效果

四、总结

JW Player,ckplayer,Smartideo这三款都是非常优秀的视频播放器,各有各的优缺点,JW Player播放器界面漂亮美观,特别适合本地视频和Youtube视频播放。当然,也有人会修改代码将国内的视频解析服务用在JW Player上。

ckplayer本身是一个强大的视频播放器,官网提供的在线配置也很贴心,对于不懂代码的朋友可以直接复制调用。而作为WordPress视频播放器Smartideo,可以直接将各大视频网址转为嵌入,且支持手机平板观看,使用效果也很不错的。

文章出自:挖站否 https://wzfou.com/wp-video/,版权所有。本站文章除注明出处外,皆为作者原创文章,可自由引用,但请注明来源。

关于站长(Qi),8年前经常混迹于免费资源圈中,有幸结识了不少的草根站长。之后自己摸爬滚打潜心学习Web服务器、VPS、域名等,兴趣广泛,杂而不精,愿意将自己经验与心得分享出来,与大家共勉。

44 个评论

  • 李毅哲 回复

    2017年6月21日 at 下午9:52

    WordPress网站嵌入视频或直播看来简单许多,只需要留意版权问题.. smile

    • Qi 回复

      2017年6月21日 at 下午10:14

      直接引用没有放在本地也有版权风险吗?

      • 李毅哲 回复

        2017年6月22日 at 下午7:42

        嵌入来源如果非法还是会有风险的… idea

        • Qi 回复

          2017年6月23日 at 上午8:53

          哦,我以为不在本地就不承担责任。 sweat

  • 料神Sam 回复

    2017年6月21日 at 下午9:57

    一个合肥的外贸人路过。从部落来的 laugh

    • Qi 回复

      2017年6月21日 at 下午10:10

      博主刚刚去你那里留言,怎么不需要我输入信息就知道我?厉害。 eg

      • 料神Sam 回复

        2017年6月21日 at 下午10:55

        刚查了评论历史记录,原来你去年5月在我博客留言过。说主题不错。我特地去 wayback machine 看了一下去年5月份我的站是啥样子,真的跟现在差好大。。

  • 回复

    2017年6月22日 at 上午9:02

    qi大佬,国内外电商解决方案有没有什么免费的~~ecshop这种玩意儿貌似要付版权费哇。我只是搞个小的商城~~轻量级的~~

    • Qi 回复

      2017年6月22日 at 上午10:08

      那就用WP吧,安装一个电子商务插件就可以搞定。

      • 回复

        2017年6月22日 at 上午11:11

        ~还有没有其他的哦~WP这个我使用不是很习惯来着。。

        • 料神Sam 回复

          2017年6月22日 at 下午3:06

          可以试试 shopify。

          • Qi 回复

            2017年6月23日 at 上午9:08

            shopify现在是不是还没有支付宝网关?

        • Qi 回复

          2017年6月23日 at 上午9:17

          试试楼上的:shopify,不过貌似是付费的。

  • 雅兮网 回复

    2017年6月22日 at 下午12:20

    偶尔在站点引用一些视频,加个插件挺实用

    • Qi 回复

      2017年6月23日 at 上午9:16

      博主,你的博客评论出现:不好意思,您的评论违反了雅兮网评论规则!。无法发出评论了。。

      • 雅兮网 回复

        2017年6月24日 at 上午11:51

        那可能是你发的文字里面触发了黑名单了,所以被拒绝提交了 smile giggle

        • Qi 回复

          2017年6月25日 at 下午6:34

          好像不是的,因为我又重新评论了一下,也不行。

  • 可乐 回复

    2017年6月22日 at 下午2:55

    说到直播 我想起了red5 https://www.cokemine.com/red5.html smile

    • Qi 回复

      2017年6月23日 at 上午9:11

      jw player直播比这个设置要麻烦一些。

      • 可乐 回复

        2017年6月23日 at 上午10:29

        是的 red5中自带jw player播放器 只需要把链接改一下就可以直播了

  • Kung 回复

    2017年6月22日 at 下午9:20

    找了几个好看的播放器,结果都要钱..很尴尬

    • Qi 回复

      2017年6月23日 at 上午8:53

      国外有免费的,国内的基本上都要钱。

  • 王大佬 回复

    2017年6月23日 at 上午7:04

    JW Player太强大了,考完试去折腾以 smile 一下

    • Qi 回复

      2017年6月23日 at 上午8:52

      博主是大学生吗?

  • 烟花易冷 回复

    2017年6月23日 at 上午10:41

    clap WordPress底子太强

  • 烟花易冷 回复

    2017年6月23日 at 上午10:41

    Qi姐姐没把ajax评论弄好呀 smile dull

    • Qi 回复

      2017年6月23日 at 下午4:50

      我去整整看。这个主题自带的没有。文章倒是有。

    • Qi 回复

      2017年6月25日 at 下午7:26

      刚刚设置了一下,看看效果?

  • uwi 回复

    2017年6月23日 at 下午4:56

    插件果然很强大。

  • uwi 回复

    2017年6月23日 at 下午4:57

    我想安装一下。

  • Abyss.Cong 回复

    2017年6月23日 at 下午8:42

    申请友情连接
    SaFly.ORG
    https://www.safly.org/
    您的链接已添加至
    https://www.safly.org/blogrolls/
    Qi换站以后一直想申请,但我是内页友链怕Qi嫌弃。😭

    • Qi 回复

      2017年6月25日 at 下午7:22

      谢谢,已经添加啦。 laugh

      • Richa 回复

        2017年6月27日 at 下午2:01

        inlove 我也要。

  • 大喇叭 回复

    2017年6月24日 at 下午11:44

    喜欢 jw。

  • qiuyming 回复

    2017年6月29日 at 下午12:37

    讲讲升级wp,在线装插件的时候需要ftp账号的吧

    • Qi 回复

      2017年6月29日 at 下午1:44

      用的VPS的话,查看一下属性是不是www的。用的是虚拟主机的话,看看有没有写入权限。基本上就是这两种原因了。

  • ?????????????? 回复

    2017年7月17日 at 下午2:43

    博主有哪些播放器是支持防盗链? smile

    • Qi 回复

      2017年7月17日 at 下午5:51

      播放器貌似没有这样的,不过可以从服务器上做盗链。

  • 小翁 回复

    2017年7月27日 at 下午2:30

    ckplayer在不支持flash的情况下功能几乎全挂…h5播放器比较好的有mediaelement和videojs,前者已经在4.x被wp官方嵌入。另外rtmp直播在没有flash的情况下也是挂的,只能用hls(m3u8)或者http-flv(上面说的两个播放器和jwplayer应该都支持)。

    • Qi 回复

      2017年7月27日 at 下午4:43

      Flash貌似即将被Adobe放弃了,刚刚看新闻说。

  • wulinlin 回复

    2017年8月14日 at 上午9:09

    JW Player 新注册好像没有免费的KEY了

    • Qi 回复

      2017年8月14日 at 上午11:15

      这么快就收费了?

  • 龙笑天 回复

    2017年9月3日 at 下午1:07

    现在真是各种直播都有… laugh

发表评论

Login

欢迎!请登录你的账号。

记住我 忘记密码?

还未注册 注册

Lost Password

Register

返回顶部