Flexを使ったアプリケーションで、大量のビデオにキャプションを表示させたいとき、
flvに埋め込むタイプのキューポイントを使っているとあまりに効率が悪いため、actionscript cuepointで nameとtimeを記述したXMLを読みこんで、cuepoint nameを表示するアプリケーションを作ってみました。
まずはシンプルなアプリケーションでテストしてみる感じで、読み込むXMLも簡単に。
<?xml version="1.0" encoding="UTF-8"?>
<Flv>
<CuePoint time="1.5" name="What is that?" />
<CuePoint time="3" name="I am a dog. Who are you?" />
</Flv>
ソースはこんな感じ。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="hs.send()">
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
import mx.events.CuePointEvent;
import mx.controls.videoClasses.CuePointManager;
[Bindable]
private var cueList:XMLList = new XMLList();
[Bindable]
private var myArr:Array;
private function resultHandler(e:ResultEvent):void{
cueList =e.result.CuePoint;
var myArr:Array = new Array();
for (var i:uint; i<cueList.length(); i++){
myArr.push({name:cueList.@name[i], time:cueList.@time[i]});
}
myArr.forEach(traceArr);
vd.cuePoints = myArr;
vd.source="xxx/xxx.flv";
}
private function traceArr(element:*, index:Number, arr:Array):void{
trace(element.name + element.time);
}
private function cpHandler(e:CuePointEvent):void{
txt.text = e.cuePointName ;
}
]]>
</mx:Script>
<mx:HTTPService id="hs" url="xxx/xxx.xml" result="resultHandler(event)" resultFormat="e4x"/>
<mx:VideoDisplay id="vd" cuePointManagerClass="mx.controls.videoClasses.CuePointManager"
cuePoint="cpHandler(event)"/>
<mx:Text text="" x="10" y="203" width="205" height="62" fontSize="18" color="#000000" fontWeight="bold" id="txt"/>
</mx:Application>
多少装飾していますが、このコードを使ったサンプルが
こちらです。
cuepoint nameだけだとつまらないので、もっと雑多な情報も表示できるモノを作りたいと一応考えています。
