自動輪流播放Flash的FLV視訊檔

自動輪流播放Flash的FLV視訊檔
文∕趙英傑

這是之前在台中恆逸資訊教育訓練中心的ActionScript 3.0課程中,一位學員提出的問題。本文的視訊播放範例將具備以下功能:

  1. 使用XML檔定義視訊播放清單的標題和檔名
  2. 透過List(清單)組件顯示影片清單,並讓使用者點選要觀看的影片。
  3. 自動播放第一個影片並自動輪播(亦即:目前的影片播放完畢後,自動播放下一個)
  4. 採用FLVPlayer(FLV播放器)組件播放.flv視訊檔

Flash視訊播放器的操作介面

建立操作介面元素

建立本文範例影片所需的操作介面的步驟如下:

  1. 從「組件」面版拖放這兩個組件到舞台:FLVPlayback組件(位於Video分類中)以及List組件(在User Interface分類裡面)。
  2. 將FLVPlayback的實體名稱設定成“flvPlayer”。
  3. 把List組件的實體名稱設定成“flvList”。

播放視訊檔的FLVPlayback組件具有預設的控制面版外觀元素(原文為“skin”),手動設定「外觀元素」的步驟方法:

點選舞台上的FLVPlayback實體,再按一下「參數」面版裡的skin欄位,即可從「選取外觀元素」面版挑選各種的控制面版。

選取外觀元素

「外觀元素」其實是外部的.swf影片檔。筆者挑選的外觀元素稱為“SkinOverPlayStopSeekMuteVol.swf”。將來匯出影片時,Flash會自動在影片的相同路徑下,存入此.swf檔。

準備XML文件

底下是筆者自訂的視訊播放清單文件內容。<flv>標籤裡的label屬性記錄視訊檔的標題url屬性記錄.flv視訊檔的名稱

<?xml version="1.0" encoding="utf-8"?>
   <videos>
   <flv label="在台北街頭遇見楊承琳" url="juice_lin.flv" />
   <flv label="Lego Mindstorms機器人" url="mindstorm.flv" />
   <flv label="澳洲國慶日煙火" url="sydney.flv" />
</videos>

此XML文件命名成“video.xml”,和Flash影片檔存放在相同的路徑中。

準備FLV視訊檔

這個範例使用了三個.flv視訊檔,存放在Flash範例影片路徑底下,名叫“videos”的目錄裡面:

存放視訊檔的資料夾

我們最好在程式中設定一個變數存放此路徑名稱,例如:

var videoPath:String = "videos/";

設定FLV播放器組件的參數

FLVPlayback組件的參數面版裡面列舉的參數,都可以透過程式控制,而且面版上的參數名稱就是程式裡的屬性名稱。例如,底下的程式片段將設定音量、「外觀元素」背景色、自動倒帶…等屬性:

// 建立引用FLV播放器的變數
var flv:FLVPlayback = flvPlayer;
// 建立引用清單組件的變數
var list:List = flvList;
// 設定50%的音量
flv.volume = 0.5;
// 當滑鼠游標滑入 / 滑出視訊播放器時,自動顯現 / 隱藏控制面版。
flv.skinAutoHide = true;
// 設定外觀元素的背景色
flv.skinBackgroundColor = 0xFF6600;
// 啟用自動播放功能
flv.autoPlay = true;
// 設定當影片播放完畢後,自動倒帶。
flv.autoRewind = true;

還有一個用於設定「來源檔」(亦即:要播放的視訊檔案)屬性,稱為source。例如,底下的屬性設定將播放位於”videos”路徑裡的sydney.flv檔:

flv.source = videoPath + “sydney.flv”; 

讀取與解析XML文件

底下是讀取video.xml檔的敘述,相關的說明請參閱《碼上就會:Flash CS3動畫設計寶典》書籍第十四章「處理XML與RSS閱讀器製作」。

