如何在網(wǎng)頁(yè)中實(shí)現(xiàn)同時(shí)播放多個(gè)Flash視頻文件FLV文件的源碼及詳細(xì)調(diào)用說(shuō)明

2012-4-29 0:0:0 | 作者：sw996 | 0個(gè)評(píng)論 | 人瀏覽

如果你僅需要播放一個(gè)FLV文件[例如“video.flv”],那么只要把“video.flv”和壓縮包內(nèi)的flvplayer.swf復(fù)制到同一個(gè)目錄內(nèi),然后在頁(yè)面內(nèi)添加程序代碼
復(fù)制代碼 代碼如下:

<object type="application/x-shockwave-flash" width="400" height="220"
wmode="transparent" data="flvplayer.swf">
<param name="movie" value="flvplayer.swf" />
<param name="wmode" value="transparent" />
<object/>

“flvplayer.swf”會(huì)自動(dòng)找到同一目錄內(nèi)的“video.flv”播放。也可以在“flvplayer.swf”后添加FLV文件的URL來(lái)進(jìn)行播放。方法如下：
復(fù)制代碼 代碼如下:

<object type="application/x-shockwave-flash" width="400" height="220"
wmode="transparent data="flvplayer.swf?file=movies/holiday.flv">
<param name="movie" value="flvplayer.swf?file=movies/holiday.flv" />
<param name="wmode" value="transparent" />
</object>

“file=movies/holiday.flv”就是參數(shù),可以使用相對(duì)或者絕對(duì)地址。

其他參數(shù)說(shuō)明：

如果載入影片時(shí)不需要自動(dòng)播放,可以使用“autostart”參數(shù)
例子

程序代碼

<object type="application/x-shockwave-flash" width="400" height="220"
wmode="transparent" data="flvplayer.swf?autostart=false">
<param name="movie" value="flvplayer.swf?autostart=false" />
<param name="wmode" value="transparent" />
</object>

多個(gè)參數(shù)可以混合使用,有效的參數(shù)列表：

程序代碼
file (FLV文件的地址)
autostart (是否允許自動(dòng)播放，"true"或者"false")
image (未播放時(shí)的預(yù)覽圖片，只支持JPEG格式)
repeat (是否重復(fù)播放)
clicktext (開(kāi)始時(shí)顯示的文字，默認(rèn)是"click to play")

---------------------------------------------------------------
下面是3.12版本http://www.cgfans.net/bbs/Medias/2007/10/jw_flv_player.zip這個(gè)是3.12版本
這篇文檔包含了JW MP3 Player,JW FLVPlayer,JW Media Player,JW Image Rotator的安裝方法和配置方
法

JW PLAYERS 3.12 文檔

1，安裝 （在你的站點(diǎn)里嵌入）
2，參數(shù) （配置）
基本參數(shù)
顏色參數(shù)
界面參數(shù)
播放參數(shù)
互動(dòng)參數(shù)
3，播放列表
4，自定義
5，支持

快速配置，可運(yùn)行配置向?qū)?

1，安裝
下載后，你可以得到一個(gè)例子，當(dāng)用文本或HTML編輯器打開(kāi)的時(shí)候，你可以發(fā)現(xiàn)swf是用一段短小的
javascript嵌入到頁(yè)面上的。這個(gè)Javascript是Geoff Stearns寫(xiě)的swfobject.js，它解決了Flash需要激
活的麻煩。當(dāng)復(fù)制swf到你的站點(diǎn)的時(shí)候，不要忘記了把swfobject.js一同復(fù)制過(guò)去。并且在頁(yè)面中的
Head中加入下面代碼

程序代碼

<script type="text/javascript" src="swfobject.js"></script>

在swfobject.js的幫助下你可以方便的設(shè)置swf的路徑，寬度，高度，背景顏色和所需要的Flash播放器的版本，也可以通過(guò)它設(shè)置一組參數(shù)來(lái)配置swf。當(dāng)頁(yè)面加載的時(shí)候，javascript會(huì)根據(jù)id來(lái)替換頁(yè)面中的節(jié)點(diǎn)。

