• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

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

主机教程 web前端中文站 2年前 (2018-01-06) 1153次浏览 已收录 0个评论

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

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

但是,有些朋友可能想要解析优酷、爱奇艺、腾讯视频等视频放在自己的网站上播放,那就需要播放器的外部解析支持了。老牌的 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,ckplayer,Smartideo 搭建视频直播站-支持各大视频网站和 rtmp

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

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

1.2  JW Player 通用方法

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

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

以下是 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,ckplayer,Smartideo 搭建视频直播站-支持各大视频网站和 rtmp

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

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

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,ckplayer,Smartideo 搭建视频直播站-支持各大视频网站和 rtmp

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,ckplayer,Smartideo 搭建视频直播站-支持各大视频网站和 rtmp

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、总结

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

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

“原文出自挖否站”

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:用 JW Player,ckplayer,Smartideo 搭建视频直播站-支持各大视频网站和 rtmp
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址