var xmlLoader:URLLoader = new URLLoader();
xmlLoader.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
xmlLoader.addEventListener(Event.COMPLETE, onXMLLoaded);
xmlLoader.load(new URLRequest("video.xml"));
// 處理XML檔讀取錯誤的情況
function ioErrorHandler(e:IOErrorEvent):void {
   trace("讀取檔案發生錯誤,詳細錯誤訊息:\n" + e.text);
}

依據上面的敘述,當XML檔載入完畢後,程式將呼叫底下的自訂函數開始解析XML:

function onXMLLoaded(e:Event):void {
	// 解析XML
	handleXML(e.target.data);
	// 讀取清單組件裡的第一個選項中的url屬性,指定要播放第一個影片。
	flv.source = videoPath  + list.getItemAt(0).url;
	// 選定清單的第一個項目
   list.selectedIndex = 0;
}

上面程式的最後一行敘述:

list.selectedIndex = 0;

看似可有可無,它的作用是透過程式選定「清單」裡的第一個選項,也就是讓該選項呈現反白的外觀,提供一個視覺回饋給使用者,讓用戶知道目前正在播放的是第一個項目。

負責解析XML檔的自訂函數稱為handleXML

function handleXML(str:String):void {
   try {
       var xml:XML = new XML(str);
       // 指向XML檔的flv元素
       var items:XMLList = xml.flv;
       var total:int = items.length();
       // 取出所有flv元素裡的label和url屬性
       for (var i:int = 0; i < total; i++) {
           var obj:Object = new Object();
           obj.url = items[i].attribute("url");
           obj.label = items[i].attribute("label");
           obj.icon = items[i].attribute("icon");
           // 將此元素加入List(清單)組件並顯示出來
           list.addItem(obj);
       }
   } catch (e:Error) {
       // 若解析XML發生錯誤,在「輸出」面版顯示錯誤訊息。
       trace(e.message);
   }
}

List組件的操作指令和ComboBox(下拉式選單)組件雷同,請參閱14-8頁「用程式設定下拉式選單的選項」一節說明。

處理用戶點選清單的動作

當用戶按一下List組件內容時,它將發出“click”事件。底下的事件偵聽函數將能處理按一下選項的操作,並且令FLV播放器播放該選項所代表的視訊檔。

list.addEventListener(MouseEvent.CLICK, updateFlvURL);
function updateFlvURL(e:MouseEvent):void {
	var url:String;
	// 若用戶確實點選了某個選項…
	if (e.target.data != undefined) {
   	// 讀取被點選的視訊檔名稱(url屬性值)
		url = videoPath  + e.target.data.url;
       // 變更視訊播放器組件的影片來源
       flv.source = url;
    }
}

當用戶在List組件的空白部分按下滑鼠鈕時,該組件的data屬性將傳回undefined(未定義)值。因此,上面的事件處理函數裡的if條件判斷式,將只有在用戶確實點選了List組件裡的實際選項時,才會發生作用。

自動輪播功能

當一段影片播放完畢時,程式將要自動播放下一段影片;如果已經是最後一段影片了,則要重頭開始播放第一段。

偵測影片是否播放完畢,可以透過偵聽底下任一事件來達成:

  • 每當影片播放完畢時,FLV播放組件將發出“complete”(完成)事件(可寫成:VideoEvent.COMPLETE)。
  • 當影片播放完畢並且自動倒帶(auto rewind)時,FLV播放組件將發出"autoRewond"事件(可寫成:VideoEvent.AUTO_REWOUND)。

以偵聽“complete”事件為例,請先在程式碼的開頭,手動引用VideoEvent(視訊事件)類別:

import fl.video.VideoEvent;

底下的事件偵聽函數將在偵聽到“complete”事件時,前往List組件的目前選項的下一個項目,或者回到第一個項目繼續播放。

