一.JW Player 简介
JW Media Player是一个开源的在网页上使用的Flash视频、音频以及图片播放器,支持 Sliverlight 播放,可以通过一个XML文件使播放器自动切换显示一组图片,并播放背景音乐。
它支持播放的Adobe Flash Player和HTML5浏览器可以处理任何格式(FLV文件,H.264标准,MP4功能,VP8的,WEBM,支持MP3,AAC,JPG,PNG和GIF)。它也支持各种流和播放清单格式(包括RTMP协议,HTTP直播和更多)和多种播放选项。并支持所有主要的CDN和自适应比特率切换意味着你可以在全球各地提供高质量的内容。
JW Player是一个先进的视频平台,您可以进行自定义和扩展:
· 无需特殊工具,你可以编辑文本创建图像,然后你可以建立一个皮肤。
· 它的插件架构 和 JavaScript API让您可以轻松地扩展它的功能,融入您的网站,或连接到第三方服务。
· 创建媒体提供商的能力意味着您可以连接到自己的专有CDN或内容服务器。
JWPlayer是开源的,但是根据功能的不同,有一些是收费的。它的官方网站是https://www.jwplayer.com/。
下面是它的价格表:
github下载:https://github.com/jwplayer/jwplayer
百度网盘7.10.4下载:https://pan.baidu.com/s/18ZFYuhQYYvaM0U3qiHTNoQ 提取码:zx5p
(JW Player 7.10.1需要Flash 18或更高版本,而且较老的版本只需要11.2或更高。)
使用免费版,默认右上角会有logo:
二、安装
将JW Player嵌入到网页中非常的简单,只需要进行如下3个步骤:
1、解压下载的安装包文件,将jwplayer.js和player.swf文件拷贝到工程中;
2、在页面引入jwplayer.js文件:
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
3、将下面代码粘贴在body标签内,如下所示:
<div id="container">Loading the player ...</div>
<script type="text/javascript"> jwplayer("container").setup({ flashplayer: "/jwplayer/player.swf", file: "/uploads/video.mp4", height: 270, width: 480 }); </script>
上面代码的含义不言自明,上面script中的flashplayer只不过是JWPlayer众多配置中的一个,上面例子使用了div标签,下面给出使用video标签:
在这种情况下,JW Player使用video标签及其属性加载配置选项。
<video src="/videos/video.mp4" height="270" id="container" poster="/thumbs/image.jpg" width="480"> </video>
<script type="text/javascript"> jwplayer("container").setup({ flashplayer: "/jwplayer/player.swf" }); </script>
快速嵌入:
将jwplayer.js和player.swf拷贝到jwplayer文件夹,你可以通过下面两行简单的代码将JW Player嵌入到HTML网页中,代码如下:
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
<video class="jwplayer" src="/uploads/video.mp4"poster="/uploads/image.jpg"></video>
页面中class属性值为jwplayer的所有video标签将更换为JW Player。
完整示例:
<script type="text/javascript" src="jwplayer.js"></script> <script>jwplayer.key="4sNBpozdkb2Gv+IYeWyd+CID9tW2NXdJE5GeSg==";//修改为自己的key</script> <div id="player"> Loading... </div>
<script type="text/javascript"> jwplayer("player").setup({ "file": "jwplayer-30s.mp4",//视频文件路径 "aspectratio": "16:9",//播放器自适应比例 "height": "360",//播放器高度 "type":"mp4",//播放文件类型(可选) "title": "测试标题",//标题(可选) "description": "测试视频描述",//描述(可选) "image": "http://ww4.sinaimg.cn/large/b6839357jw1e3val80tknj20dw099jsb.jpg",//视频封面(可选) "repeat":"true",//重复播放(留空则不重复播放) "autostart":"true",//自动播放(留空则不启用自动播放) }); </script>
效果:
三、JWPlayer语法
语法基本结构:
jwplayer(container).setup({options});
“container”是加载JW Player的DOM元素,例如video、div、p等等,如果是video标签,标签的属性(比如width和src))将被加载到JW Player中;“options”是JW Player配置选项列表,配置选项的指南包含完整的概述,比如下面的例子:
<div id="container">Loadingthe player ...</div>
<script type="text/javascript"> jwplayer("container").setup({ autostart: true, controlbar: "none", file: "/videos/video.mp4", duration: 57, flashplayer: "/jwplayer/player.swf", volume: 80, width: 720 }); </script>
“options”的选项并不仅限于此,它还有如下选项:
skin:设置JW Player皮肤;
playlist: 设置JW Player播放列表;
levels:通过设置比特率来设定不同视频的播放质量等级;
plugins:设置JW Player插件,包括它们的配置选项;
events: 给JW Player添加事件,营造执行js脚本的环境;
modes:指定为了渲染播放器JW Player 所使用的不同浏览器技术的顺序;
接下来详细介绍这些选项:
1.skin
JW Player有各种各样的可用来修改播放器外观和感觉的皮肤。为了嵌入JWPlayer 5的皮肤,只需将压缩文件拷贝到Web服务器上并使用skin选项指定皮肤压缩文件路径即可,代码如下:
<div id="container">Loadingthe player ...</div> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "/jwplayer/player.swf", file: "/uploads/video.mp4", height: 270, width: 480, skin: "/skins/modieus/modieus.zip" }); </script>
注意:如果您正在配置主要在HTML5 mode中运行的JW Player,你的皮肤的文件夹结构看起来应该像这样:
/skins/modieus/modieus.zip
/skins/modieus/modieus.xml
/skins/modieus/controlbar/
/skins/modieus/playlist/
......
更多皮肤下载:http://developer.longtailvideo.com/trac/browser/skins?rev=1035&order=name
2.playlist
该选项用于设置JW Player播放列表;例子如下:
<div id="container">Loadingthe player...</div> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "/jwplayer/player.swf", playlist: [ { duration: 32, file: "/uploads/video.mp4", image:"/uploads/video.jpg"}, { duration: 124, file: "/uploads/bbb.mp4", image:"/uploads/bbb.jpg" }, { duration: 542, file: "/uploads/ed.mp4", image:"/uploads/ed.jpg" } ], "playlist.position": "right", "playlist.size": 360, height: 270, width: 720 }); </script>
一个播放列表可以包含一个或多个视频文件,每一个文件都支持如下属性:
file:如果没有设置levels选项,则该项为必选项)。该项用来指定媒体的位置。如果未设置此属性,playlist项将被忽略;
image:用来设置视频海报图片,是播放列表的一部分,该图片显示在视频播放前和视频播放完成后;
duration:视频的持续时间,单位为秒。该播放器用该选项将视频持续时间显示在控制栏和图片列表中;
start:视频播放时间点。当用户播放该视频文件时,视频将不会从头播放,而是从该选项设定的播放时间点开始播放;
title:视频标题,显示在图形播放列表中;
description:视频描述信息,显示在图形播放列表中;
streamer:设定视频流应用。仅用于RTMP或HTTP流;
provider:设置用于回放播放列表视频的特定媒体回放API(如HTTP,RTMP或YouTube);
levels:设定视频播放的质量等级。
3.Levels
levels配置项允许将一个视频的多个质量等级加载到播放器中。Flash播放器使用这些设定的质量等级实现RTMP或HTTP码率切换。比特率转换是一种播放器为每一位视频观看者自动显示最佳视频质量的机制。
下面展示使用RTMP码率切换(又称动态流)的一个例子。注意这里使用了“streamer”配置项,该配置项用来告诉播放器RTMP服务器的位置:
<div id="container">Loadingthe player...</div> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "/jwplayer/player.swf", height: 270, width: 480, image: "/thumbs/video.jpg", levels: [ { bitrate: 300, file: "videos/video_300k.mp4", width: 320 }, { bitrate: 600, file: "videos/video_600k.mp4", width: 480 }, { bitrate: 900, file: "videos/video_900k.mp4", width: 720 } ], provider: "rtmp", streamer: "rtmp://rtmp.example.com/application/" }); </script>
下面这个例子使用了HTTP码率切换。通过为http设定“provider”配置项来启用HTTP码率切换:
<div id="container">Loadingthe player...</div> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "/jwplayer/player.swf", height: 270, width: 480, image: "/thumbs/video.jpg", levels: [ { bitrate: 300, file: "http://example.com/videos/video_300k.mp4",width: 320 }, { bitrate: 600, file: "http://example.com/videos/video_600k.mp4",width: 480 }, { bitrate: 900, file: "http://example.com/videos/video_900k.mp4",width: 720 } ], provider: "http","http.startparam":"starttime" }); </script>
在HTML5模式中使用levels选项
在HTML5模式中为了兼容各种浏览器,也可以使用levels选项指定交替的视频格式。如果浏览器不支持levels选项中第一个视频文件,那么播放器将使用第二个,以此类推。如下代码:
<div id="container">Loadingthe player...</div> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "/jwplayer/player.swf", height: 270, width: 480, image: "/thumbs/video.jpg", levels: [ { file: "/videos/video.mp4" }, // H.264 version { file: "/videos/video.webm" }, // WebM version { file: "/videos/video.ogv" } // Ogg Theroa version ] }); </script>
4.Plugins
插件被用于JWPlayer顶部的堆栈。很多插件在我们的库中是可用的,例如转发,分析或广告。下面给出一个使用了HD 插件和GoogleAnalytics Pro插件的例子:
<div id="container">Loadingthe player...</div> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "/jwplayer/player.swf", file: "/videos/video.mp4", height: 270, plugins: { hd: { file: "/videos/video_high.mp4", fullscreen: true }, gapro: { accountid: "UKsi93X940-24" } }, image: "/thumbs/video.jpg", width: 480 }); </script>
下面再给出一个使用了sharing插件的例子,在该例子中插件的参数被包括在了playlist块内:
<div id="container">Loadingthe player...</div> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "/jwplayer/player.swf", playlist: [ { file: "/videos/bunny.mp4", "sharing.link":"http://bigbuckbunny.org"}, { file: "/videos/ed.mp4", "sharing.link":"http://orange.blender.org" } ], plugins: { sharing: { link: true } }, height: 270, width: 720 }); </script>
5.Events
events块允许你向播放器事件上添加JavaScript脚本。这是一个增强网页交互性的强大方法。下面给出一个简答的例子:
<div id="container">Loadingthe player ...</div> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "/jwplayer/player.swf", file: "/videos/video.mp4", height: 270, width: 480, events: { onComplete: function() { alert("the video is finished!"); } } }); </script>
下面再给出一个含有两个事件处理的例子。注意:onReady()方法使用this声明自动启动播放器,onVolume()方法处理正在处理的事件:
<div id="container">Loadingthe player ...</div> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "/jwplayer/player.swf", file: "/videos/video.mp4", height: 270, width: 480, events: { onReady: function() { this.play(); }, onVolume: function(event) { alert("the new volume is"+event.volume); } } }); </script>
要查看所有事件及其属性,请参考API,其网址为:http://www.longtailvideo.com/support/jw-player/28850/using-the-javascript-api ,
也可参考API文件夹中的word文档。
6.Modes
modes配置项被用来指定渲染播放器JW Player所使用不同浏览器技术的顺序,JW Player使用的默认顺序为:
1、Flash 插件;
2、HTML5中的video标签;
3、一个源文件的下载链接。
下面给出一段代码,让html5播放器放在最前面;
<div id="container">Loadingthe player ...</div> <script type="text/javascript"> jwplayer("container").setup({ file: "/videos/video.mp4", height: 270, width: 480, modes: [ { type: "html5" }, { type: "flash", src: "/jwplayer/player.swf" }, { type: "download" } ] }); </script>
modes的具体配置(5.5版本)
可以为每个模式指定可替换的播放器配置,如果播放器嵌入在一个特定的模式中,那么它将覆盖默认的配置。
<div id="container">Loading the player ...</div> <script type="text/javascript"> jwplayer("container").setup({ height: 270, width: 480, image: "http://server.com/images/thumbnail.jpg", modes: [ { type: "flash",src: "/jwplayer/player.swf",config: { file: "video.mp4", streamer: "rtmp://rtmp.server.com/videos", provider: "rtmp" } }, { type: "html5",config: { file: "http://server.com/videos/video.mp4" } }, { type: "download" } ] }); </script>
Player Removal
使用如下代码可以去除播放器
jwplayer("container").remove();
remove方法将使播放器停止播放,DOM重新设置为原来的状态,所有的事件侦听器被清除
使用官方版本主要存在两个问题,第一是有水印,第二是它的js会去请求另外俩个js文件,因为GFW的关系,有时候它的尝试加载会影响视频的播放。
1. 水印问题
根据chrome控制台上的网络请求记录,可以找到这个logo是请求了这个资源(略长,我也都粘在这儿了):
data:image/png;base64,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
对于这个URL,我只能说是叹为观止。这个请求过程是在jwplayer.html5.js里面触发,在这个js文件里可以找到这个URL,我在它请求的其他图片里面,找了一个透明的图片,替换到这里,就可以了,也就是说我并没有尝试去删这个图,而是换了一张透明的:
改为
a.defaults.file="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAgCAYAAAA1zNleAAAAD0lEQVQoU2NgGAWjADcAAAIgAAEeEYatAAAAAElFTkSuQmCC"
2. 对p.jwpcdn.com的网络请求
JWPlayer在jwplayer.js中会请求http://p.jwpcdn.com/6/12/jwpsrv.js ,在jwpsrv.js中会请求http://p.jwpcdn.com/6/jwpsrv_frq.js,而这个jwpcdn有时候是不能访问的,但是浏览器会一直尝试访问,在某一次能访问的时候,我先把这两个文件下载到本地(其实不下载也可以,这两个文件好像主要是统计分析,把p.jwpcdn.com换成一个能够访问的地址就可以,这样能够迅速得到404回应,不会一直在等),首先在jwplayer.js中修改,在这个文件中搜索p.jwpcdn.com,可以找到:
b.repo=function(){var a="http://p.jwpcdn.com/"+f.version.split(/\W/).splice(0,2).join("/")+"/";
针对6.12版,就会得到http://p.jwpcdn.com/6/12/ 这个路径,所以我把它改为jwplayer.js同路径下的jwpsrv.js:
修改为:
b.repo=function(){
var js=document.scripts;var a="./";for(var i=js.length-1;i>=0;i--){if(js[i].src.indexOf("jwplayer.js")>-1){a=js[i].src.substring(0,js[i].src.lastIndexOf("/")+1);}};
根据这段代码也能看出来,这要求当前的js文件必须叫做jwplayer.js,不能改名。
同样的方法在jwpsrv.js中搜索p.jwpcdn.com,可以找到:
H="http"+("https:"===document.location.protocol?"s://ssl.":"://")+"p.jwpcdn.com/6/jwpsrv_frq.js"
同样的方法,在这些变量定义的最前面加上这段代码,以防变量名冲突,我把a改成了path:
var js=document.scripts;var path="./";for(var i=js.length-1;i>=0;i--){if(js[i].src.indexOf("jwplayer.js")>-1){path=js[i].src.substring(0,js[i].src.lastIndexOf("/")+1);}};
之后把H变量的定义修改为:
H=path+"/jwpsrv_frq.js"
修改之后的jwplayer源码下载。
JWPlayer的API
http://support.jwplayer.com/customer/portal/topics/564475-javascript-api/articles ,这里有一系列文档和Demo,下面是详细的API列表:
http://support.jwplayer.com/customer/portal/articles/1413089-javascript-api-reference 。
举几个例子便于理解调用方式:
var player = jwplayer('container').setup();
获取视频的时长:
player.getDuration();
获取视频状态:
player.getState();
定位到第几秒:
player.seek(second);
视频播放:
player.play(true);
视频暂停:
player.play(false);
视频停止:
player.stop();
为视频添加时间,当时间变化时回调:
player.onTime(function(e){......});
这里有一个未解决的问题,事件添加后我没有找到清除的方法,如果重新设置一个空的onTime,也只是叠加,不替换原有的,不知道后续版本会不会修复。
js版jwplayer方法记载
jwplayer().getPosition();//播放了多少秒
jwplayer('playerdiv').play(); ||
jwplayer(0).play(true/false); //是否播放 0为索引
jwplayer(0). pause (true/false); //是否暂停
jwplayer(0). stop(); //停止无参
jwplayer().getBuffer(); //加载了百分之几
jwplayer().getFullscreen();setFullscreen(state);//是否全屏
jwplayer().getMute();setMute(state)//是否静音
jwplayer().getPlaylist()[0]['file'] ||
jwplayer().getPlaylistItem(0)['file']//获取播放列表中索引为0项的file值
jwplayer().getWidth() jwplayer().getHeight() //宽高
jwplayer().getState()//state值:1.playing播放中 2.paused停止 3.idle空闲 4. completed结束
jwplayer().getDuration() //视频播放结束需要的时间
jwplayer().getVolume()//声音大小
//加载播放列表
var playlist = new Array(
{file:"video/123.mp4", image:"images/videoimg1.jpg"},
{file:"video/234.flv", image:"images/videoimg1.jpg"});
jwplayer(0).load(playlist);
jwplayer(0).playlistItem(1); //播放下标为1的视频
jwplayer(0).playlistNext();//播放下一个视频
jwplayer(0).playlistPrev();//播放上一个视频
jwplayer(0).resize(width, height); //宽高
//从第(10-缓冲秒数)秒开始,缓冲(bufferlength)默认为3秒
jwplayer(0).seek(10);
events:{
onComplete: function(){ alert("播放结束!!!");},
onVolume: function(){ alert("声音大小改变!!!"); },
onReady: function(){ alert("准备就绪!!!"); },
onPlay: function(){ alert("开始播放!!!");},
onPause: function(){ alert("暂停!!!");} --1
}
Jwplayer(0).onPause: function(){ alert("暂停!!!");} //与1等同,先执行1
//回调函数
jwplayer(0).onBufferChange( function(){ alert("缓冲改变!!!"); } );
jwplayer(0).onBufferFull(function(){ alert("视频缓冲完成!!!");});
jwplayer(0).onError(function(obj){alert("播放器出错!!!"+obj.message);})
jwplayer(0).onFullscreen(function(obj){
if(obj.fullscreen){alert("全屏");}
else{alert("非全屏");}
});
onMute(callback) // obj. mute是否静音
onPlaylist(function(obj){ //视频列表载入完成
alert(obj.playlist[0]['file']);
});
onPlaylistItem(callback) // 开始播放一个视频时触发obj. index为视频索引
onReady(callback) //准备就绪
onResize(callback) //obj.width obj.height 宽高
//进入播放时触发obj.oldstate 值:从BUFFERING PAUSE状态进入播放状态
onPlay(callback)
//进入暂停obj.oldstate 值1:从PLAYING BUFFERING状态进入暂停
onPause(callback)
onBuffer(callback) //进入加载obj.oldstate 值PLAYING, PAUSED or IDLE
onIdle(callback) //进入空闲obj.oldstate 值PLAYING, PAUSED or BUFFERING.
onComplete(callback) //结束播放
onVolume(callback) //obj.volume
原文地址:https://blog.csdn.net/gaohuanjie/article/details/24957223
转载请注明: ITTXX.CN--分享互联网 » JWPlayer网页播放器使用说明
最后更新:2018-11-30 13:38:14