JWPlayer作为老牌开源页面播放器一直以成功的商业运作模式保持着活力。从最早基于flash的流媒体播放到如今面向HTML5实现高性能全平台兼容,其技术水准在嵌入式播放领域可谓业界标杆。记得国内音悦台等起步之初用的也是JW,国外大站的应用案例就更多了。
本博因影视MV分享需求从JW5开始使用,到JW6做成插件发布,除<jw>型短代码、多种自定义参数支持外还精简核心开放了部分高级功能(注意仅供学习测试,商业使用请购买正版授权)。
JW7开始对UI进行大幅优化,在移动端效能与直播协议兼容方面显著增强,JW8进一步提升响应速度开放自定义配色API,对字幕、直播VR组件等均实现按需加载。新版插件便以8.4.1为核心再次实现本地化调用和免验证改造,并针对国内平台定制了社交分享按钮。
为节省篇幅,以下仍以代码对照实例方式直接展示用法(具体更新项请查看文末changelog):
实例1 - 锁定比例自适应+封面:
<jw>http://yzmb-1252422232.file.myqcloud.com/files/14062501.mp4|
width=100%|aspectratio=2.4:1|
image=http://yzmb-1252422232.file.myqcloud.com/usr/uploads/2014/06/122798219.jpg</jw>
如上所示,文件地址后可接width或height参数用“|”号隔开,数值不用带像素单位,百分比可配合aspectratio参数锁定比例实现自适应。image参数接图片url。效果如»
实例2 - 清晰度/字幕选择+标题:
<jw>http://yzmb-1252422232.file.myqcloud.com/files/180712.mp4;http://yzmb-1252422232.file.myqcloud.com/files/180712HD.mp4|
tracks=歌词^http://yzmb-1252422232.file.myqcloud.com/files/180712.srt|
title=魔力红/SZA合作《What Lovers Do》MV|
image=http://yzmb-1252422232.file.myqcloud.com/files/180712.jpg|
width=100%|aspectratio=2.67:1|stretching=fill</jw>
同一视频可准备多种清晰度文件(相同格式)用半角“;”号分隔,默认第1~3个文件分别显示为标清/高清/超清,或自定义名称在url前用“^”号隔开。tracks参数同理,默认首个字幕中文后一个英文,实例仅有英文字幕故自定义名称为“歌词”。效果如» (CC切换字幕/选项内切换清晰度)
实例3 - 多视频列表播放:(整合旧版演示共6项)
<jw>360p^http://yzmb-1252422232.file.myqcloud.com/files/17020402.mp4;720p^http://yzmb-1252422232.file.myqcloud.com/files/17020402HD.mp4,
http://yzmb-1252422232.file.myqcloud.com/files/17020403.mp4,
http://yzmb-1252422232.file.myqcloud.com/files/14062503.mp4,
http://yzmb-1252422232.file.myqcloud.com/files/14062504.mp4,
http://yzmb-1252422232.file.myqcloud.com/files/14062502.mp4;http://yzmb-1252422232.file.myqcloud.com/files/14062502HD.mp4 ,
http://yzmb-1252422232.file.myqcloud.com/files/17020401.mp4;http://yzmb-1252422232.file.myqcloud.com/files/17020401HD.mp4|
image=http://yzmb-1252422232.file.myqcloud.com/files/17020402.jpg,
http://yzmb-1252422232.file.myqcloud.com/files/17020403.jpg,
http://yzmb-1252422232.file.myqcloud.com/usr/uploads/2014/06/4263363962.jpg,
http://yzmb-1252422232.file.myqcloud.com/usr/uploads/2014/06/1473582525.jpg,
http://yzmb-1252422232.file.myqcloud.com/usr/uploads/2014/06/3246099474.jpg,
http://yzmb-1252422232.file.myqcloud.com/files/17020401.jpg|
title=HBO科幻美剧《西部世界》首季预告,
五月档《银河护卫队二》剧场版预告,
金耀熙首支单曲《My Music》MV,
《看门狗》宣传片洛杉矶街头整蛊路人,
《猩球崛起2:黎明之战》剧场版预告,
真人翻拍《刺客信条》剧场版预告|
description=JJ监制/诺兰编剧/埃文·蕾切伍德主演大尺度烧脑神剧。|
tracks=http://yzmb-1252422232.file.myqcloud.com/files/17020402cn.srt;http://yzmb-1252422232.file.myqcloud.com/files/17020402en.srt,
http://yzmb-1252422232.file.myqcloud.com/files/17020403.srt,
韩文^http://yzmb-1252422232.file.myqcloud.com/files/14062503.srt,
http://yzmb-1252422232.file.myqcloud.com/files/14062504cn.srt;http://yzmb-1252422232.file.myqcloud.com/files/14062504en.srt,
http://yzmb-1252422232.file.myqcloud.com/files/14062502cn.srt;http://yzmb-1252422232.file.myqcloud.com/files/14062502en.srt,
http://yzmb-1252422232.file.myqcloud.com/files/17020401cn.srt;http://yzmb-1252422232.file.myqcloud.com/files/17020401en.srt|
width=100%|aspectratio=16:9</jw>
同样半角“,”号分隔不同视频,image、title和description参数也保持对应。同一视频内再用“;”号分隔清晰度文件,或用“^”号在url前自定义名称。字幕分隔语种文件同理。效果如»
除以上手动编排方式外,JWPlayer还支持读取rss或json格式的列表索引文件,如本博在《Yo Joes! 我的特种部队》中使用的gijoe.rss,具体命名规范可参考官方文档。
如果播放的是m3u8格式文件将自动开启直播模式。不过现在视频站外链获取难度较高,github上暂时没发现好用的API,但有下载用命令行工具you-get等适合有一定技术基础的童鞋参考研究,在此就不做过多题外赘述了。提供一个简单实例:(注意安卓系统要看浏览器软件是否支持)
另外还要提到一点是JW8已经彻底弃用flash方案,故原primary参数被取消,原移动端UI参数timeSliderAbove也已自动集成失效,新增了minDvrWindow参数可指定直播流缓存量实现录播控制;依然支持高级参数如cast开启Airplay投屏支持,stereomode解析360度全景视频等。最后就附一则VR演示实例:(注意目前仅PC平台支持纯浏览器内的全景视频解析)
所有常用参数均可以通过插件面板右上角的链接浮层查看(如果你是专家JWPlayer官网还有一系列API文档可供参考)。其他功能像配色预览、logo定制、字幕设置等都在后台一目了然了,有流媒体发布需求的小伙伴们不要错过哦!:)
Changlog
1.0.9 补充js库修正兼容性bug; 增加url加解密播放支持; 切换文件可自定义名称; 参数解析支持自动置空。
1.0.8 使用8.4.1版定制核心; 增加自定义配色预览; 增加编辑器按钮支持; 修正MD标签转义bug; 重整参数列表文件结构。
1.0.7 使用7.9.0版定制核心; 支持移动端触摸屏优化; 支持苹果Airplay及全景VR; 增加后台参数显隐查询; 修复列表字幕对应bug; 使用Packer+WHAK压缩js。
1.0.6 使用7.8.1版免验证定制核心; 支持HLS/MPEG-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: 2018-08-11 20:33)

