我有一个 View 组件，它使用“ http://www.youtube.com/apiplayer?version=3&modestbranding=1 ” url 初始化youtube cloud api并全屏播放视频。它有播放、暂停和进度条，但我试图将“倒带”、“播放/暂停”、“前进”和交互式进度条放在无铬播放器本身的顶部（带有相同图像按钮的透明弹出窗口)，如下图所示。
s:actionContent
初始化 youtube api 的我的视图组件没有任何项目。（删除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 播放器之上？
更新：我能够解决我的问题，并提供了我的解决方案