程序代碼

<p id="player"><a href="Get">http://www.macromedia.com/go/getflashplayer">Get Flash</a> to see this player.</p>
<script type="text/javascript">
var so = new SWFObject('mediaplayer.swf','player','400','400','7');
so.addParam("allowfullscreen","true");
so.addVariable("file","test.flv");
so.addVariable("displayheight","300");
so.write('player');
</script>

在你不能使用javascript的情況下（比如你的bsp不支持，如myspace），你可以使用"embed"的方式來(lái)插入swf。
需要注意的是 swf可以不在該服務(wù)器上，但是如果你需要用xml的播放列表可能會(huì)有問(wèn)題，因?yàn)閤ml必須和swf在同一個(gè)服務(wù)器上，否則會(huì)因?yàn)榘踩珕?wèn)題被組織。mp3，jpg，flv可以不在該服務(wù)器上。

程序代碼

<embed src="http://www.myfileserver.com/folder/mediaplayer.swf" width="400" height="400"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"
flashvars="file=http://www.myfileserver.com/folder/test.flv&displayheight=300" />

2，參數(shù)
這些參數(shù)可以配置被嵌入到html中的播放器的行為和外觀。如果使用swfobject.js，可以用addVariable()方法來(lái)配置，如果使用的embed方式，可以通過(guò)定義"flashvars"屬性來(lái)配置變量，注意用"&"符號(hào)分割這些變量。

被*號(hào)標(biāo)注的同樣適用于 JW Image Rotator

基本變量

