JW Player使用简介 基于flash的交互式网页媒体播放器

分类:Javascript| 发布:camnprbubuol| 查看: | 发表时间:2012/2/24

一、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可安装在网络空间,我从未如此运用过,而是上传到我的网盘,因此本篇的介绍也是基于此种情况,而列为看官当然懂得如何触类旁通。另外,我们一定要选择可以直链的网盘上传,何谓“直链”,即外链地址以完整的文件名为结尾(含.后缀名),如http://www.xxx.com/xxx.mp3

1、首先到官网下载源文件,下载地址:http://www.longtailvideo.com/players/jw-flv-player/
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

下载来的文件是zip压缩包,解压之后可以看到内含以下文件:
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

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 代码的格式一般是这样:<embed 参数1=”参数值” 参数2=”参数值” ……参数n=”参数值”></embed>。

关于Embed Code各项参数的详细介绍,请参阅Adobe官网:http://kb2.adobe.com/cps/127/tn_12701.html。这个话题不小,值得另开一篇介绍文章。

1、设置向导概览
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享
(点击打开大图)

JW Player设置非常灵活,代价就是参数非常多,搞清楚参数的意义很重要,官网也提供相关资料供我们查阅:http://developer.longtailvideo.com/trac

特别注意:如果你的网址参数值带有“?”、“=”和“&”这三个字符,必须先转换再填写,如下:

?”转换为“%3F
=转换为“%3D
&转换为“%26

例如:原网址为:getplaylist.php?id=123&type=flv,转换后为:getplaylist.php%3Fid%3D123%26type%3Dflv

2、选择模板
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

官网为我们提供了多达21种模板,每选择一种模板,下面的参数值和播放器预览将自动更新。虽然大部分模板今后我们恐怕几乎用不上,我还是建议新手一定要把每一种模板都点击一下,再好好体会下面的参数值,这既有助于我们领会众多参数所代表的含义,还可以在播放器预览直接看到参数所体现的效果。

模板其实就是一件半成品,熟悉模板还可以让我们快速而准确地挑选最接近成品的模板,善用模板将大大提高效率。

需要多费口舌的是带播放清单模板“flvplayer with an rss playlist”,这个留待后面谈flie参数时再详细介绍。

3、嵌入参数

嵌入参数有三个内容:

*swf来源:填写我们之前上传到网盘player.swf的直链地址
*播放器高度:填写pix(像素)值或浏览窗口百分比
*播放器宽度:填写pix(像素)值或浏览窗口百分比

JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

如果高度和宽度填写的是百分比,那么播放器的大小是弹性的,它将随浏览器窗口和所在网页留给播放器窗口的大小而变化。
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

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是以文件后缀名来判断媒体类别,如果播放器没有找到合适的后缀名,它将假定载入的是播放清单。

*预览图像:预览图片的链接地址

何谓“预览图像”?当播放器停止播放时,它显示的图像。
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

外部链接地址:当填写此项参数值后,播放器的控制面板将多出一个链接按钮,点击可以打开外部链接网页。请看截图:
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

*开始时间:定位从第几秒开始播发,仅对HTTP / RTMP流媒体有效。
*媒体标题:如果你将播放器设置成带播放清单(Playlist),媒体标题将出现在播放清单。

JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

*媒体类别:一般来说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
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

6、播放器布局参数

*controlbar:控制面板放置位置:底部bottomd(默认)、覆盖over、无none。如果选择覆盖,只有鼠标悬停于播放屏幕,或者停止播放时,才会出现控制面板,此时控制面板出现于播放屏幕的底部。
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

*logo:填写logo图片(JPG/PNG/GIF)的直链地址。当采用默认皮肤时,Logo图像会显示于屏幕的右上角。
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

*playlist:播放清单放置位置:无none(默认)、底部bottom、覆盖over、右边right、左边left、顶部top。
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

*playlistsize:填写播放清单显示尺寸,默认180pix。当播放清单置于底部或顶部时,该值代表高度;当播放清单置于左边或右边时,该值代表宽度;当播放清单置于覆盖时,播放清单将在停止播放时才出现,并覆盖全部播放屏幕,且不受该值影响。
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

*dock:默认不显示dock。这个我确实不知道如何翻译,用过苹果操作系统的朋友应该知道那是什么。JW Player 4.5版以后支持dock。dock实际上就是某些插件(plugins)以图标的形式显示于屏幕的右侧,从上往下排列,具体哪些插件(例如:语音解说audiodescription,字幕caption等插件)支持dock,我尚不清楚。请看截图吧:
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

*skin:填写皮肤swf文件的直链地址。JW Player的皮肤插件也是swf文件,官网提供不少现成的皮肤插件,详见:http://www.longtailvideo.com/addons/skins。在你运用皮肤插件之前,要先将你需要的皮肤插件下载到本地再上传到网盘。用户还可以自己设计自己的皮肤插件,参见:http://developer.longtailvideo.com/trac/wiki/FlashSkinninghttp://developer.longtailvideo.com/trac/wiki/SkinningThePlayer
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

请你们特别注意,不同的皮肤,其播放清单显示的具体内容会有所增减。

7、播放器行为参数

*autostart:自动播放,默认无false。
*bufferlength:缓冲时长(秒),默认1秒。设置开始播放前预先缓冲的时长,设置时长短可以及时播放,设置时长长则可以减少中断。
*displayclick:点击动作,默认为播放play。设置点击屏幕时播放器的行为:播放(默认)play,链接link,切换到全屏fullscreen,无任何行为none,静音mute,下一个曲目next。当选择“无任何行为none”时,鼠标点击手势不会出现于屏幕。

JW Player使用简介 - Coriolanus - Coriolanus 音乐分享
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

*icons:缓冲图标,默认显示true。
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

*item:开始播放曲目,默认为0。注意:JW Player认为播放清单第一个曲目的顺序号为“0”。
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

*mute:以静音开始,默认无false。该选择将会保存在浏览器的cookie。
*quality:回放品质,默认高品质true。
*repeat:重复方式,默认无none。list:播放清单的所有曲目都完整播放一遍。always:重复循环播放。
*shuffle:乱序播放,默认无false。设置是否按播放清单的顺序播放,或者乱序播放。
*stretching:图片延展方式。none:不延展;exactfit:不锁定高宽比填满屏幕;fill:锁定高宽比填满屏幕;默认uniform:锁定高宽比,以黑色填充空白部分。

JW Player使用简介 - Coriolanus - Coriolanus 音乐分享
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

*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)”:
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

如果是免费plugins,一般会给出参数值,直接填写就可以加载了。以字幕plugins “captions”为例:
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

要加载多个plugins,请在参数值之间用英文的逗号“,”隔开,如图:
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

*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)” 将根据你的参数而改变,你可以实时看到效果。
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

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=变量值

我建议把“&”改为“&amp;”!

修改之后就是这样:

flashvars=’变量1=变量值&amp;变量2=变量值&amp;变量3=变量值&amp;……变量n=变量值

如果你嫌处理Embeded代码这么麻烦,那么我介绍一个更方便的方法:请用浏览器打开这个网页:http://ckeditor.com/demo,并点击左上角的“源码”按钮:
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

全选框内的文本并删除:
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

将设置向导给出的Embeded代码复制进来,再次点击左上角的“源码”按钮:
JW Player使用简介 - Coriolanus - Coriolanus 音乐分享

点击之后是这样:

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/javascript/532.html