原理

html檔下載到客戶端，swf檔留在伺服器端，兩者建立起ajax通道，並在客戶端的瀏覽器內建立起播放區，由伺服器將數據持續送往客戶端，邊送邊在客戶端解碼，並在瀏覽器播放區中播出。

swf 的影片數據可以放在同一個 swf 檔中，也可以放在其他的 URL 。由於數據是透過 ajax 通道傳送，所以可利用客戶端的 javascript 加以控制。

壹、JW player 使用教學

一、簡介

(一)開發沿革

JW Player是一種基於flash的交互式網頁媒體播放器。它是由 Jeroen 和 Wijering 共同建立的 LongTail Video 所開發，問世於2005年，當時仍名不經傳的YouTube首次採用的播放器就是 JW Player。

(二)適用檔案及功能

支援 FLV, MP4, MP3, AAC, JPG, PNG 和 GIF 這些格式，swf能播但無法暫停。

也支援用RTMP、HTTP 等來編輯播放清單、設定多種功能的設定值和強大的 javascript API。

(三)版本及下載

JW Player分為「JW Player for Flash & HTML5」「JW Player for Silverlight(放wmv)」「JW Desktop Player」，本文主要介紹「JW Player for Flash & HTML5」。

下載點：http://www.longtailvideo.com/players/jw-flv-player/

有兩種 player.swf 可以下載：

JW Media Player。
JW Media Player + Viral Plugin：預設載入 Viral 插件，有社群分享功能，影片暫停時會提供 embed 語法等。

(四)中文路徑的問題

如果透過 url 或 HTML Embed 標籤的 src 屬性值沒有成功找到 player.swf ，則不會出現控制列及播放區；如果找到 player.swf 但找不到播放檔，會在播放區秀出「Video not found or access denied:播放檔檔名」。

player.swf 由 FlashVars 中的 file 變數指示播放檔的url，其變數值不能含中文，否則 player.swf 無法解析，不論寫在 url 、 Embed 標籤中都不行。但如果播放檔雖然在中文目錄中，file變數值卻因為使用相對路徑而不含中文，則可以正播放。

由於 file 變數的播放檔路徑是以 player.swf 為基準，若想要將 player.swf 放在上層目錄，同時服務好幾個下層子資料夾，則各下層子資料夾不能出現中文，否則會迫使 file 的變數值出現中文。

二、各種播放模式

(一)用網址直接呼叫 player.swf，並在其後使用 FlashVars

player.swf?file=播放檔

(二)用 HTML 標籤

object和embed早期的區別：

object標籤只支持IE系列的瀏覽器或者其它支持Activex控件的瀏覽器 (Internet Explorer)，「classid」和「codebase」屬性必須要精確地寫，它們告訴瀏覽器自動下載flash player的地址。如果你沒有安裝過flash player 那麼IE3.0以後的瀏覽器會跳出一個提示框詢問是否要自動安裝flash player。當然，如果你不想讓那些沒有安裝flash player的用戶自動下載播放器，或許你可以省略掉這些代碼。

embed標籤支持Mozilla系列的瀏覽器或其它支持Netscape插件的瀏覽器 (Mozilla family of browsers)，「pluginspage」屬性告訴瀏覽器下載flash player的地址，如果還沒有安裝flash player的話，用戶安裝完後需要重啟瀏覽器才能正常使用。

為了確保大多數瀏覽器能正常顯示flash，大家常把embed標籤嵌套放在object標籤內。支持Activex控件的瀏覽器將會忽略object標籤內的embed標籤。Netscape和Mozilla系列的瀏覽器將只讀取embed標籤而不會識別object標籤。也就是說，如果你省略了embed標籤，那firefox就不能識別你的flash了(不過省略了object只寫embed，IE也能正常顯示 flash)。

object和embed晚近的區別： embed 已通吃所有的瀏覽器(含IE)，而 object 也符合 W3C 標準。