displayheight(number）：顯示區(qū)域的高度.控制區(qū)域最小高度是20px，當(dāng)該值大于或等于swf的高度時(shí)，播放列表會(huì)自動(dòng)隱藏，否這會(huì)顯示。
file*(url）：要播放文件的地址。 支持單文件播放(MP3/FLV/RTMP/JPG/SWF/PNG/GIF)，也支持播放列表。JW Image Rotator只支持列表
height*(number）：設(shè)置swf的高度，當(dāng)使用embed方式插入的時(shí)候，在embed的屬性里已經(jīng)設(shè)置了。但是有時(shí)候（特別是使用IE的時(shí)候）高度會(huì)變的不確定，影響了布局，這時(shí)候需要通過(guò)該參數(shù)設(shè)置下，該值的單位是px
image(url）:當(dāng)你播放mp3，flv的時(shí)候，你可以通過(guò)該值設(shè)置一個(gè)預(yù)覽圖作為專輯封面，支持 JPG/SWF/PNG/GIF file. 你也可以在播放列表中對(duì)每一項(xiàng)進(jìn)行設(shè)置。
shownavigation*（true,false):該參數(shù)僅被JW Image Rotator支持。用來(lái)顯示或隱藏圖片導(dǎo)航。
transition* (fade,bgfade,blocks,bubbles,circles,fluids,lines,random,slowfade): 該參數(shù)僅被JW Image Rotator支持。用來(lái)設(shè)置圖片替換的效果。 設(shè)置為"random" 將隨機(jī)的設(shè)置效果.默認(rèn)值為 "fade".
width*(number):設(shè)置swf的寬度，其他同height；

顏色變量

backcolor*(color):設(shè)置播放器的背景顏色。JW Media Player等默認(rèn)為 0xFFFFFF (白色) JW Image Rotator默認(rèn)為 0x000000 (黑色).
fontcolor*(color):設(shè)置文字和按鈕的顏色。JW Media Player等默認(rèn)為 0x000000 (黑色) JW Image Rotator默認(rèn)為 0xFFFFFF (白色).
lightcolor*(color):設(shè)置被被激活狀態(tài)的顏色。JW Media Player等默認(rèn)為 0x000000 (黑色) JW Image Rotator默認(rèn)為 0xCC0000 (紅色).

界面參數(shù)

autoscroll(true,false):當(dāng)播放列表過(guò)長(zhǎng)的時(shí)候，默認(rèn)會(huì)自動(dòng)顯示滾動(dòng)條。當(dāng)該值設(shè)置為'true'的時(shí)候，會(huì)自動(dòng)根據(jù)鼠標(biāo)滾動(dòng)播放列表。
displaywidth(number of pixes):設(shè)置顯示區(qū)域的寬度，當(dāng)設(shè)置的比較小的時(shí)候，播放列表會(huì)顯示在顯示區(qū)域的右側(cè)而不是底部。
kenburns* (true,false): 用以實(shí)現(xiàn)在運(yùn)動(dòng)的時(shí)候?qū)崿F(xiàn)kb效果（Ken Burns effect），注意，當(dāng)圖比較大，而且網(wǎng)速比較快的時(shí)候，建議打開(kāi)，否則關(guān)閉。建議設(shè)置transition為"slowfade"來(lái)配合。
largecontrols (true,false): 設(shè)置該值為true用來(lái)放大控制區(qū)域的按鈕。建議為視力不好的用戶打開(kāi)
logo* (url): 設(shè)置一個(gè)圖片用來(lái)作為右上角的水印，支持所有圖片格式，支持通明圖層的png效果最佳。
overstretch* (true,false,fit,none): 設(shè)置圖片/影片在顯示區(qū)域的縮放。"true"等比例拉伸用來(lái)符合顯示區(qū)域。"false"僅拉伸合顯示區(qū)域。"fit"全屏顯示。"none"顯示原始大小。JW Media Player等默認(rèn)為"fit",JW Image Rotator默認(rèn)為"false"
showdigits (true,false,total): 設(shè)置為"false"隱藏播放時(shí)間等信息用來(lái)節(jié)省控制區(qū)域的空間。設(shè)置為"total"用來(lái)顯示全部時(shí)間。
showdownload (true,false):設(shè)置該值用來(lái)在控制區(qū)域顯示下載按鈕。鏈接到link所設(shè)置的地址。
showeq (true,false): 用來(lái)顯示一個(gè)假的音頻波動(dòng)效果。當(dāng)播放mp3的時(shí)候打設(shè)置該值可以得到很好的效果
showicons* (true,false): 用來(lái)顯示或者隱藏顯示區(qū)域中間的圖片，JW Media Player等默認(rèn)為true。JW Image Rotator默認(rèn)為false；
showvolume (true,false): 用來(lái)設(shè)置是否顯示音量控制按鈕
thumbsinplaylist (true,false): 設(shè)置列表中是否顯示預(yù)覽圖

播放參數(shù)
autostart (true,false,muted): 設(shè)置為ture，頁(yè)面加載完后會(huì)自動(dòng)播放。設(shè)置為muted，會(huì)在靜音模式下自動(dòng)播放，并且顯示區(qū)域中間有靜音圖標(biāo)。
bufferlength (number): 設(shè)置flv的緩存時(shí)間。默認(rèn)為3秒
repeat* (true,false,list): 默認(rèn)為flase，從當(dāng)前播放位置播放到列表尾部后停止。設(shè)置為list會(huì)播放列表中所有的項(xiàng)目，設(shè)置為true會(huì)循環(huán)播放。
rotatetime* (number): 設(shè)置圖片的顯示時(shí)間。JW Media Player等默認(rèn)為10秒,JW Image Rotator默認(rèn)為5秒
shuffle* (true,false): 設(shè)置為false順序播放，設(shè)置為true無(wú)序播
smoothing (true,false): 設(shè)置為false關(guān)閉視頻平滑處理，推薦設(shè)置true用以得到更好效果。但對(duì)于大屏幕或者配置低的機(jī)器設(shè)置false是有好處的
start* (second): 在使用RTMP 或 HTTP 流媒體的時(shí)候（非常規(guī)的flv/mp3)，使用該變量準(zhǔn)確的定位開(kāi)始位置。該參數(shù)設(shè)置在XSPE格式的列表中以便準(zhǔn)且的設(shè)置文件的章節(jié)。
volume* (number): 設(shè)置音量，默認(rèn)為80.

互動(dòng)參數(shù)

audio* (url):用這個(gè)參數(shù)來(lái)添加一個(gè)mp3文件作為單獨(dú)的音頻，可以作為圖片的背景音樂(lè)解說(shuō)等。
bwfile (url):用以帶寬檢測(cè)的文件的地址，可以放一個(gè)圖片，或者rtmp流媒體。可以在右鍵菜單中查看到貸款數(shù)值。
bwstreams (comma-separated list of bitrates):
和bwfile配合使用，根據(jù)帶寬值來(lái)選擇不同的文件。如：你要播放video.flv并且設(shè)置該項(xiàng)的值為100,250,500,1000,當(dāng)播放器發(fā)現(xiàn)帶寬為349kbps的時(shí)候，將會(huì)播放video_250.flv。所以他有一套有效的命名設(shè)置，他將會(huì)自動(dòng)切換，哪怕是在采用播放列表的情況下。
callback (url):設(shè)置這個(gè)參數(shù)為服務(wù)端程序（php/asp)地址用來(lái)回傳數(shù)據(jù)。在每個(gè)項(xiàng)播放和停止的時(shí)候會(huì)發(fā)送數(shù)據(jù)到服務(wù)器，以便在服務(wù)器端保存播放統(tǒng)計(jì)。
captions (url): 設(shè)置該值用以載入一個(gè)文本格式的文本作為字幕。播放器至支持SMIL格式和DVD的SRT格式的字幕。如果你的flv文件內(nèi)置字體你可以設(shè)置該值為"captionate".如果你有多頻道字幕，可以設(shè)置這個(gè)值為"captionate0", "captionate3"等。可以在列表中設(shè)置每一個(gè)項(xiàng)的值。
enablejs* (true,false): 設(shè)置為true打開(kāi)對(duì)javascript的支持。僅支持在線使用。javascript可以控制播放，加載媒體，獲得當(dāng)前播放項(xiàng)的詳盡信息。
fsbuttonlink (url):如果用戶的flashplayer版本高于（9.0.28）播放器會(huì)自動(dòng)的顯示一個(gè)全屏按鈕。通過(guò)設(shè)置該值，你可以鏈接到另外的頁(yè)面用以全屏顯示。服務(wù)端程可以設(shè)定將要播放的文件。
id (string): 播放器的唯一標(biāo)識(shí)。將會(huì)被回傳到服務(wù)器端。
javascriptid* (string):如果你的頁(yè)面上有多個(gè)播放器，你可以設(shè)置這個(gè)參數(shù)給每個(gè)播放器不同的id，這樣就可以方便的用javascript來(lái)控制。他將回傳到getUpdate（）事件中。
link (url): 通過(guò)這個(gè)參數(shù)用來(lái)設(shè)置一個(gè)可現(xiàn)在的版本，或者強(qiáng)制用戶通過(guò)該地址下載當(dāng)前項(xiàng)。可以在播放列表中為每一項(xiàng)設(shè)置該值。
linkfromdisplay* (true,false):設(shè)置顯示區(qū)域被點(diǎn)擊時(shí)要訪問(wèn)的頁(yè)面。默認(rèn)點(diǎn)擊顯示區(qū)域時(shí)會(huì)進(jìn)行播放/暫停操作。
linktarget* (frame): 設(shè)置鏈接目標(biāo)，"_self"在當(dāng)前頁(yè)打開(kāi)。"_blank"在新頁(yè)面中打開(kāi)。
streamscript (url):設(shè)置這個(gè)參數(shù)為了兼容‘偽流媒體'FLV文件。
type (mp3,flv,rtmp,jpg,png,gif,swf,rbs,3gp,mp4,m4v): 播放器會(huì)根據(jù)文件名的最后三個(gè)字符來(lái)判斷類型。在你使用服務(wù)器端語(yǔ)言進(jìn)行重定向時(shí)，這種方法將不會(huì)再有效。所以你可以設(shè)置這個(gè)參數(shù)來(lái)告訴播放器文件類型。你也可以在播放列表中對(duì)每一項(xiàng)進(jìn)行設(shè)置。如果播放器找不到文件類型將會(huì)被識(shí)別為播放列表。
useaudio (true,false): 設(shè)置為false用來(lái)改變?yōu)殪o音狀態(tài)。
usecaptions (true,false):設(shè)置為false隱藏字幕.
usefullscreen (true,false):如果你不希望用flashplayer9的全屏模式。可以設(shè)置"fsbuttonlink"參數(shù)用來(lái)替換全屏按鈕的事件。
usekeys (true,false): 設(shè)置為"false"用來(lái)取消鍵盤(pán)操作(SPACE,UP,DOWN,LEFT,RIGHT)

