Flex3でスライドバーでビデオをシークする処理について、
職場でちょっと聞かれたので、サンプルを作ってみました。
*ちょっと修正しました。
前にバンドのHP用に作ったFLVを使いました、動きのないビデオでごめんなさい…。
音声は出るのでそちらで動画が移動しているのをご確認いただけると思います…。
ロード完了後に「再生」ボタンで再生です。
せっかくなので、SliderのSkinに、自作画像を重ねたものも使いました。
重ねた画像はこちらです。45秒でかきました。
↓ 以下詳細、プロジェクトファイル等です。
プロジェクトファイルはこちら。
FLVファイルは含まれていません。
一応アップ→ bandplay.flv
Flex3のVideoDisplayコンポーネントは、動画をロードする機能も備えています。
sourceプロパティで、読み込む動画ファイルのパスを指定し、
load() を呼ぶだけで動画を読み込むことが可能です。
- video.source = "bandPlay.flv";
- video.load();
あとは互いのコンポーネントのイベントによって、
ビデオの再生ヘッドや、スライダーのボタンの位置を変更することで、
簡単な動画プレイヤーを作成することができます。
↓VideoDisplayのplayheadUpdateイベントで、Sliderのボタン位置を変更する。
- private function videoOnPlayHeadUpdate(event:VideoEvent):void{
- this.slider.value = event.playheadTime;
- this.slider2.value = event.playheadTime;
- }
＊追記
VideoDisplayのreadyイベント時に、
ビデオの最大長、totalTimeは必ずセットされているわけではないようです。
なので、ビデオの再生ヘッドが変わるたびにSliderの最大長も更新してあげます。
- //修正後
- private function videoOnPlayHeadUpdate(event:VideoEvent):void{
- this.slider.maximum = this.video.totalTime;
- this.slider2.maximum = this.video.totalTime;
- this.slider.value = event.playheadTime;
- this.slider2.value = event.playheadTime;
- }
↓Sliderのchangeイベントで、VideoDisplayの再生ヘッドを変更する
- private function sliderChangeHandler(event:SliderEvent):void{
- this.video.playheadTime = event.value;
- }
これで互いの位置を反映することが可能となりました。
今回はHSliderを継承し、
見た目のスキンを変更したMySliderというクラスも作ってみました。
シークバーのボタンは自動的に小さくしてくれるみたいですね。
というかサイズはスタイルでは返られないようです。
↓MySliderクラス スライドバーの部分と、スライドするボタンの部分を変更しているだけです。
- package
- {
- import mx.controls.HSlider;
- public class MyHSlider extends HSlider
- {
- // skin 変更用にpngをインクルード
- [Embed(source = "slidebar.png")]
- private var slidebar:Class;
- [Embed(source = "slide_button.png")]
- private var slidesum:Class;
- public function MyHSlider()
- {
- super();
- // スキンの変更
- this.setStyle("thumbSkin", slidesum);
- this.setStyle("trackSkin", slidebar);
- }
- }
- }
その他設定できるオプションについてはリファレンスで確認できます。
→ http://livedocs.adobe.com/flex/3_jp/langref/mx/controls/sliderClasses/Slider.html
- Newer: テスト投稿
- Older: Google ストリートビューで鬼ごっこ
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://parpue.net/web/267/trackback
- Listed below are links to weblogs that reference
- Flex3のSliderにスキン適用してビデオシーク from parpue.net
