MXコントロールVideoDisplayを使ったflvの再生
November 6, 2009 – 2:24 pm半年前に、「Red5の利用：SWFでつまずいてしまった、しばらく作業を中断」を書いた。それ以来、ActionScriptの学習を中断していた。ここらで再開ということで、手始めに、MXコントロールのVideoDisplayを使ってflvファイルを再生する例をWeb上で見つけたので試した。このエントリーは、そのときメモしたもの。
作成した動画プレイヤーのサンプルを以下に示した。この例、基本的には、Web上で見つけた「FlexでFLVプレイヤーを作ってみました」のソースをダウンロードさせてもらい、Flexでコンパイル、作成したものだ。
画面上の「Play」ボタンを押すと、RED5のサンプルに含まれていた動画(IronMan.flv)が再生される。試してみていただきたい。
動画プレイヤーの貼り付けはJavaScriptライブラリ swfobjectを用いており、具体的には、次のような形式で今回作成したFlashファイル(swf)を、このポスト上に埋め込んでいる。（以前のエントリー「Red5の利用：Flashファイルの作成とWPポスト上への埋め込み」に詳細を記述）
<script type="text/javascript" src="/scripts/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("/movies/Video.swf","myContent","400","300","9.0.0",
"expressInstall.swf");
</script>
<div id="myContent"></div>
ソースファイルを最後に添付しておく。なお、swf生成にあたっては、このソース（Video.mxml）を
mxmlc Video.mxml
という形式でコンパイルした(flex3 sdkを使用)。
Video.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" layout="absolute">
<mx:VideoDisplay x="0" y="0" width="400" height="300" source="/movies/IronMan.flv" id="vd" autoPlay="false" />
<mx:Button label="Play" click="vd.play();" y="275" x="10"/>
<mx:Button label="Pause" click="vd.pause();" x="66" y="275"/>
<mx:Button label="Stop" click="vd.stop();" x="132" y="275"/>
<mx:HSlider id="hs"
width="200"
liveDragging="true"
showTrackHighlight="true"
maximum="{vd.totalTime}"
minimum="0"
change="{ if(vd.stateResponsive) vd.playheadTime = hs.value }"
value="{vd.playheadTime}"
y="273" x="190" height="20"
/>
<mx:VSlider id="hsvol"
width="20"
liveDragging="true"
showTrackHighlight="true"
maximum="1"
minimum="0"
change="{ if(vd.stateResponsive) vd.volume = hsvol.value }"
value="{vd.volume}"
height="60"
snapInterval="0.01"
x="370" y="220"
themeColor="#ff0000"
/>
</mx:Application>
1 Trackback(s)