flv.addEventListener(VideoEvent.COMPLETE, playNextFLV);
/*
上面那一行可以替換成:
flv.addEventListener(VideoEvent.AUTO_REWOUND, playNextFLV);
*/
function playNextFLV(e:VideoEvent):void {
   // 設定播放清單索引,若已經是最後一個,就設定成0。
   var index:int = list.selectedIndex;
   if (index == (list.length -1)) {
   	index = 0;
   } else {
   	index ++;
   }
   // 播放下一段影片
   flv.source = videoPath + list.getItemAt(index).url;
	list.selectedIndex = index;
}

按此連結可下載本文的原始檔與視訊範例檔(註:如果您只是想一睹楊承琳的風采,那麼,請直接觀看這篇文章;澳洲國慶日煙火的影片沒有包含在此下載檔,若有興趣,請看這篇文章)。

Posts created 486

61 thoughts on “自動輪流播放Flash的FLV視訊檔

  1. 請問一下:我要使用您的大作,怎樣才能嵌入到網頁裡面去,需要哪些code?

  2. hi blanse:

    最簡易的方式:使用Dreamweaver或其他網頁編輯軟體,即可輕易將.swf嵌入網頁。

    jeffrey

  3. Cubie:您好!
    首先感謝您的回應!我測試結果如下:
    如果單用html導入您的大作是可以正確show;
    ========================================
    我是希望把您的大作require到我的php程式裡
    可是require後的網頁沒有任何內容
    1.>是否需要在您的flash程式碼中修改path?
    2.>是否需要多ADD一句XML的PATH,
    eg:
    ====================================================
    請指教!

  4. 大哥,謝謝你的教學,十分受用。
    但我有個問題無法克服,我做網頁時放入flash視訊,flv檔,播放正常,但我希望它能重複播放,可惜不會。(並且嘗試了active的程式碼,不通)懇請賜教。謝謝

  5. cubie:
    過了好久的時間了,最終把您的弄上去了,可惜不知道那個’SkinOverPlayStopSeekMuteVol.swf’檔案有甚麼用,現在我的網頁上看不見flvplayer的控制按鈕了?其他播放正常?再次打擾您唷

  6. cubie大大:
    請問SkinOverPlayStopSeekMuteVol.swf需要其他設定嗎?
    我有上傳的唷.是否是我的php程式裡有用smarty,不曉得是不是smarty的問題呢?

  7. 好炫喔!
    我一直想要這樣子!
    謝謝大大的教學!
    雖然有看沒有懂….
    我是Flash 菜鳥@@

  8. 趙老師
    請問像跑馬燈swf檔
    堪入部落格文章內容後
    可經由文章的語法修改跑馬燈文字內容的程式該怎麼寫
    我住屏東flash這方面教學的書不多
    我找遍了每間書局
    都沒有 有關我提問的教學內容
    請趙老師教教我
    或是看有沒有地方提供這方面的fla原檔
    感激不盡:eek:

  9. 還有你flash動畫設計寶典

    你設計的音樂播放器好棒

    我想把它改成發佈為swf檔後

    堪入部落格網頁能經由部落格語法

    就能改變播放器的外載mp3網址

    可是我不知道該怎麼改程式

    才能讓你做的播放器變成可掛載url的播放器

    還必須能經由部落格語法就能改變播放器的url

    同跑馬燈提問或有沒有提供fla原檔的地方

    趙老師你寫的這本flash動畫設計寶典

    說明的好詳細 對於我這個非科班出身的人

    受用好大 我參考別家同類的書我買了好多本

    大都是用專業術語在教學

    對於我這門外漢真是有看沒有很懂

    那麼多本不如你的一本

    希望趙老師以後出的書都能像這樣

    有耐心非常白話文的教學內容

    在此祝老師的一切蒸蒸日上

    感激不盡:eek:

  10. 謝謝你的鼓勵。使用外部文字設定MP3歌曲資訊的說明,請參閱15-23頁的「使用XML設定歌曲列表」一節,你必須要上傳XML文件和MP3檔到網站,才能運作。

  11. 使用外部文字設定跑馬燈內容,我建議使用XML,或者,你也可以採用URLLoader類別載入純文字資料,相關的例子請下載這個範例原始檔。如果需要修改隨機的文字內容。,請編輯randText.txt,把”txt=”後面的文字改掉就好了。

  12. 趙老師:
    使用XML是很方便沒錯,可是如果不把swf檔和XML檔放在同一路徑,
    那這個swf檔,一點作用都沒有,要把swf檔掛載到部落格必須先把swf檔和xml放在同一個網路空間,這個swf播放器才能在部落格發揮作用,
    而我唯一知道有支援上傳swf檔和xml的網路空間只有奇摩地球村,
    之前使用讀取xml的swf在這個網路空間還能正常讀取xml,但不知為何
    奇摩網路空間把開啟xml的功能改成無法開啟xml,又有些部落格只容許特定
    網路空間的掛載,所以我才想用修改部落格語法的方式來達到改變播放器.跑馬燈之類的音樂或文字內容,讀取xml的swf檔在自己電腦是很好用
    但是要上傳到網路上,真是有很多不方變的說。
    順道提問:音樂播放器顯示ID3標籤,輸入中文後播放器的顯示資訊,
    都成了特定的亂碼,想請問老師該怎麼做才能讓他正常顯示中文?

  13. 我沒有試過在免費空間中存放XML文件。至於中文資訊變成亂碼…如果你指的是Flash,可能的原因是外部的文字檔或XML不是用Unicode (UTF-8) 編碼儲存。

  14. @@老師你做的播放器
    顯示ID3標籤
    不是讀取XML檔
    是直接讀取mp3內容
    你太忙望了吧= =

    皇天不負苦心人
    我需要的東西
    我都找到啦
    我現在剩一個難題
    就是把老師的課程結合
    我找到的資料
    創造出不同風格的swf
    在此也謝謝老師在百忙中抽空回答學生的提問︿︿

  15. 請問如果是 自動輪流播放Flash的swf檔該怎麼做,像現在很多swf作的banned下方都有12345的數字按鈕,若user沒按則自己按照順序自動重覆論播,請問那是怎麼作的

  16. 求助趙老師:
    請問我好像不小心停用工具→管理附加元件
    裡面的選項 然後我關掉瀏覽器
    被我不小心停用的附加元件就不見了
    再來你動畫設計寶典光碟內的範列swf
    就無法正常開啟
    請問我該如何補救
    才能正常開啟範列資料夾裡的swf檔?

  17. 你是說IE瀏覽器的設定嗎?
    1. 請選擇「工具→網際網路選項」指令
    2. 點選「程式集」標籤頁
    3. 按下「管理附加元件」按鈕,從面版上的清單點選Flash Object,再按下「啟用」鈕,應該可以解決這問題。

  18. 趙老師:
    我依照你說的方式
    進入這個選項
    但是裡面的附加元件都是啟用的
    而且我沒看到你說的Flash Object
    只有Flash10a.ocx這個,也是顯示啟用
    我有把我的電腦系統還原過
    但是開啟動畫設計寶典的光碟內容裡面的swf檔
    有的開啟變空白
    有的開啟會一閃一閃的
    舉列開啟mp3播放器
    播放器的開始鈕會一下閃成停止鈕,一下閃成開始鈕
    但是我開啟fla原檔按測試影片,輸出在fla檔畫面裡的swf檔能正常顯示
    當我開啟發佈在桌面上的swf檔後,又無法正常開啟了
    我該怎麼補救?

  19. 說錯了一下閃成開始鈕一下閃成暫停鈕
    動態播放音效裡的loop-swf檔
    開啟會變空白的swf檔
    資料夾裡面的其他swf檔
    也都會變成空白或閃個不停?

  20. 雙按.swf無法開啟或者播放情況不符合預期,應該是Flash Player變成啟用舊版的緣故,請在.swf檔上按滑鼠右鍵,選擇「內容」指令,再按下內容設定面版的「設定」按鈕,指定新版的Flash Player。

  21. 哇哈!!
    問題解決了
    難怪一直顯示flash player7
    我還去官網重新下載flash player10
    但是問題一直存在==
    非常感謝老師不怕麻煩的指導
    我還以為我要重灌系統了勒T_T
    又可以繼續鑽研趙老師的書籍內容了︿︿
    我還有一個疑問?
    我另外有買一本flash cs3書籍
    我的疑問是,一樣是swf檔
    但是那本書附贈光碟內容的swf檔
    在我出現跟你求助時的問題
    卻能正常開啟
    難道是2.0和3.0的差別嗎?

  22. 謝謝你的教學,請問我有將面板置換成SkinUnderAllNoCaption.swf,面板上有一個按鈕放到最大,沒有作用,是不是也要寫程式,要寫的話 怎寫,謝謝!

  23. 很厉害的呀
    我以前做一个跟下面Banner类似的FLASH,http://asia.playstation.com/hk/en,问了很多人都搞不定,不知道找老师能否指点一二

  24. 你指的banner是带有垂直滚动导航介面的那一个吗?
    假设你有A, B, C, D四个选项,做出相同效果的最简单方法:

    1. 先替导航条建立一个电影剪辑(影片片段)元件。
    2. 在电影剪辑元件当中放置A, B, C, D四个按钮,A -> B, B -> C,… 等选项之间,设置移动补间动画,产生滚动效果。
    3. 在时间轴上的适当关键幀加入 stop(); 让Flash停在特定画面。
    4. 使用Timer类设定延迟时间并播放导航条的时间轴,即可做出相同的效果了。

    have fun!
    jeffrey

  25. 趙老師:︿︿
    學生又來麻煩你了
    請問我設定一個變數
    例題如下:
    aa=bb
    程式該如何寫才能將bb的內容存入aa後,然後存入aa後的變數前後加”
    比如bb的內容是https://swf.com.tw
    怎樣寫程式才能讓https://swf.com.tw
    變成存入aa後的內容等於 “https://swf.com.tw” 呢?

  26. 用單引號包夾一個雙引號:

    var b:String = “https://swf.com.tw”;
    var a:String = ‘”‘ + b + ‘”‘;

    或者,透過脫逸(escape)字元的方式,在雙引號字元之前加上一個 / (斜線)也行:

    var a:String = “\”” + b + “\””;

    have fun!
    jeffrey

  27. 真是太感謝老師了^^

    我自己研究了3天了找不到答案T_T

    好開心呦!

    我自己寫出來的程式完整的執行了

    還好買的是老師你寫的書,有得問

    如果今天我買的是別家的flash教學書

    我看我一輩子也學不會flash程式了

    謝謝老師^_____^

  28. ㄜ…奇怪了,我第一次把它放到部落格有正常。
    更新網頁後就不跑了,在煩請老師幫我看看那裡出錯。
    下面這段輸出flash後能正常下載到音樂↓
    mysound=new Sound();
    mysound.loadSound(“http://anydude.com/ray/modules/music/files/9.mp3”,true);
    可是我的需求是下面這段程式
    mysound=new Sound();
    a:String='”‘+b+'”‘;
    mysound.loadSound(mp3,true);
    我是把網址存入b在指定給a。
    但是為何這樣做程式跑不動,
    老師是我那裡出錯嗎?

  29. mp3=a我沒修改到= =
    更正如下↓
    mysound=new Sound();
    a:String=’”‘+b+’”‘;
    mysound.loadSound(a,true);

  30. 字串資料本身,並不需要特地加上雙引號,除非文字內容本身包含雙引號。這是ActionScript 3.0的語法,提供你參考:

    var mySound:Sound = new Sound();
    var mp3File:String = “http://anydude.com/ray/modules/music/files/9.mp3”;
    var req:URLRequest = new URLRequest(mp3File);
    mySound.load(req);
    mySound.play();

  31. 老師你說的ActionScript 3.0語法
    在你的書中第十五章有教學,這個我知道↓
    var mySound:Sound = new Sound();
    var mp3File:String = “http://anydude.com/ray/modules/music/files/9.mp3″;
    var url:URLRequest = new URLRequest(mp3File);
    mySound.load(url);
    mySound.play();
    我現在的問題出在我要把http://anydude.com/ray/modules/music/files/9.mp3
    存入var mp3File:String 的時候不會出現前後包夾的雙引號→”
    因為要存入var mp3File:String 的網址
    是由flashvars這個flash和網頁聯繫的語法而來
    所以當flashvars這個語法把網址傳給flash的時候並不會包涵雙引號
    網址前後沒雙引號當載入new URLRequest(mp3File);的時候
    變成new URLRequest(http://anydude.com/ray/modules/music/files/9.mp3)
    前後沒雙引號包夾,這程式自然跑不動了。
    我該怎麼做才能讓網址前後加入雙引號呢?
    老師你應該知道flashvars這個語法吧
    flashvars=變數=”http://anydude.com/ray/modules/music/files/9.mp3″
    當網址從網頁傳給變數的時候他只會傳進去網址但是不會包涵雙引號。
    老師你應該知道flashvars這個網頁和flash之間傳遞的語法吧。
    我不太會表達= =希望老師懂我的意思。

  32. 我瞭解你的意思,你表達得很好。
    當你透過HTML傳遞資料給Flash時,該文字資料就是字串類型,所以不必特意加上雙引號。

  33. 可是老師HTML傳給Flash的時候
    傳進來就只是沒有前後包夾雙引號的網址
    當這網址傳給new URLRequest(mp3File);
    的時候變成這樣new URLRequest(http://anydude.com/ray/modules/music/files/9.mp3);
    這樣程式還是跑不動,我的問題又回到原點了==
    我試過用一個動態文字來觀察HTML傳進來的網址
    傳進來只是顯示網址http://anydude.com/ray/modules/music/files/9.mp3
    前後是不包含雙引號傳進Flash的
    可否請老師教教我該怎麼做才能讓程式能正確執行︿︿

  34. 我用下面老師教我的語法方式,照道理應該可以正確執行程式
    但是不知道怎樣,網頁上的Flash就是無法正確執行
    var mySound:Sound = new Sound();
    var mp3File:String =’ ” ‘ +dd+ ‘ ” ‘;
    var url:URLRequest = new URLRequest(mp3File);
    mySound.load(url);
    mySound.play();

  35. 添加雙引號和不加雙引號的語法我都試過了

    沒有一個程式能在我把flash放到網頁後能正確執行的

    還煩請老師幫我查明問題所在︿︿

  36. 這次真是沒問題了︿︿
    老師親自寫的程式就可正確執行了
    學生我只有國中畢業的學識程度
    麻煩了老師很多地方
    謝謝老師你不吝賜教
    讓學生又對Flash有更多的認識
    也更加深我對Flash程式的興趣︿︿

  37. 老師您好
    看到您這篇文章
    覺得十分佩服
    小的沒有任何程式的底子
    不過非常想學flash
    若看《碼上就會:Flash CS3動畫設計寶典》也能看得懂嗎?

  38. 你好!最近在做播放器 搜索到了你的站点 下了你的源码 可我用flash8打开提示遇到意外的文件格式,不知道你是用哪个版本写的,我想看看详细的源码 谢谢

  39. 你好~你有試過用fms 串流嗎
    如果播完這上一首,到下一頁時,可以進行快轉換下一首吧
    ,會出現無法seek的問題

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top