<embed
	src="player.swf"
	FlashVars="file=播放檔"
	<!-- 以下屬性可省略 -->
	width="400"
	height="300"
	allowfullscreen="true"
	allowscripaccess="always"
	type="application/x-shockwave-flash"
	wmode="transparent"
	id="player1"
	name="player1"
/>

(三)使用 javascript -- swfobject

下載點：http://swfobject.googlecode.com/files/swfobject_2_2.zip

首先要載入 swfobject.js ，可以載入自己網站上的 swfobject.js

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

或載入 google 上的 swfobject.js

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script>

使用時可以使用物件的 embedSWF 方法：

<script type="text/javascript">
	var flashvars={file:'播放檔',autostart:'true'};
	var params={allowfullscreen:'true',allowscriptaccess:'always'};
	var attributes = { id:'player1', name:'player1' };
	<!-- 以下諸引數為player.swf相對於本頁的URL、播放區，寬度、高度、最低的 flash player 版本、版本不足時是否自動升級
	swfobject.embedSWF('player.swf','播放區之id','400','300','9.0.115','false',
		flashvars, params, attributes);
</script>

flashvars參數放播放器配置選項；而params參數則播放器及其插件所需要的參數，本例中啟用全屏Flash和JavaScript功能。attributes參數則放播出後的HTML tag的屬性，本例中改變(或不改變)名稱和id。

(四)使用 javascript -- jwplayer.js

