JWPlayer是老牌开源页面播放器,与HighSlide一样有公司化的商业模式,功能也份大量足毫不含糊。从以前基于flash的音视频播放字幕特效等,到现在的6.8+版本与HTML5平滑对接,兼容各大浏览器及移动端,其技术水准在嵌入式播放领域可谓业界标杆。国内音悦台等站在起步之初就是用的JW,国外大到YouTube小到视频博客应用案例也数不胜数。

jwlogo.jpg

本博由于美剧翻译和分享MV等需要使用过JW5,如今重整资源又体验了把JW6的强大,也借此机会把优化成果以Typecho插件的形式分享给大家。:) 除了<jw></jw>式短代码、多项插件设置和后缀参数支持外,精简过的js与flash核心文件不含官方水印和右键标识,并可以使用8款专业版皮肤(注意仍不支持按钮插件、广告嵌入等授权功能,请遵守非商用协议)。下面展示代码实例。

jwplayer_settings_s.jpg

1. 指定播放器宽高+封面:

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

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

效果如下» (配合HighSlide效果)

点击显示播放器
播放器载入中...

2. 清晰度/字幕选择+标题:

<jw>http://jzwalk.qiniudn.com/files/14062502.mp4;http://jzwalk.qiniudn.com/files/14062502HD.mp4
|tracks=http://jzwalk.qiniudn.com/files/14062502zh.srt;http://jzwalk.qiniudn.com/files/14062502en.srt
|title=《猩球崛起2:黎明之战》剧场版预告
|image=http://jzwalk.qiniudn.com/usr/uploads/2014/06/3246099474.jpg
|width=553|height=311</jw>

如代码所示,对于同一视频有两种清晰度的文件可用半角“;”号分隔,tracks参数带的两种字幕文件同理。默认首个字幕文件为中文,后一个为英文。由于插件设置和移动设备兼容等问题,不建议添加三种以上的清晰度或字幕选择。

效果如下» (控制条点击HD切换高清,CC选择字幕)

播放器载入中...

3. 多视频列表播放+综合:

<jw>http://jzwalk.qiniudn.com/files/14062503.mp4,
http://jzwalk.qiniudn.com/files/14062504.mp4
|image=http://jzwalk.qiniudn.com/usr/uploads/2014/06/4263363962.jpg,
http://jzwalk.qiniudn.com/usr/uploads/2014/06/1473582525.jpg
|title=金耀熙出道单曲《My Music》MV,
游戏《看门狗》宣传策划真人整蛊
|description=音乐培训生出身的金耀熙凭借YouTube上的自弹自唱系列走红,首支单曲《My Music》牢牢俘获粉丝耳朵,在世界乐坛刮起一阵“苹果”旋风。,
育碧单机平台大作《Watch_Dogs》为了让玩家身临其境体验街头黑客惩治罪犯的游戏背景故事,发售前夕在洛杉矶街头组织拍摄恶搞宣传片玩坏路人~
|tracks=http://jzwalk.qiniudn.com/files/14062503.srt,
http://jzwalk.qiniudn.com/files/14062504zh.srt;http://jzwalk.qiniudn.com/files/14062504en.srt
|width=553|height=465
|listbar=bottom|listsize=154</jw>

如代码所示,用半角“,”号隔开不同的视频(每个视频内部可再用“;”号分隔清晰度文件,见上例,勿混淆)。同理image、title、description(描述信息)参数均可用“,”号分隔对应不同视频。
本例中的两个视频分别带单/双字幕,注意tracks参数的分隔方式。另外除后台可统一设置列表位置宽高外,也可使用listbarlistsize参数在具体实例中覆盖。

效果如下»

播放器载入中...

对于视频较多的情况JW6还支持读取RSS格式的列表文件。如本博在《Yo Joes! 我的特种部队》中使用的http://www.yzmb.me/usr/uploads/gijoe.rss。具体命名规范请参考官方文档

attachment JWPlayer_v1.0.5.zip (273.4 KB, 下载次数: 1764, 最后修改: 2014-07-03 16:58)

Changlog

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: 2014-07-03 18:46)