JW Player使用简介
admin
- 2 minutes read - 330 words一、JW Player是什么？
简单地说，JW Player是一种基于flash的交互式网页媒体播放器。它是由Jeroen 和 Wijering共同建立的LongTail Video所开发，问世于2005年，当时仍名不经传的YouTube首次采用的播放器就是JW Player。官方网址： http://www.longtailvideo.com/。
JW Player含：FLV Player、WMV Player、Image Rotator和Desktop Player四种，除了最后一种实为桌面播放器，其他三种都是网页播放器。本篇内容仅限FLV Player。
二、JW FLV Media Player简介
JW FLV Media Player可播放Adobe Flash Player所支持的媒体，具体包括：FLV、MP4、MP3、AAC、JPG、PNG和GIF等，还支持RTMP、HTTP、实时视频流、各种播放清单 格式、灵活的设置和广泛的javascript API。此外它还提供多种外观、功能性插件来扩展播放器，以便我们可以分享、推荐、搜索、分析甚至广告投放。
目前 （2009-10-20）最新的版本是4.6版。
三、 安装
JW Player可安装在网络空间，我从未如此运用过，而是上传到我的网盘，因此本篇的介绍也是基于此种情况，而列为看官当然懂得如何触类旁通。另外，我们一 定要选择可以直链的网盘上传（本篇的示例网盘是MyOtherDrive），何谓“直链”，即外链地址以完整的文件名为结尾（含.后缀名），如 http://www.xxx.com/xxx.mp3。
1、首先到官网下载 源文件，下载地址： http://www.longtailvideo.com/players/jw-flv-player/。
下载来的文件是 zip压缩包，解压之后可以看到内含以下文件：
2、将 player.swf和swfobject.js这两个文件上传到网盘（建议在网盘上为它们单独建立一个文件夹，本篇示例文件夹JW Player），安装即告完毕，就这么简单！
四、 使用设置向导
官网特别提供一个设置页面 http://www.longtailvideo.com/support/jw-player-setup-wizard， 可以在网页上提交、设置播放器参数，生成嵌入代码，把生成的代码稍作修正后粘贴到博客或空间即可。
设置向导提供两种代码：默认 的Swfobject 1.5 Code（即JavaScripting）和Embed Code。我没有机会运用 Swfobject 1.5 Code，因此本篇只介绍Embed Code。
前面我提到过生成的代码要稍 作修正：为了方便在网页小窗口浏览生成的代码，官网给出的代码是按各项参数分行了的，如果复制后就直接粘贴，可能会使播放器不能正常工作，我建议先把代码 复制到“记事本”后，删除段落标记，注意每项参数之间还要保留一个空格位，再复制到空间或博客。
Embed 代码的格式一般是这样：参数1=”参数值” 参数2=”参数值” ……参数n=”参数值”>。
关于Embed Code各项参数的详细介绍，请参阅Adobe官网： http://kb2.adobe.com/cps/127/tn_12701.html。 这个话题不小，值得另开一篇介绍文章。
1、设置向导概览
（点击打开大图）
JW Player设置非常灵活，代价就是参数非常多，搞清楚参数的意义很重要，官网也提供相关资料供我们查阅： http://developer.longtailvideo.com/trac。
特别注意：如果你的网址参数值带 有“?”、“=”和“&”这三个字符，必须先转换再填写，如下：
“?”转换为“%3F”
“=”转换为“%3D”
“&”转换为“%26”
例如：原网址为：getplaylist.php?id=123&type=flv，转换后为：getplaylist.php%3Fid%3D123%26type%3Dflv。
2、选择模板
官网为我们提供了多 达21种模板，每选择一种模板，下面的参数值和播放器预览将自动更新。虽然大部分模板今后我们恐怕几乎用不上，我还是建议新手一定要把每一种模板都点击一 下，再好好体会下面的参数值，这既有助于我们领会众多参数所代表的含义，还可以在播放器预览直接看到参数所体现的效果。
模板其实就是一件半成品，熟 悉模板还可以让我们快速而准确地挑选最接近成品的模板，善用模板将大大提高效率。
需要多费口舌的是带播放清单模板“flvplayer with an rss playlist”，这个留待后面谈flie参数时再详细介绍。
3、嵌入参数
嵌入参数有三个内容：
*swf来源：填写我们之前上传到网盘player.swf的直链地址
*播放器高度：填写pix（像素）值或浏览窗口百分比
*播放器宽度：填写pix（像素）值或浏览窗口百分比
如果高度和宽度填写 的是百分比，那么播放器的大小是弹性的，它将随浏览器窗口和所在网页留给播放器窗口的大小而变化。
4、媒体文件属性参 数
*媒体作者：填写媒体作者名字
*媒体描述：媒体的文字描述
*字幕：XML字幕文件的链接地址（XML字幕文件也是一个大话题，将另文介绍）
*持续时间：媒体播放的持续时间（秒）
*媒体文件：媒体文件或XML播放清单的链接地址
关于JW Player可支持的媒体格式详情，请参阅：http://developer.longtailvideo.com/trac/wiki/FlashFormats。 大致分类：单文件媒体（视频：FLV、MP4和AAC音频；音频；MP3；图像：JPG、GIF和PNG），YouTube视 频，Livestream.com视频，HTTP流媒体，RTMP流媒体，XML播放清单。
我们要面对的模板其实可以归 于两大类：一是播放单文件媒体；二是播放多文件媒体。单文件媒体好办，直接在参数file告诉播放器媒体文件的所在地址既可。如果要播放多文件媒体，那就 要把所有媒体文件按顺序组织起来，并保存为XML文件（可以用“记事本”打开和编辑） ，这就是XML播放清单，而file参数就填上这个XML文件的链接地址。JW Player支持的播放清单格式有：XSPF、RSS（itunes、media）、ASX、ATOM。
关于XML播放清单见我的另 一篇介绍文章 《JW Player之XML播放清单简介》。
请注意，JW Player是以文件后缀名来判断媒体类别，如果播放器没有找到合适的后缀名，它将假定载入的是播放清单。
*预览图像：预览图片的链接地址
何谓“预览图像”？当播放器 停止播放时，它显示的图像。
外部链接地址：当填 写此项参数值后，播放器的控制面板将多出一个链接按钮，点击可以打开外部链接网页。请看截图：
*开始时间：定位从第几秒开始播发，仅对HTTP / RTMP流媒体有效。
*媒体标题：如果你将播放器设置成带播放清单（Playlist），媒体标题将出现在播放清单。
*媒体类别：一般来说JW Player可以根据媒体文件后缀名自动判断媒体类别，如果没有后缀名，或者媒体来自流媒体服务器，你可以手动设置媒体类别。可选择的参数如下：
video： FLV / MP4视频,也适用于 AAC 音频
sound： MP3
image： JPG/GIF/PNG 图像
youtube： 来自YouTube的视频
http： 来自HTTP服务器的FLV/MP4 流媒体
rtmp： 来自RTMP服务器的FLV/MP4/MP3流媒体
5、播放器颜色参数
backcolor：控制面板和播放清单的背景颜色（默认为白色）
frontcolor：控制面板和播放清单所有图标和文字颜色
lightcolor：鼠标悬停于播放清单时，图标和文字显示颜色
screencolor：播放屏幕的背景颜色
以上颜色参数应填写16进制网页颜色值，关于16进制网页颜色，请参阅：
http://en.wikipedia.org/wiki/Web_colours。
6、播放器布局参数
*controlbar：控制面板放置位置：底部bottomd（默认）、覆 盖over、无none。如果选择覆盖，只有鼠标悬停于播放屏幕，或者停止播放时，才会出现控制面板，此时控制面板出现于播放屏幕的底部。
*logo：填写logo图片（JPG/PNG/GIF）的直链地址。当采用默认皮肤时，Logo图像会显示于屏幕的右上角。
*playlist：播放清单放置位置：无none（默认）、底部bottom、覆盖over、右边right、左边left、顶部top。
*playlistsize：填写播放清单显示尺寸，默认180pix。当播放清单置于底部或顶部时，该值代表高度；当播放清单置于左边或右边时，该值代 表宽度；当播放清单置于覆盖时，播放清单将在停止播放时才出现，并覆盖全部播放屏幕，且不受该值影响。
*dock：默认不显示dock。这个我确实不知道如何翻译，用过苹果操作系统的朋友应该知道那是什么。JW Player 4.5版以后支持dock。dock实际上就是某些插件（plugins）以图标的形式显示于屏幕的右侧，从上往下排列，具体哪些插件（例如：语音解说 audiodescription，字幕caption等插件）支持dock，我尚不清楚。请看截图吧：
*skin：填写皮肤swf文件的直链地址。JW Player的皮肤插件也是swf文件，官网提供不少现成的皮肤插件，详见： http://www.longtailvideo.com/addons/skins。 在你运用皮肤插件之前，要先将你需要的皮肤插件下载到本地再上传到网盘。用户还可以自己设计自己的皮肤插件，参见： http://developer.longtailvideo.com/trac/wiki/FlashSkinning 和 http://developer.longtailvideo.com/trac/wiki/SkinningThePlayer。
请你们特别注意，不同的皮肤，其播放清 单显示的具体内容会有所增减。
7、播放器行为参数
*autostart：自动播放，默认无false。
*bufferlength：缓冲时长（秒），默认1秒。设置开始播放前预先缓冲的时长，设置时长短可以及时播放，设置时长长则可以减少中断。
*displayclick：点击动作，默认为播放play。设置点击屏幕时播放器的行为：播放（默认）play，链接link，切换到全屏 fullscreen，无任何行为none，静音mute，下一个曲目next。当选择“无任何行为none”时，鼠标点击手势不会出现于屏幕。
*icons：缓冲图标，默认显示true。
*item：开始播放曲目，默认为0。注意：JW Player认为播放清单第一个曲目的顺序号为“0”。
*mute：以静音开始，默认无false。该选择将会保存在浏览器的cookie。
*quality：回放品质，默认高品质true。
*repeat：重复方式，默认无none。list：播放清单的所有曲目都完整播放一遍。always：重复循环播放。
*shuffle：乱序播放，默认无false。设置是否按播放清单的顺序播放，或者乱序播放。
*stretching：图片延展方式。none：不延展；exactfit：不锁定高宽比填满屏幕；fill：锁定高宽比填满屏幕；默认 uniform：锁定高宽比，以黑色填充空白部分。
*volume：音量值，默认90。参数可以填写0-100之间的整数值，并 将存放在浏览器的cookie。
8、外部通讯参数
*linktarget：链接目标。当我们在“媒体文件属性 — 外部链接地址”参数里填写了外部链接地址之后，这个参数就用于设置外部链接打开的方式：默认“_blank”，即在新窗口打开链接，或者“_self”， 即在原窗口打开链接。
*plugins：插件，插件是 播放器的扩展，使播放器具有更多的外观和功能，官方提供的插件详见： http://www.longtailvideo.com/AddOns/。 官方把所有插件分为三类：皮肤skin、插件plugins和组件modules。皮肤插件我之前已有介绍，它们实际上是swf文件，使用前要先上传到网 络空间或网盘，运用皮肤插件也不在此设置，而是在皮肤“skin”参数中设置。组件modules本篇亦不打算涉及。那么以我的理解，在此的 plugins应该是功能性的插件。
需要注意的是某些plugins是需要付费购买的，比如广告plugins “Adtonomy Text Ads (Run Your Own Ads)”：
如果是免费 plugins，一般会给出参数值，直接填写就可以加载了。以字幕plugins “captions”为例：
要加载多个 plugins，请在参数值之间用英文的逗号“,”隔开，如图：
*streamer：rtmp/http流媒体，填写rtmp/http流媒 体服务器地址，可以是RTMP应用程序，也可以是外部PHP/ASP文件，详见： http://developer.longtailvideo.com/trac/wiki/FlashFormats。
9、预览你的播放器
当需要填写的参数都 填写完之后，请点击“更新预览和代码（Update Preview & Code）”，其下的“预览你的播放器（Preview Your Player）”和“复制你的代码（Copy Your Code）” 将根据你的参数而改变，你可以实时看到效果。
10、复制你的代码
在前面我曾经提到： 为了方便在网页小窗口浏览生成的代码，设置向导给出的代码是按各项参数分行了的，如果复制后就直接粘贴，可能会使播放器不能正常工作，我建议先把代码复制 到“记事本”后，删除段落标记，注意每项参数之间还要保留一个空格位，再复制到空间或博客。
仔细观察设置向导给出的 Embeded代码，它们大致可以分为以下几项：
*src： （已介绍）
*width：（已介绍）
*height：（已介绍）
*allowscriptaccess：这是Adobe Falsh Player 6.0以后开始支持的参数。这个参数是控制在HTML网页中，swf的ActionScript是否允许调取JavaScript， 它有三个选项：
·总是允许always：默认值，一般 保持默认即可。
·只允许同域名sameDomain：仅当SWF文件与HTML网页来自同一域名时才允许调取。
·不允许never。
*allowfullscreen：是否允许切换到全屏，默认是允许true。
*flashvars：即flash变量。我们可以发现绝大部分用户对JW Player的个性定制都体现在这里，定制得越具体，这个参数包含的内容就越复杂。
我们可以看到，设置向导给出 参数的格式是这样的：
flashvars=’变量1=变量值&变量2=变量值&变量3=变量值&……变量n=变量 值‘
我建议把“&”改为“&”！
修改之后就是这样：
flashvars=’变量1=变量值&变量2=变量值&变量3=变量 值&……变量n=变量值‘
如果你嫌处理Embeded 代码这么麻烦，那么我介绍一个更方便的方法：请用浏览器打开这个网页： http://ckeditor.com/demo，并点击左上角的“源码”按钮：
全选框内的文本并删 除：
将设置向导给出的 Embeded代码复制进来，再次点击左上角的“源码”按钮：
点击之后是这样：
再点击一次左上角的 “源码”按钮，此时框内的代码已被修正了：
五、补充说明
1、如果要商业性地使用JW Player，必须向官方购买许可，比如：
*带广告 的站点
*由商业机构拥有或运营的站点
*用于产品推广的站点
*提供捆绑有LongTail产品的产品
具体参见： https://www.longtailvideo.com/players/order。
2、限于Adobe Falsh Player的安全措施，JW Player不允许加载来自不同域名的播放清单文件、swf文件（例如皮肤插件）和ID3等数据。但是可以通过在网站放置crossdomain.xml 文件来迂回地解决，详见： http://developer.longtailvideo.com/trac/wiki/FlashSecurity 及 http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html。
如果要播放的媒体文 件的域名与swf文件、播放清单文件的域名不一致，插件无法加载。
3、虽然官网LongTail提供有很多现成的皮肤Skin及插件Plugins，但 是用户还是可以自己设计自己的皮肤及开发自己的插件，JW Player自定义的弹性算是空前的，有兴趣的朋友可以参见： http://developer.longtailvideo.com/trac/wiki/SkinningThePlayer 和 http://developer.longtailvideo.com/trac/wiki/PluginsBuilding。
4、更正一点：JW FLV Player支持XML和SRT两种字幕文件。
跋
1、限于本人的水平和精力，本篇仅仅是对JW FLV Player非常粗浅的介绍，例如皮肤设计、plugins的开发、API Calls、RTMP/HTTP Streaming、Crossdomain security以及JW Player家族中其他在线播放器如：WMV Player、Image Rotator等都没有涉及。
2、本篇介绍如与LongTailVideo官网有不一致之处，以官网为准。
3、虽然本篇介绍是 应 老胡 的请求而写的，其实最大的受益者却是 本人。为了完成这篇介绍文章，促使本人更深入地去学习这款非常值得研究的播放器，孔子说：“学而时习之，不亦悦乎？”自己亲身实践带来的快感远远不是由别 人灌输给你的所能比拟的！
4、近一段时间我还特别去学习了字幕插件，在介绍 XML播放清单 之后，我会把我学习字幕插件的心得分享给你们。在介绍字幕插件时，我将会涉及插件如何再附加其 他参数，还会提到dock，因为碰巧字幕插件支持dock。同样的，当我搞清楚JW FLV Player的字幕插件之后，那种喜悦也是难以言表。
相关阅读：