0

Flex4でカスタムビデオプレーヤーを作成しています。

YouTubeビデオプレーヤーと同じように、3つのレイヤーを持つカスタムシークバーを作成する必要があります。最初のレイヤーは背景、2番目のレイヤーはダウンロードの進行状況、3番目のレイヤーは経過したビデオです。シークバーもクリック可能です。

Flex4でそのようなコンポーネントを作成するにはどうすればよいですか。

4

1 に答える 1

2

残念ながら、組み込みのScrubBarクラスにこの機能があるとは思わないので、（そのクラスに追加するよりも）自分で作成する方がよいでしょう。

これを行うには、グループに基づいて新しいMXMLコンポーネントを作成します。そのコンポーネント内には、4つのものが必要です。バー/背景用の3つの長方形と、再生ヘッド用の楕円（または別の長方形または必要なもの）です。それらを互いに重ねます。背景の四角形を100％の高さと幅に設定し、他の2つはちょうど100％の高さに設定します。

ここで、セクションを作成し、変更を処理するAS3を作成します。これは私が個人的に行う方法ですが、必ずしもあなたがそれをしなければならない方法ではないことに注意してください。たとえば、ほとんどの人がゲッターセッターの使用に眉をひそめることは知っていますが、これはそのための絶好の機会だと思います。

private var _progress:Number; //0-1
private var _download:Number; //0-1

public function set progress(value:Number):void{
    this._progress = value;
    this.progressBar.percentWidth = value * 100;
    this.playhead.x = value * this.width - this.playhead.width / 2;
    this.dispatchEvent(new Event(Event.PROGRESS)); //this line is optional and you would be better suited creating your own VideoEvent class to handle events across the entire player rather than using the built in events.
}

public function get progress():Number{
    return this._progress;
}

public function set download(value:Number):void{
    this._download = value;
    this.downloadBar.percentWidth = value * 100;
}

public function get download():Number{
    return this._download;
}

明らかに、それは単なる基本です。さらに詳しく調べて、機能を追加することもできます。たとえば、再生ヘッドをスクラブしたり、プログレスバーをクリックしてシークしたりする機能はありません。どちらも比較的簡単に実装できますが、イベントをディスパッチして、他のクラスからこれらのことが発生したことを確認できるようにしてください。

次に、Video Controlsクラスから、scrubbarクラスのプロパティprogressとプロパティをVideoDisplayまたはNetStreamイベントに関連付ける必要があります。downloadこれを行うには、Progressとバッファーの変更をリッスンするeventListenersを使用する方に追加するだけです（VideoDisplayに何を使用するかはわかりませんが、NetStreamの場合は、NetStatus.STATUSをリッスンしてバッファーやその他の機能を取得する必要があります。残念ながら、進行状況をリッスンするタイマーを作成します）。それぞれの関数で、適切なプロパティをVideoDisplayまたはNetStreamオブジェクトが提供する値に設定するだけです（NetStreamの場合、現在の時刻はns.time、ダウンロードはns.bytesLoaded）。

私はあなたがしなければならないことをざっと見ただけですが、これはうまくいけば、これに取り組むための十分なアイデアをあなたに与えるはずです。

于 2012-09-18T16:22:25.100 に答える