「 http://www.youtube.com/apiplayer?version=3&modestbranding=1 」URLを使用してYouTubeクラウドAPIを初期化し、ビデオをフルスクリーンで再生するViewコンポーネントがあります。の下に再生、一時停止、進行状況バーがありますが、「巻き戻し」、「再生/一時停止」、「進む」、およびインタラクティブな進行状況バーをクロムレスプレーヤー自体の上に配置しようとしています(同じ画像ボタンのある透明なポップアップ)、下の画像のように。
s:actionContent
YouTube API を初期化する My View コンポーネントにはアイテムがありません。s:actionContent
(ポップアップを試すために削除されました)
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="YoutubeVideoPlay" viewActivate="init()" >
<fx:Script source="YoutubePlayer.as"/>
<fx:Script>
<![CDATA[
//navigator.addEventListener(TouchEvent.TOUCH_BEGIN,showPlayerControl); How to add a event listener on the youtube player?
public function showPlayerControl():void{
PopUpManager.addPopUp(PlayerControls,player);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:View>
ユーザーが再生中のビデオをタップしたときに、このポップアップ マネージャーがクロムレス プレーヤーの上に表示されるようにするには、ヘルプが必要です。
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" width="400" height="300">
<fx:Script source="../YoutubePlayer.as"/>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
global
{
modal-transparency: 0.0;
modal-transparency-color: white;
modal-transparency-blur: 0;
}
</fx:Style>
<fx:Script>
<![CDATA[
import mx.managers.PopUpManager;
/*[Bindable][Embed(source="view/assets/images/play32.png")]
public static var iconPlay : Class;*/
[Bindable][Embed(source="view/assets/images/pause32.png")]
public static var iconPause : Class;
[Bindable][Embed(source="view/assets/images/forward32.png")]
public static var iconForward : Class;
[Bindable][Embed(source="view/assets/images/rewind32.png")]
public static var iconRewind : Class;
//addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE,removePlayerControls);
/*private function removePlayerControls(event:FlexMouseEvent):void {
PopUpManager.removePopUp(this);
}*/
public function closeAndBackup():void {
dispose();
navigator.popView();
}
public function initAndPlay():void {
player.playVideo();
}
private var _duration:String = "";
[Bindable]
public function get duration():String {
return _duration;
}
public function set duration(val:String):void {
_duration = val;
}
protected function ytVideoSlider_changeHandler(event:Event):void
{
// TODO Auto-generated method stub
trace(event.currentTarget.value);
player.seekTo(event.currentTarget.value,true);
}
]]>
</fx:Script>
<s:VGroup>
<s:HGroup>
<s:layout>
<s:HorizontalLayout paddingTop="10" paddingLeft="10"/>
</s:layout>
<s:HSlider id="ytVideoSlider"
liveDragging="true"
dataTipPrecision="1"
maximum="{duration}"
change="ytVideoSlider_changeHandler(event)"/>
<s:Label text="{Math.round(ytVideoSlider.value)}"/>
</s:HGroup>
<s:Button icon="{iconRewind}" click="player.playVideo()"/>
<s:Button icon="{iconPause}" click="player.pauseVideo()"/>
<s:Button icon="{iconForward}" click="closeAndBackup()"/>
</s:VGroup>
</s:Panel>
どんな助けでも大歓迎です。:)
私は Flash Builder の spark コンポーネントを使い始めたばかりなので、質問が不十分でしたらご容赦ください。
または、クロムレス YouTube プレーヤーの上にプレーヤー コントロールを配置するためのリンク/チュートリアルはありますか?
更新:問題を解決でき、解決策も提供しました