为什么启用这个插件了,前台的文章摘要把文件的名称啊什么的链接都显示出来了?
比如这个文章的图片(![6d6db54b86d19236d0792fda7bda3a86.jpg][1])在前台文章摘要里显示出来了
已知bug,以后修复。现在可以参考这里自己修改下https://github.com/jzwalk/JWPlayer/issues/3
你好,请问在微信中,为什么要刷新一次才可以正常打开这个播放器页面,否则只显示一片空白
那可能是JWPlayer的加载机制和微信有冲突吧,如果其他播放器没这个问题的话
请问一下,其他都正常,但是就是无法加载字幕,为什么。
字幕文件所在服务器要允许你的网站跨域读取才行,一般做过安全防范的播放器是无法直接调用的
html5支持播放f4v flv格式的视频吗?
支持的放心
为啥启用插件后,在文章中加入代码后,就不能发表表情评论了呢,其它没加入视频代码的文章就没影响
如果你用的表情插件是Smilies我在默认主题下测试是没问题的,应该是js冲突,你可以换jquery模式再试试
在我的站点有点小问题:
环境:typecho 1.2 8月1日开发版
问题:当开启jwplayer或者AudioPlayer的时候,首页截取的文章就会显示markdown源代码,默认主题用了---more---也是这样,请帮忙看看哪里有问题。
这个问题已经知晓,会在未来版本修复,现在你可以参考这里我的说明自己修改下https://github.com/jzwalk/JWPlayer/issues/3
按照实例1的方法无法显示图片,加了图片url,封面还是黑的,emmm链接放在评论里了,博主有空可以看看吗。插件很棒
已解决,可能是网易云图片url 的问题,换了新浪可以了
OK
发现个bug,在用主题的情况下会因为用了这个播放器而页面打不开
插件没这么强大的bug效果。。
如果在默认主题下没问题要从你用的主题找原因了
呃.发现了个小BUG 1.1 (17.10.30)用插件的话打开带有插件代码的文章只能进入空页面 要手动刷新一遍才可以正常进入url typecho 版本:1.1 (17.10.30)
您的插件版本:1.0.8
这个应该不是JWPlayer的事,你可以切到默认主题或关闭其他插件再看,貌似有其他不规范代码或模版js干扰了页面输出
在一些浏览器中无法显示 提示the video player failed to load 请问是什么原因
1.0.9更新了看看。直播或VR移动端不支持属正常现象,PC端还报错只有js冲突能解释了