<script type="text/javascript" src="./jwplayer.js"></script>
<script type="text/javascript">
	jwplayer("播放區之id").setup({
		flashplayer: "player.swf之URL",
		file: "播放檔",
		<!-- 以下屬性可省略 -->
		width: 400,
		height: 300,
		autostart: true,
		controlbar: "none",
		duration: 57,
		volume: 80
</script>

如果配合使用 video 標籤，可以簡化setup的物件實字設定：

<video	src="播放檔"
	width="480"
	height="270"
	id="container"
	poster="/uploads/image.jpg">
</video>
<script type="text/javascript">
	jwplayer("container").setup({flashplayer:"player.swf的URL"});
</script>
</pre>

(五)使用 javascript -- jwplayer.js 連續播出播放清單

playlistplaylist的值可以設為一個陣列，每個元素代表一個播放檔：

<script type="text/javascript">
	jwplayer("播放區之id").setup({
		flashplayer: "player.swf之URL",
		playlist:[
			{duration:播放秒數1,file:"播放檔1",image:"代表圖照1"},
			{duration:播放秒數2,file:"播放檔2",image:"代表圖照2"},
			{duration:播放秒數3,file:"播放檔3",image:"代表圖照3"}
		],
		"playlist.position": "right",
		"playlist.size": 360,
		height: 270,
		width: 720
	});
</script>

三、FlashVars

分為以下幾類：

類別 File Behaviour API Layout Colors Config

已介紹 playlistfile、duration、file、image、title、description、date、link autostart、bufferlength、item、mute、repeat、shuffle、smoothing、stretching、volume、logo、fullscreen、displayclick、linktarget、state plugins controlbar、dock、icons、playlist、playlistsize、skin、width、height backcolor、frontcolor、lightcolor、screencolor config

未介紹 mediaid、provider、start、streamer、netstreambasepath、author、type playerready、resizing、諸logo次屬性 client、debug、id、version

類別	File	Behaviour	API	Layout	Colors	Config
已介紹	playlistfile、duration、file、image、title、description、date、link	autostart、bufferlength、item、mute、repeat、shuffle、smoothing、stretching、volume、logo、fullscreen、displayclick、linktarget、state	plugins	controlbar、dock、icons、playlist、playlistsize、skin、width、height	backcolor、frontcolor、lightcolor、screencolor	config
未介紹	mediaid、provider、start、streamer、netstreambasepath、author、type	playerready、resizing、諸logo次屬性	client、debug、id、version

英文說明在http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12536/configuration-options。

以下一一說明，()中為預設值。

playlistfile(undefined)
指示播放清單。

duration(0)
只播放這個檔案幾秒鐘，設定為"0"則播放到完。

file(undefined)
指示播放檔。這個數值除了可以填寫音樂檔、影片檔、圖檔位址之外，也能填寫xml的位址(xml 是個播放清單，稍後會做介紹)。

image(undefined)
圖片檔的位置，播放音樂檔時會顯示在畫面中(播放前也會)。開始播放影片前會顯示，但播放影片檔時則會被影片畫面覆蓋。若設有播放清單，他則會顯示在撥放清單中

title(undefined)
標題。

description(undefined)
媒體的描述。

date(undefined)
日期，例如歌曲專輯的發行日期。

link(undefined)
設定網址連結，讓使用者可以點選播放器右下角類似鐵鍊的圖示，開啟連結。

autostart(false)
自動播放。

bufferlength(1)
到下一首之前要先緩衝多少秒鐘，就是要即準備播放下一首時，會按照設定先載入下一首多少秒鐘的資料長度。

item(0)
一開始播放的項目(需要配合autostart 才會自動開始播放指定項目)。

mute(false)
設定一開始就靜音。

repeat(none)
none (單曲) 單曲播放完畢後停止
list (清單) 一整個清單播放一遍之後停止
single (單曲循環) 不斷的重複單曲
always (清單循環) 不斷的重複整個清單。

shuffle(false)
隨機/非隨機。

smoothing(true)
設定增強顯示效果，如反鋸齒。如果設定為"false"，會讓某些比較老舊的電腦能夠執行。

stretching(none)
伸縮播放區域，對撥放器點右鍵也能直接設定這項數值。none (原本的大小)；exactfit (會按照顯示畫面的大小塞滿整個畫面)；uniform (按照比例調整至最大/小尺寸)；fill (會按照圖片尺寸比例塞滿整個畫面)。

volume(90)
設定一開始的音量。

logo(undefined)
在畫面中放標誌圖。

fullscreen(false)
開始播放時為全螢幕。

displayclick(play)
當點擊畫面之後播放器該做什麼動作?play (播放/暫停)，link (開啟連結)，fullscreen (全螢幕)，none (什麼都不做)，mute (靜音)，next (下一首)。

linktarget(_blank)
_blank (另開新視窗/分頁)，_self (用相同的視窗/分頁開啟)。

state(IDLE)
設定播放器剛開啟時放在畫面中間的圖示。IDLE (空白)，BUFFERING (載入檔案的圖示)，PLAYING (播放的圖示)，PAUSED (暫停的圖示)，COMPLETED (載入完成?)。

controlbar(over*)
控制列的位置，有以下三種模式可以選擇:bottom (放置在撥放器畫面中)，over (播放時隱藏，滑鼠進入播放區才顯現)，none (不顯示)。

*使用jwplayer.js時，預設值為over；直接播、用embed標籤、使用swfobject.js時，預設值為bottom。

controlbar.idlehide(false)
當控制列設為「滑鼠進入播放區才顯現」時，指示當暫停或停止時，控制列要不要隱藏，若真就要隱藏。

dock(true)
插件按鈕顯示播放區中。設為 false 時插件按鈕放在控制列中。

icons(true)
設"false"會隱藏播放圖示和緩衝圖示。

playlist(none)
bottom (放置在撥放器下半部)；right (放在播放器右半邊)；over (播放時隱藏)；none (不顯示)。

playlistsize(180)
當撥放清單擺在下半部或右半邊，指定播放清單的高度或寬度。

skin(undefined)
讓播放器套用不同的面板。

width(400)
寬度。

height(280)
高度。

backcolor(white)
控制列的背景色。

screencolor(black)
控制列配合背景色的灰階色。

frontcolor(black)
控制列中字的顏色，含播放鈕的三角形、時間、指示目前播放點的小矩形、音量喇叭、全螢幕四箭頭。

lightcolor(black)
控制列中的游標停駐變色，指示目前播放點左方已播長條，音量控制目前音量控制。

config(undefined)
指示配置檔，配置檔為xml格式，其中用標籤包值，指示其他的flashvars。參見 testConfig.xml 。

plugins(uniform)
插件，可以在 http://www.longtailvideo.com/AddOns/ 取得，但是要會員。同時啟用多個插件時，兩插件用「,」間開。

player.swf有兩個版本，正常版和Viral Plugin版。正常版設「plugins=viral」按暫停會出現代碼複製及分享畫面，未設則按暫停只會畫面暫停。
Viral Plugin版設「plugins=embed」則按暫停只會畫面暫停，未設則按暫停會出現代碼複製及分享畫面。

字幕、旁白:
Captions (文字)
Audiodescription (語音)
SubPLY (可設多個可選用的字幕，但須請 SubPLY 公司收費託製字幕)

設「plugins=captions-2&captions.file=字幕檔.xml」則出現字幕切換鈕。

<tt xml:lang="zh-TW" xmlns="http://www.w3.org/2006/10/ttaf1" 
	xmlns:tts="http://www.w3.org/2006/10/ttaf1#style">
  <head>
    <layout/>
  </head>
  <body>
    <div xml:id="captions">
      <p begin="00:00:08" end="00:00:10">測試utf8中文字幕第一行</p>
      <p begin="00:00:10.5" end="00:00:12.5">測試utf8中文字幕第二行</p>
      <p begin="00:00:13.5" end="00:00:15">測試utf8中文字幕第三行</p>
      <p begin="00:00:17" end="00:00:20">測試字幕換行<br/>換行後的字串!</p>
...................................................................
      <p begin="00:00:41" end="00:00:43">測試utf8中文字幕第N行</p>
      <p begin="00:00:43" end="00:00:45">測試utf8中文字幕最末行!</p>
    </div>
  </body>
</tt>

begin屬性指示開始顯示的時間；end屬性指示結束的時間 (字幕消失) ，可以不輸入。

其他幾個常見的 plugin：

連結相關影片:
D-Related (可以另外連結其他影片或網頁)

影片搜尋:
YouSearch (搜尋 YouTube的影片，並且直接在JW player裡面播放)

畫質/音質切換:
HD (可以讓影片在高品質與低品質之間做切換)

四、Play List 簡介

要特別強調的是，提供播放清單的域名必須與提供播放器源碼即player.swf的域名一致，否則播放清單無法加載，這是Adobe Flash Player包含的一項安全措施。

先依指示格式造播放選單檔，附檔名叫xml，然後在flashvars中設「file=播放選單.xml&playlist=bottom」即可。

xml的編輯，用tab打出長串空白，編碼請用UTF-8，用容部分不要出現以下這些符號 > < " / \ 。

(一)格式總覽

    * ASX feeds (example)
    * ATOM feeds with Media extensions (example)
    * RSS feeds with iTunes (example) extensions and Media extensions (example).
    * Basic SMIL feeds (example)
    * XSPF feeds (example)

各種格式之標籤對照表如下：

JW Player	XSPF	RSS	itunes:	media:	ASX	ATOM
author	creator	(none)	author	credit	author	(none)
date	(none)	pubDate	(none)	(none)	(none)	published
description	annotation	description	summary	description	abstract	summary
duration	duration	(none)	duration	content	duration	(none)
file	location	enclosure	(none)	content	ref	(none)
link	info	link	(none)	(none)	moreinfo	link
image	image	(none)	(none)	thumbnail	(none)	(none)
provider	(none)	(none)	(none)	(none)	(none)	(none)
start	(none)	(none)	(none)	(none)	starttime	(none)
streamer	(none)	(none)	(none)	(none)	(none)	(none)
tags	(none)	category	keywords	keywords	(none)	(none)
title	title	title	(none)	title	title	title

(二)ASX格式

<asx version="3.0">
	<title>Example ASX playlist</title>
	<entry>
		<title>標題</title>
		<abstract>描述</abstract>
		<ref href="媒體位置" />
		<moreinfo href="連結" />
		<param name="image" value="圖片位置" />
		<!-- 以下項目為選用 -->
		<author> (未知) </author>
		<duration>只播放幾秒鐘(這邊請填入數字)</duration>
		<starttime> (未知) </starttime>
		<param name="date" value="日期" />
		<param name="streamer" value=" (未知) " />
		<param name="tags" value="標籤" />
		<param name="date" value=" (未知) " />
	</entry>
</asx>

(三)XSPF格式

<playlist version="1" xmlns="http://xspf.org/ns/0/">
<title>Example XSPF playlist</title>
<tracklist>
	<track>
		<title>第一段影片標題</title>
		<annotation>第一段影片描述</annotation>
		<creator>創作者</creator>
		<info>http://blog.hubert.tw/</info>
		<location>第一個播放檔</location>
		<image>代表圖照</image>
	</track>
	<track>
		<title>第二段影片標題</title>
		<annotation>第二段影片描述</annotation>
		<creator>創作者</creator>
		<info>http://blog.hubert.tw/</info>
		<location>第二個播放檔</location>
		<image>代表圖照</image>
	</track>
</tracklist>
</playlist>

貳、swf 檔播放器

controller.swf為swf動畫的播放器，無法播其他格式的影片(如flv或mp4)，目前已找不到下載點及說明。使用時必須配合配置檔，語法如「controller.swf?csConfigFile=配置檔」。

致命的缺點有兩項：要完全下載完，控制列才能播放；還會和部分的 swf 檔衝突。

配置檔格式為 xml ，範例如下：

<config>
<AutoStart>1或0</AutoStart>
<MovieURL>播放檔</MovieURL>
<MovieWidth>寬度</MovieWidth>
<MovieHeight>高度</MovieHeight>
<ControllerColor>C0C0C0</ControllerColor>
<BackgroundColor>FFFFFF</BackgroundColor>
<TimeDisplayFormat>MM:SS 或 HH:MM:SS</TimeDisplayFormat>
<TimeDisplayFont>Arial</TimeDisplayFont>
<TimeDisplayFontColor>000000</TimeDisplayFontColor>
<ShowElapsedTime>1或0</ShowElapsedTime>
<ShowDuration>1或0</ShowDuration>
<ShowLoadingMov>1或0</ShowLoadingMov>
<LoadingMovURL>某表示載入的swf或空值</LoadingMovURL>
<ScaleLoadingMov>1</ScaleLoadingMov>
<LoadingMovPercentToLoad>50</LoadingMovPercentToLoad>
<LoadingMovMinDuration>3</LoadingMovMinDuration>
<ShowAbout>1</Show About>
<AboutBoxText>某字串或空值</AboutBoxText>
<ShowFFRW>1</ShowFFRW>
</config>

說明如下，()中為預設值：

AutoStart(1):自動播放。
MovieURL():播放檔。
MovieWidth():。
MovieHeight():。
ControllerColor(000000):。
BackgroundColor(FFFFFF):。
TimeDisplayFormat(HHh MMm SSs):。
TimeDisplayFont(Arial):。
TimeDisplayFontColor(000000):。
ShowElapsedTime(0):秀總長。
ShowDuration(0):秀已播長度。
ShowLoadingMov(1):秀載入中。
LoadingMovURL():使用載入中代表影片。
ScaleLoadingMov():表示載入進度尺。
LoadingMovPercentToLoad():表示載入百分比。
LoadingMovMinDuration():載入幾秒長度後開始播放。
ShowAbout(0):在播出尺和最右邊時間框之間出現一個about圖示，按下去會出現影片的URL、大小、畫面總格數。
AboutBoxText():無作用。
ShowFFRW(0):秀出快轉和快退按鈕。

可使用 swfobject.js ，「csConfigFile:'配置檔'」放 flashvars 或 params 中均可，IE、Firefox均可正常顯示。

IE無法使用在網址列直接使用「controller.swf?csConfigFile=配置檔」，也無法在 embed 標籤中用「src=./controller.swf?csConfigFile=配置檔」，必須使用object標籤內嵌「<PARAM NAME="Src" VALUE="./controller.swf?csConfigFile=配置檔">」。

有時 Firefox Embed標籤中的高、寬的長度單位會和配置檔中高、寬的長度單位不一致，此時選「檢視/縮放/重設」，使其重趨一致。