【发布时间】：2013-04-11 14:42:04
【问题描述】：
我有一个 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 播放器之上？
更新：我能够解决我的问题，并且也提供了我的解决方案
【问题讨论】：
-
特别是因为您对问题提出了赏金，您应该对答案发表评论，以澄清他们缺少的内容。
-
@MarkFox：实际上，在这个问题上悬赏之后，我就能解决我的问题。这类似于科林给出的答案。我也会发布我的答案。
-
经典问题解决难题。提出问题可以帮助我始终自我解决问题。
-
@MarkFox：是的 :) 我添加了我的解决方案。
标签： youtube flex4 youtube-api flash-builder flex4.6