JWPlayer作为老牌开源页面播放器一直以成功的商业运作保持着活力。从最早基于flash的流媒体播放到如今面向HTML5实现高性能全平台兼容,其技术水准在嵌入式播放领域可谓业界标杆。记得音悦台在起步之初用的也是JW,国外网站的应用案例就更多了。

jwlogo.jpg

本博因影视和MV分享需求从JW5开始应用,到JW6做成插件分享给大家,除<jw>型短代码、多种自定义参数支持外还精简核心开放了部分高级版功能(仅供测试,商业使用请购买授权!)。

JW7对UI进行了大幅优化改造,在移动端效能与直播协议支持等方面也得到显著加强,同时自定义logo与皮肤功能重新免费——故插件更新将以7.9.0版核心为基础进行本地化免验证改造,并增加新功能支持:其中解析代码重写提升了嵌载效率,字幕、直播和VR等组件均实现按需加载,此外还特别为国内定制了社交分享按钮。

JWPlayer_v1.0.6_thumb.png

为节省篇幅,以下仍以代码对照实例的方式直接展示用法(具体更新项可查看文末的changelog):

实例1 - 指定播放器宽高+封面:

<jw>http://jzwalk.qiniudn.com/files/14062501.mp4|
width=553|height=231|
image=http://jzwalk.qiniudn.com/usr/uploads/2014/06/122798219.jpg</jw>

如上所示,在文件地址后接width和height参数用“|”号隔开即可,数值不用带像素单位。image参数接图片url。效果如»

播放器载入中...

实例2 - 清晰度/字幕选择+标题:

<jw>http://jzwalk.qiniudn.com/files/17020401.mp4;http://jzwalk.qiniudn.com/files/17020401HD.mp4|
tracks=http://jzwalk.qiniudn.com/files/17020401cn.srt;http://jzwalk.qiniudn.com/files/17020401en.srt|
title=《刺客信条》剧场版预告|
image=http://jzwalk.qiniudn.com/files/17020401.jpg|
width=553|height=235</jw>

如上,对同一视频准备两种清晰度文件用半角“;”号分隔,tracks参数带两种字幕同理。默认首个字幕文件为中文,后一个为英文。效果如» (点击HD切换高清/CC选择字幕)

播放器载入中...

实例3 - 多视频列表播放+直播:(整合旧版演示共6项)

<jw>http://jzwalk.qiniudn.com/files/17020402.mp4;http://jzwalk.qiniudn.com/files/17020402HD.mp4,
http://jzwalk.qiniudn.com/files/17020403.mp4,
http://jzwalk.qiniudn.com/files/14062503.mp4,
http://jzwalk.qiniudn.com/files/14062504.mp4,
http://jzwalk.qiniudn.com/files/14062502.mp4;http://jzwalk.qiniudn.com/files/14062502HD.mp4 ,
http://cctv6.vtime.cntv.dnion.com:8000/live/no/216_/seg0/index.m3u8|
image=http://jzwalk.qiniudn.com/files/17020402.jpg,
http://jzwalk.qiniudn.com/files/17020403.jpg,
http://jzwalk.qiniudn.com/usr/uploads/2014/06/4263363962.jpg,
http://jzwalk.qiniudn.com/usr/uploads/2014/06/1473582525.jpg,
http://jzwalk.qiniudn.com/usr/uploads/2014/06/3246099474.jpg,
http://jzwalk.qiniudn.com/files/17020404.jpg|
title=HBO科幻美剧《西部世界》第一季预告,
五月档《银河护卫队二》剧场版预告,
金耀熙首支单曲《My Music》MV,
《看门狗》宣传片洛杉矶街头整蛊路人,
《猩球崛起2:黎明之战》剧场版预告,
CCTV-6电影频道HLS高清直播流演示|
description=JJ监制/诺兰编剧/HBO出品/埃文·蕾切伍德主演大尺度烧脑神剧。,
(现在默认仅第一个视频显示描述,故后面的不再填写只用逗号隔空),,,,|
tracks=http://jzwalk.qiniudn.com/files/17020402cn.srt;http://jzwalk.qiniudn.com/files/17020402en.srt,
http://jzwalk.qiniudn.com/files/17020403.srt;
http://jzwalk.qiniudn.com/files/14062503.srt;
http://jzwalk.qiniudn.com/files/14062504cn.srt;http://jzwalk.qiniudn.com/files/14062504en.srt,
http://jzwalk.qiniudn.com/files/14062502cn.srt;http://jzwalk.qiniudn.com/files/14062502en.srt ,|
width=553|height=311</jw>

同上半角“,”号分隔不同视频,视频内再用“;”号分隔清晰度文件,image、title和description等参数同理保持对应。其中有单/双字幕不同情况同样注意tracks参数的分隔方式。效果如»

播放器载入中...

除手动编排外JWPlayer还支持读取rss或json格式的列表索引文件,如本博在《Yo Joes! 我的特种部队》中使用的gijoe.rss,具体命名规范请参考官方文档

列表最后一项是m3u8格式的直播地址演示。如果想直接调用斗鱼优酷等站外链,因其版权问题较难稳定获取插件并未内置相关功能,在此推荐两个API有需要的可以自己选用:

来自DIYgod的B站视频API:使用如https://api.prprpr.me/dplayer/video/bilibili?aid=3386402的地址即可得到视频外链,aid为视频页面url显示的av数字。
来自rpvideo的API:支持优酷等一长串视频站(据说有些不太好用了),访问如http://v.30d.bid/api/index.php?url=http://v.youku.com/v_show/id_XMTI4NjU1NDg4NA==.html可见地址数据,参数用视频页面的完整url即可。

最后,7.9.0还加入了针对移动端UI的进度条分离参数timeSliderAbove,使用参数cast可开启苹果Airplay支持,带上stereomode=monoscopic更能解析360度全景视频——是的你没看错这些专业版功能用本插件都可以免费体验到!下附一段VR演示:(移动端可能不兼容)

播放器载入中...

插件面板中可以查询常用参数列表(当然如果你是专家JWPlayer官网还有一系列强大的API回调demo可供参考),其他功能像皮肤选择、logo自定义和字幕设置等都在后台一目了然,有流媒体发布需求的小伙伴们千万不要再错过了,现在就快下载试试看吧。:)

attachment JWPlayer_v1.0.7.zip (430.5 KB, 下载次数: 2671, 最后修改: 2017-02-07 19:38)

Changlog

1.0.7 使用7.9.0版定制核心; 支持移动端触摸屏优化; 支持苹果Airplay及全景VR; 增加后台参数显隐查询; 修复列表字幕对应bug; 使用Packer+WHAK压缩js。

1.0.6 使用7.8.1版定制核心; 支持HLS/DASH直播; 支持列表/社交分享; 增加信息隐藏和右键提示设置; 增加自定义logo设置; 优化嵌载效率修复bug; 修正摘要输出feed提示。

1.0.5 调整为头部js挂载方式; 优化markdown兼容性。

1.0.4 增加多清晰度字幕支持; 增加RSS列表解析支持。

1.0.3 简化flash源码重打包; 汉化文字提示修改字体。

1.0.2 精简js嵌载调用文件; 加入专业版皮肤选择。

1.0.1 后台增加统一选项设置; 支持常用后缀参数解析。

1.0.0 使用6.8.4616版核心; 实现jw标签替换播放器。

(Last modified: 2017-03-27 18:58)