注意：你必須對(duì)?=&進(jìn)行字符轉(zhuǎn)移。? → %3F, = → %3D, & → %26. 你的"file" 變量為getplaylist.php?id=123的時(shí)候必須設(shè)置為 getplaylist.php%3Fid%3D123.

播放列表

當(dāng)播放列表中只有一個(gè)項(xiàng)目的時(shí)候，播放器會(huì)用單文件播放模式進(jìn)行播放。播放器根據(jù)文件名來(lái)區(qū)分單文件和播放列表文件。如你的加載文件名為test.mp3的文件，播放器會(huì)用單文件播放模式去播放mp3，因?yàn)閿U(kuò)展名是mp3.如果你的文件名是getlist.php,播放器會(huì)認(rèn)為這是個(gè)播放列表。如果你使用了動(dòng)態(tài)腳本來(lái)加載一個(gè)單文件如

播放器支持三種常用的播放列表格式來(lái)確保通用性。XSPF，RSS和ATOM。

播放器所支持的XSPF/RSS/ATOM列表的通用標(biāo)簽。
表格

*Image Rotator僅支持播放列表中的第一個(gè)'audio'項(xiàng)，被用來(lái)做為背景音樂(lè)來(lái)播放。播放器會(huì)播放所有的音樂(lè)項(xiàng)目。

