JW Media Player是一个开源的在网页上使用的Flash视频、音频以及图片播放器,支持 Sliverlight 播放,可以通过一个XML文件使播放器自动切换显示一组图片,并播放背景音乐。
它支持播放的Adobe Flash Player和HTML5浏览器可以处理任何格式(FLV文件,H.264标准,MP4功能,HLS(m3u8),VP8的,WEBM,支持MP3,AAC,JPG,PNG和GIF)。它也支持各种流和播放清单格式(包括RTMP协议,HTTP直播和更多)和多种播放选项。并支持所有主要的CDN和自适应比特率切换意味着你可以在全球各地提供高质量的内容。
JW Player是一个先进的视频平台,您可以进行自定义和扩展:
无需特殊工具,你可以编辑文本创建图像,然后你可以建立一个皮肤。
它的插件架构 和 JavaScript API让您可以轻松地扩展它的功能,融入您的网站,或连接到第三方服务。
创建媒体提供商的能力意味着您可以连接到自己的专有CDN或内容服务器。
(tip:打包好的播放器以及demo在最下面下载哦,默认提供的修改版jwplayer播放器,所有JS文件全部本地化(官方默认是调用JW官方的远程资源),含KEY注册码 非破解版)
特别注意:demo.htnl需要在web环境下运行,否则播放器无法加载!
演示案例图片:
网页中创建播放器代码:(播放列表在json数据中)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" /> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>jwplayer</title> <meta content="" name="Keywords"> <meta content="" name="Description"> <meta name="format-detection" content="telephone=no"> <style> body,html{margin: 0; padding: 0;} </style> </head> <body> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="jwplayer-8.0.13/jwplayer.js"></script> <script>jwplayer.key="eDG65kIBzOv7Yf0KnGQFML8quJnIhLjD";</script> <div id="player"> Loading... </div> <script type="text/javascript"> var height1 = $(window).height(); jwplayer("player").setup({ playlist: 'a.json', //"file": "http://7xo74u.com1.z0.glb.clouddn.com/o_1bu06jjq4j155kd1i821gk7132n9.mp4",//视频文件路径 /*"playlist": [{ "title":"测试视频", "description":"这个真的是是测试视频啦啦啦", "sources": [{ "file": "http://7xo74u.com1.z0.glb.clouddn.com/o_1bu06jjq4j155kd1i821gk7132n9.mp4", "label": "HD", },{ "file": "video.mp4", "label": "SD", }] }],*/ //"aspectratio": "16:9",//播放器自适应比例 "width": "100%",//播放器高度 "height": height1,//播放器高度 //"type":"mp4",//播放文件类型(可选) "title": "测试标题",//标题(可选) "description": "测试视频描述",//描述(可选) //"image": "http://ww4.sinaimg.cn/large/b6839357jw1e3val80tknj20dw099jsb.jpg",//视频封面(可选) "repeat":"true",//重复播放(留空则不重复播放) "autostart":"true",//自动播放(留空则不启用自动播放) }); </script> </body> </html> |
其中 a.json的数据格式为:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | { "feed_instance_id": "adbfd9ff-333c-44b5-a38b-8040a22b9629", "title": "Driving USA", "kind": "Single Item", "playlist": [ { "mediaid": "8L4m9FJB", "description": "Beautiful sunset point of view shot along empty desert highway through Monument Valley, Arizona Utah", "pubdate": 1495054284, "tags": "stock video", "image": "https://cdn.jwplayer.com/thumbs/8L4m9FJB-720.jpg", "title": "Driving USA", "sources": [ { "type": "application/vnd.apple.mpegurl", "file": "https://cdn.jwplayer.com/manifests/8L4m9FJB.m3u8" }, { "width": 320, "height": 180, "type": "video/mp4", "file": "https://cdn.jwplayer.com/videos/8L4m9FJB-Zq6530MP.mp4", "label": "H.264 320px" }, { "width": 480, "height": 270, "type": "video/mp4", "file": "https://cdn.jwplayer.com/videos/8L4m9FJB-TNpruJId.mp4", "label": "H.264 480px" }, { "width": 720, "height": 406, "type": "video/mp4", "file": "https://cdn.jwplayer.com/videos/8L4m9FJB-cIp6U8lV.mp4", "label": "H.264 720px" }, { "width": 1280, "height": 720, "type": "video/mp4", "file": "https://cdn.jwplayer.com/videos/8L4m9FJB-FctPAkow.mp4", "label": "H.264 1280px" }, { "width": 1920, "height": 1080, "type": "video/mp4", "file": "https://cdn.jwplayer.com/videos/8L4m9FJB-8yQ1cYbs.mp4", "label": "H.264 1920px" } ], "tracks": [ { "kind": "thumbnails", "file": "https://cdn.jwplayer.com/strips/8L4m9FJB-120.vtt" } ], "link": "https://cdn.jwplayer.com/previews/8L4m9FJB", "duration": 30 } ], "description": "Beautiful sunset point of view shot along empty desert highway through Monument Valley, Arizona Utah" } |
网页中创建播放器代码:(支持清晰度切换的mp4格式代码)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JWPlayer8.0演示-小灰灰</title> <script>window.pluginPath="jwplayer";</script> <script type="text/javascript" src="jwplayer.js"></script> <script>jwplayer.key="eDG65kIBzOv7Yf0KnGQFML8quJnIhLjD";</script> </head> <body> <div id="jw8"></div> <script type="text/javascript"> jwplayer("jw8").setup({ /*file: "http://7xo74u.com1.z0.glb.clouddn.com/o_1bu06jjq4j155kd1i821gk7132n9.mp4", type: "mp4",*/ "playlist": [{ "title":"测试视频", "description":"这个真的是是测试视频啦啦啦", "sources": [{ "file": "https://cdn.jwplayer.com/videos/8L4m9FJB-Zq6530MP.mp4", "label": "标清 mp4 " },{ "file": "https://cdn.jwplayer.com/videos/8L4m9FJB-TNpruJId.mp4", "label": "高清 mp4_hd " },{ "file": "https://cdn.jwplayer.com/videos/8L4m9FJB-cIp6U8lV.mp4", "label": "H.264 720px" },{ "file": "https://cdn.jwplayer.com/videos/8L4m9FJB-FctPAkow.mp4", "label": "H.264 1280px" },{ "file": "https://cdn.jwplayer.com/videos/8L4m9FJB-8yQ1cYbs.mp4", "label": "H.264 1920px" }] }], }); </script> <a href="https://xiaohuihui.net.cn">小灰灰博客</a> </body> </html> |
最简单的m3u8直链视频的播放代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JWPlayer8.0演示-小灰灰</title> <script>window.pluginPath="jwplayer";</script> <script type="text/javascript" src="jwplayer.js"></script> <script>jwplayer.key="eDG65kIBzOv7Yf0KnGQFML8quJnIhLjD";</script> </head> <body> <div id="jw8"></div> <script type="text/javascript"> jwplayer("jw8").setup({ file: "http://cn2.zuidadianying.com/20180201/A8VkkLW6/index.m3u8", }); </script> <a href="https://xiaohuihui.net.cn">小灰灰博客</a> </body> </html> |
如果想调用支持清晰度切换的m3u8格式视频, 小灰灰目前只找到一种方法,即把不同清晰度地址的m3u8地址拼接成新的m3u8地址,然后调用这个新的m3u8视频地址,代码如下:
创建的m3u8代码为:
1 2 3 4 5 6 7 8 9 10 11 | #EXTM3U #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=620000,RESOLUTION=480x270,CODECS="mp4a.40.2,avc1.77.30",CLOSED-CAPTIONS=NONE https://videos-f.jwpsrv.com/content/conversions/LOPLPiDX/videos/8L4m9FJB-24721146.mp4.m3u8?token=0_5a7544f7_0xb31d8a5237724d1194453303ead88e7e3ca9194b #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=5100000,RESOLUTION=1920x1080,CODECS="mp4a.40.2,avc1.77.30",CLOSED-CAPTIONS=NONE https://videos-f.jwpsrv.com/content/conversions/LOPLPiDX/videos/8L4m9FJB-24721151.mp4.m3u8?token=0_5a7544f7_0x64a86b5fd22ad788c1eb3fe6bf32e17d32fc127d #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2390000,RESOLUTION=1280x720,CODECS="mp4a.40.2,avc1.77.30",CLOSED-CAPTIONS=NONE https://videos-f.jwpsrv.com/content/conversions/LOPLPiDX/videos/8L4m9FJB-24721148.mp4.m3u8?token=0_5a7544f7_0x739b293c40a8681586ec50da6fec53e97e580627 #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=940000,RESOLUTION=720x406,CODECS="mp4a.40.2,avc1.77.30",CLOSED-CAPTIONS=NONE https://videos-f.jwpsrv.com/content/conversions/LOPLPiDX/videos/8L4m9FJB-24721147.mp4.m3u8?token=0_5a7544f7_0xcb1f410e687976e8433c41ff40042deb41ce0f89 #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=330000,RESOLUTION=320x180,CODECS="mp4a.40.2,avc1.77.30",CLOSED-CAPTIONS=NONE https://videos-f.jwpsrv.com/content/conversions/LOPLPiDX/videos/8L4m9FJB-24721145.mp4.m3u8?token=0_5a7544f7_0x54d260a02b61e1e778a59a99bf9cd739e2882f25 |
这样播放器会自动加载出m3u8视频的清晰度。如果还有更好的方法,欢迎在下面留言哦,大家一起努力一起学习。
网盘密码回复可见,谢谢支持啦
8.X系列注册key
另外小灰灰提供几个8.X版本的key.到期时间为:2021-12-31
有需要的可以使用(回复可见)
2018年2月7日 下午2:53 沙发
大萨达
2018年2月12日 下午12:16 板凳
问一下问题哦,这个问题琢磨我两天了,还是没解决,现在搜索到这里来问一下了,就是安卓谷歌浏览器上无法全屏是什么问题呢?电脑上可以全屏,但在手机浏览器上按全屏按钮无效。好像不是版本问题,现在用的是7版本,可能是我的模板问题吗这问题怎么解决呢
2018年2月28日 上午8:09 1层
@小李子 这个 我还没遇到, 我也不知道啥情况,亲,你解决了吗
2018年2月27日 下午8:28 地板
哈哈哈哈或或或或或或或或或或或或或或或或或或
2018年3月1日 上午10:38 4楼
支持一下
2018年3月7日 下午3:06 5楼
1看
2018年3月11日 下午3:43 6楼
谢谢分享
2018年3月14日 下午11:24 7楼
这个一直没用过,不知道好用不
2018年3月15日 上午9:29 8楼
牛逼!!!!!!!!!!!
2018年3月15日 下午11:52 9楼
怎么用
2018年3月22日 下午2:37 10楼
及时发货静安寺
2018年3月23日 下午1:47 11楼
提示
Error loading player:
No playable sources found
2018年3月23日 下午3:41 12楼
我来看看
2018年3月31日 上午10:56 13楼
好匍
2018年3月31日 下午7:49 14楼
大大
2018年4月1日 上午6:48 15楼
谢谢分享源码
2018年4月9日 下午12:36 16楼
哈哈哈哈
2018年4月13日 上午10:06 17楼
顶了!
2018年4月24日 上午12:00 18楼
谢谢分享
2018年5月16日 上午9:15 19楼
dddds是吧
2018年5月18日 下午12:32 20楼
啊
2018年5月23日 下午12:12 21楼
谢谢。!!
2018年5月24日 下午4:08 22楼
谢谢
2018年5月26日 下午4:48 23楼
试试看
2018年7月14日 上午1:31 24楼
问一下问题哦,这个问题琢磨我两天了,还是没解决,现在搜索到这里来问一下了,就是安卓谷歌浏览器上无法全屏是什么问题呢?电脑上可以全屏,但在手机浏览器上按全屏按钮无效。好像不是版本问题,现在用的是7版本,可能是我的模板问题吗这问题怎么解决呢a
2018年8月3日 上午8:45 25楼
坎坎坷坷扩
2018年8月8日 上午1:43 26楼
博主你的网站出现小警告了。Warning: A non-numeric value encountered in /www/wwwroot/xiaohuihui.net.cn/wp-content/themes/begin/inc/function/comment-template.php on line 20
2018年8月10日 上午12:03 27楼
网盘密码回复可见
2018年8月18日 下午6:01 28楼
好东西
2018年8月29日 上午4:00 29楼
啊飒飒
2018年8月29日 上午4:00 30楼
啊啊啊啊啊啊啊啊啊啊啊啊
2018年9月1日 下午8:30 31楼
谢谢分享1
2018年9月3日 下午5:04 32楼
太需要了
2018年9月13日 上午1:09 33楼
水水水水
2018年9月22日 下午4:35 34楼
看下先
2018年9月23日 上午3:02 35楼
2018年9月28日 下午1:44 36楼
毒贩夫妇付付付付付付付付付付付付付付付
2018年9月28日 下午5:59 37楼
2018年10月1日 下午1:08 38楼
这个做的不错,了解一下!非常感谢!
2018年10月4日 上午11:14 39楼
萨达萨达撒多
2018年10月5日 下午6:04 40楼
圩二厨柜地
2018年10月5日 下午6:06 41楼
到底能不能用呀呀
2018年10月8日 上午12:30 42楼
看看
2018年10月8日 上午12:30 43楼
看看,这个比较好
2018年10月8日 下午1:56 44楼
OK,very good!
试试!
2018年10月9日 下午10:40 45楼
测试下
2018年10月11日 下午4:01 46楼
ni very nb 啊
2018年10月17日 下午1:59 47楼
单位安慰
2018年10月18日 下午12:55 48楼
谢谢分享。测试一下。
2018年10月18日 下午6:22 49楼
试试
2018年10月29日 下午7:00 50楼
挺好的资源
2018年11月5日 下午3:13 51楼
不错,找好久了。
2018年11月6日 下午3:35 52楼
支持一下
2018年11月6日 下午4:18 53楼
支持一下
2018年11月10日 上午12:12 54楼
谢谢
2018年11月13日 下午2:01 55楼
Warning: A non-numeric value encountered in /www/wwwroot/xiaohuihui.net.cn/wp-content/themes/begin/inc/function/comment-template.php on line 22 老板已经报错了页面
2018年11月14日 下午12:36 56楼
demo key 是否过期了
2018年11月21日 下午7:13 57楼
支持一下
2018年11月28日 下午4:43 58楼
好的!
2018年12月26日 上午10:40 59楼
谢谢分享源码
2018年12月26日 上午10:43 60楼
谢谢分享
2019年1月5日 下午4:24 61楼
好文章,支持
2019年1月11日 下午3:29 62楼
jwplayer播放列表的逻辑有点反常
2019年1月16日 下午10:18 63楼
谢谢
2019年1月23日 下午6:18 64楼
小灰灰的博客很漂亮,一直想拥有自己的网站,但是开了头就没继续做下去,能添加好友聊聊吗
2019年1月23日 下午6:28 1层
@来自青岛的问候 这个可以有
2019年3月3日 上午7:59 65楼
無
2019年3月5日 下午5:54 66楼
支持
2019年3月7日 上午9:33 67楼
列表播放怎么使用呢?
2019年3月7日 上午9:37 68楼
下载这个版本看看
2019年3月7日 下午2:44 69楼
111你好
2019年3月13日 下午12:30 70楼
测试测试测试测试测试测试
2019年3月13日 下午9:35 71楼
goood解释的清楚实用。
2019年3月13日 下午9:39 72楼
看不见密码在哪里
2019年3月14日 上午8:29 1层
@john 么有看到密码么
2019年3月14日 上午9:55 73楼
111是
2019年3月28日 上午9:10 74楼
学习学习
2019年3月28日 下午3:44 75楼
不错,试试能不能用先
2019年4月1日 上午11:52 76楼
66666不错
2019年4月15日 上午1:04 77楼
支持一下谢谢分享
2019年4月21日 上午1:01 1层
@QQ游客 唉!妹子,寂寞怎么弄啊
2019年4月21日 上午12:59 78楼
唉!妹子,寂寞
2019年4月23日 上午10:58 79楼
我想现在运行它
2019年7月6日 下午5:32 80楼
谢谢分享,支持论坛
2019年7月30日 上午11:44 81楼
牛人啊啊啊啊啊啊啊啊啊啊
2019年7月30日 下午5:02 1层
@QQ游客 表示 是小白
2019年7月30日 下午5:06 1层
@QQ游客 小灰灰,请教一下,我在用jwplayer 7 直播rtmp/flv视频,能给提供一份demo代码吗?
2019年7月30日 下午9:27 82楼
good job全球独立服务器
2019年7月30日 下午9:27 83楼
全球独立服务器
2019年7月30日 下午9:28 84楼
全球 服务器
2019年8月15日 下午8:57 85楼
额额
2019年8月19日 下午11:20 86楼
恩恩额嗯嗯二二二二二二二v
2019年8月19日 下午11:20 87楼
顶顶顶顶
2019年8月31日 下午9:39 88楼
QQ游客
2019年9月7日 上午12:15 89楼
问一下问题哦,这个问题琢磨我两天了,还是没解决,现在搜索到这里来问一下了,就是安卓谷歌浏览器上无法全屏是什么问题呢?电脑上可以全屏,但在手机浏览器上按全屏按钮无效。好像不是版本问题,现在用的是7版本,可能是我的模板问题吗这问题怎么解决呢
2019年9月26日 上午2:07 90楼
哈
2019年9月26日 上午2:08 91楼
哈推荐
2019年10月1日 下午4:05 92楼
好像好的好的
2019年10月7日 下午3:39 93楼
试下看看
2019年10月14日 下午3:09 94楼
密码
2019年10月28日 下午3:33 95楼
正需要
2019年10月29日 下午2:27 96楼
谢谢啦
2019年10月31日 下午10:02 97楼
看看key,谢谢
2019年11月8日 下午1:13 98楼
感谢分享
2019年11月8日 下午2:48 99楼
看看
2019年12月2日 下午1:59 100楼
来看密码的
2019年12月2日 下午2:00 101楼
来看密码的!!!!!
2019年12月6日 下午3:56 102楼
as评论必须含中文!
2019年12月6日 下午3:57 103楼
asdf发表评论已解锁!有回复时邮件通知我
2019年12月8日 上午1:18 104楼
谢谢分享。测试一下。
2019年12月10日 下午9:56 105楼
您输入的好像不是QQ号码
2019年12月10日 下午9:56 106楼
酷酷酷
2019年12月15日 下午12:37 107楼
正在找,谢谢了
2019年12月15日 下午12:38 108楼
真好的
2019年12月29日 下午10:44 109楼
看看看看
2019年12月29日 下午10:49 1层
@QQ游客 怎么看不到提取码
2019年12月31日 下午2:47 110楼
三大法宝封神榜方式
2020年1月6日 下午2:23 111楼
酷酷酷酷酷酷酷酷
2020年1月6日 下午2:24 112楼
看看,谢谢分享
2020年1月10日 上午9:12 113楼
不知道好用不
2020年1月20日 下午10:06 114楼
非常不错
2020年1月23日 上午12:02 115楼
看看学习学习
2020年2月2日 下午3:54 116楼
回复可见
2020年2月2日 下午3:56 117楼
谢谢分享
2020年2月12日 下午12:40 118楼
谢谢提供资源
2020年2月20日 下午9:18 119楼
支持一下
2020年2月23日 下午11:23 120楼
谢谢博主!
2020年2月26日 下午2:46 121楼
谢谢分享!!!
2020年3月1日 上午11:21 122楼
不错的资源,谢谢分享
2020年3月12日 上午1:21 123楼
谢谢 这个是什么版本呢?
2020年3月16日 下午10:01 124楼
看看,谢谢
2020年3月19日 上午12:50 125楼
这么好的资源,后悔自己来晚了!
2020年3月19日 上午12:58 126楼
楼主,请赐给我金币。
2020年3月20日 下午3:47 127楼
学习学习
2020年3月29日 下午1:49 128楼
我要提取码
2020年3月29日 下午4:01 129楼
感谢分享
2020年4月14日 下午5:00 130楼
我来看看下哦
2020年4月17日 下午3:16 131楼
哈哈,,回得利 可
2020年4月24日 下午5:16 132楼
支持一下
2020年5月10日 下午10:15 133楼
谢谢
2020年5月15日 上午11:10 134楼
试试
2020年5月20日 下午9:54 135楼
随时达到ad
2020年5月25日 下午3:23 136楼
谢谢了啊!
2020年5月25日 下午3:24 137楼
破解版jwplayer播放器
2020年6月2日 上午9:43 138楼
不错
2020年6月12日 下午11:27 139楼
支持一个,点赞
2020年6月17日 下午1:18 140楼
下载测试一下
2020年8月12日 下午10:35 141楼
哈哈哈哈哈哈哈哈哈
2020年8月17日 下午4:17 142楼
获取插件
2020年8月19日 上午9:36 143楼
回复可见
2020年9月6日 下午4:50 144楼
膜拜
2020年9月18日 上午1:42 145楼
看了,不错需要这样的样例
2020年9月18日 上午1:43 146楼
下载来看看能不能用。
2020年9月25日 上午11:47 147楼
多谢分享,不错的播放器!
2020年10月4日 下午6:46 148楼
支持小灰灰
2020年10月11日 下午6:49 149楼
很需要
2020年11月16日 下午10:35 150楼
謝謝分享
2020年11月23日 上午9:00 151楼
学习了
2020年11月25日 下午2:40 152楼
厉害啦
2020年11月30日 下午1:12 153楼
谢谢
2020年12月11日 上午11:23 154楼
666,试试看
2020年12月13日 下午9:04 155楼
试试看看
2021年1月16日 上午9:25 156楼
跪求网盘密码
2021年1月26日 下午3:53 157楼
学习
2021年1月30日 下午1:09 158楼
牛X的很
2021年3月15日 下午3:49 159楼
感谢分享!
2021年3月27日 上午8:52 160楼
jwplayer能引用入文件作为播放列表,很优秀!
2021年4月25日 下午9:30 161楼
1233亲
2021年5月4日 上午7:10 162楼
是的是的 好东西
2021年5月4日 上午7:12 163楼
哈哈哈哈或或或或或或或或或或或或或或或或或或
@
2021年5月4日 上午7:12 164楼
哈哈哈哈或或或或或或或或或或或或或或或或或或
不不不都是
@
2021年5月4日 上午7:29 165楼
还是没解决,现在搜索到这里来问一下了,就是安卓谷歌浏览器上无法全屏是什么问题呢?电脑上可以全屏,但在手机浏览器上按全屏按钮无效。
2021年5月30日 下午4:04 166楼
谢了
2021年6月7日 上午2:00 167楼
感谢分享!
2021年9月17日 下午6:04 168楼
好
2022年5月23日 下午4:44 169楼
学习下
2022年7月21日 上午11:13 170楼
看看视频播放器效果
2022年9月29日 下午1:51 171楼
1111
验证码
2022年11月12日 下午6:51 172楼
组长
2022年11月14日 上午11:53 173楼
xihuan喜欢
2023年3月1日 下午7:49 174楼
感谢分享
2023年3月8日 下午5:28 175楼
123df发