** "category" 元素可以用來(lái)支持廣告。你可以設(shè)置該值為"preroll", "postroll" 或 "overlay".
使用"link"播放列表中單項(xiàng)的值為廣告地址。

*** "start"元素只被XSPF的播放列表格式支持。該元素用來(lái)設(shè)置流媒體文件（HTTP or RTMP)的開(kāi)始位置，單位為秒。

**** XSPF列表格式中的"location"元素中如果不包含常見(jiàn)的擴(kuò)展名(如 "mp3" or "flv"),可以使用"meta"元素指定文件格式。(如 <meta rel='"type">mp3</meta> ).在使用RSS和ATOM的情況下,文件格式被自動(dòng)的根據(jù)mimetype來(lái)識(shí)別。

RTMP streams, the additional "id" flashvar has to be sent as well. Example: "file=rtmp://my.streaming.server/mypath" and "id=video_one".

注意，當(dāng)你播放單文件的時(shí)候，你支持所有的參數(shù),如你可以添加一個(gè)image，title，id，link等。如當(dāng)你用單文件播放模式播放"video.flv"時(shí)你也想添加一個(gè)預(yù)覽圖，你可以設(shè)置參數(shù)"file=video.flv","image=preview.jpg".當(dāng)你播放RTMP流媒體的時(shí)候，你可以添加參數(shù)"id".如"file=rtmp://my.streaming.server/mypath" ，"id=video_one".

特別指出兩個(gè)容易出錯(cuò)的地方。第一列表必須和播放器在同一個(gè)服務(wù)器上，這是flash的安全機(jī)制導(dǎo)致的。第二，要使用完整的地址格式包含http，以免播放器找不到文件。

自定義
有人多人要求我創(chuàng)建一些可自定義的版本。他們的很多要求其實(shí)已經(jīng)可以通過(guò)設(shè)置參數(shù)來(lái)實(shí)現(xiàn)了。我做了一個(gè)在線配置向?qū)Э梢院?jiǎn)單的配置這些參數(shù)。我沒(méi)有精力去滿足所有人的要求。不過(guò)在下一個(gè)版本中會(huì)有很多有趣的附加功能。

如果你熟悉actionscript腳本語(yǔ)言，你可以自己修改程序添加功能。

播放器在實(shí)例的時(shí)候會(huì)最近會(huì)加完配置和播放列表變量，然后進(jìn)入MCV的生命周期。在MCV生命周期中，配置和列表管理器（feeder）始終是有效的。

紅色標(biāo)注的兩個(gè)對(duì)象的所有方法可以通過(guò)javascript調(diào)用。

在另外的flash程序中是可以引用播放器的。只要從下載的flv文件中復(fù)制出圖像到你的flv中，并且確保將下載的com目錄復(fù)制到你的flv文件中，里面包含了所有的腳本。然后你就可以在時(shí)間軸的第一個(gè)幀的位置訪問(wèn)變量了。注意要設(shè)置高度和寬度的變量，否則播放器會(huì)根據(jù)你的尺寸拉伸變形。
如

程序代碼

// Set the flashvars (booleans and numbers should also be quoted)
var width = "320";
var height = "240";
var file = "my_video.flv";
var autostart = "true";
// Start the player
var mpl = new com.jeroenwijering.players.MediaPlayer(this.player);
Additionally, I have made the controller a public object, so you can control the mediaplayer with the sendEvent() function from anywhere in your flash site (the schematic above has a list of all sendEvent() options). Let's continue the small script above:

我為播放器創(chuàng)建了公開(kāi)的controller對(duì)象，所以你可以在你程序的任何地方通過(guò)使用sendEvent（）來(lái)控制播放器，如：

程序代碼

mpl.controller.sendEvent("volume",50);
mpl.controller.sendEvent("playpause");

支持

常見(jiàn)問(wèn)題列表

1.如果你在使用ie的情況下出現(xiàn)了布局錯(cuò)亂的情況，那可能是大小沒(méi)有別設(shè)定好，你可以使用變量"width"和"height"來(lái)強(qiáng)行設(shè)置。
2.注意，flash和javascript的安全機(jī)制會(huì)影響你的本地測(cè)試。當(dāng)你的文件放在不同的服務(wù)器上的時(shí)候也會(huì)受到影響，你可以嘗試放在同一個(gè)服務(wù)器上。
3.全屏功能只有在flash player9.028.0以上版本才能使用，如果你使用了swfobject來(lái)嵌入你的播放器，你可以使用他的自動(dòng)升級(jí)功能。注意設(shè)置 "allowfullscreen" 為true
4.如果你的進(jìn)度條不動(dòng)，或者你的視頻的長(zhǎng)度有問(wèn)題。那可能是你的flv沒(méi)有設(shè)置正確的metadata。你可以使用一個(gè)小工具http://www.buraks.com/flvmdi/.

兩個(gè)版本使用起來(lái)稍有不同,具體請(qǐng)見(jiàn)里面說(shuō)明
官方下載鏈接: http://www.jeroenwijering.com/upload/jw_flv_player.zip

本文來(lái)自: 成都百度快照優(yōu)化|成都百度關(guān)鍵詞排名優(yōu)化|成都SEO【思為網(wǎng)絡(luò)】，轉(zhuǎn)載請(qǐng)保留出處！歡迎發(fā)表您的評(píng)論

相關(guān)標(biāo)簽：

相關(guān)推薦