- 浏览: 99497 次
- 性别:
- 来自: 大连
文章分类
最新评论
Flex4中增加了一个视频播放组件:VideoPlayer,相信很多朋友已经在使用了,确实比原先方便很多(记得在Flex3的时候,我们还需要借用Flash IDE带的视频播放组件)。它的功能确实也足以覆盖我们大部分的一般性的需求。如果您有一些自定义的需求,比如需要自定义播放器的全屏行为,就要了解VideoPlayer的一些内部逻辑。
首先,VideoPlayer是支持全屏播放的,注意播放器的右下角有一个控制全屏状态的按钮,点击之后,视频就进入全屏状态,而播放条会位于稍微靠底部的位置,并且过一段时间后就会自动隐藏。再次点击全屏按钮,或按ESC键,即可退出全屏状态,恢复之前的默认状态。这是默认情况下,VideoPlayer的全屏行为。
如果我们为播放器实现了一个字幕显示功能,那么进入全屏状态后,如何把字幕也显示出来呢?来看一下具体的代码实现:
首先,要实现字幕功能,我们必然要对VideoPlayer的功能进行扩展。基于优先使用组合,而不是继承的建议,我们没有直接继承VideoPlayer,而是使用了Group,内部包含一个VideoPlayer和一个Text组件,Text组件显然是用来显示字幕的,它会叠加在VideoPlayer之上。
<s:VideoPlayer id="vplayer" width="100%" height="100%" currentTimeChange="timeChangeHander(event)" complete="vplayerCompleteHandler(event)" skinClass="com.riameeting.skin.RIAPlayerSkin"/>
<mx:Text id="captionText" width="100%" bottom="24"
textAlign="center" text="{currentCaption}"
filters="{[dropFilter]}"
selectable="false"
fontWeight="bold" color="#FFFFFF"
fontSize.normal="{model.captionFontSize}"
fontSize.fullScreen="{model.captionFontSizeFullScreen}"
/>
假设我们已经完成了字幕的解析和显示功能,那么在正常情况下,字幕播放是正常的,但是一旦进入全屏状态,我们就会发现字幕没有显示出来。因为显然用于显示字幕的Text组件在VideoPlayer之外。所以我们还需要做一些额外的工作,来把字幕显示也加入到VideoPlayer的全屏显示界面里面。
因为VideoPlayer也是基于皮肤机制的,所以我们需要为它指定一个自定义的皮肤(注意控制全屏的按钮,是在皮肤里面存在的),然后我们就可以控制全屏按钮的行为,禁用它的默认行为,并派发一个事件给我们的组件,这样我们的组件就可以在接受到事件之后,完成我们自定义的全屏代码的控制工作。代码里面我们直接注视掉了原先的按钮,增加一个显示和原先一致的新按钮,注意ID是不同的。
<!--
<s:Button id="fullScreenButton" right="0" bottom="0" label="Fullscreen"
skinClass="spark.skins.spark.mediaClasses.normal.FullScreenButtonSkin"
skinClass.fullScreenStates="spark.skins.spark.mediaClasses.fullScreen.FullScreenButtonSkin"
focusIn="event.target.depth=1" focusOut="event.target.depth=0"/>
-->
<s:Button id="fullScreenButtonImp1" right="0" bottom="0" label="Fullscreen"
skinClass="spark.skins.spark.mediaClasses.normal.FullScreenButtonSkin"
skinClass.fullScreenStates="spark.skins.spark.mediaClasses.fullScreen.FullScreenButtonSkin"
focusIn="event.target.depth=1" focusOut="event.target.depth=0" click="dispatchEvent(new Event('videoFullScreen',true))"/>
注意它派发了一个"videoFullScreen"的事件,并且是冒泡的,所以会被我们的组件接收到。然后我们就可以自定义播放器的全屏行为了。参见下面的代码片段,这段代码参阅了VideoPlayer自身的代码,并针对需求进行了一些改动。注意它的全屏控制,并不是简单的设置stage.displayState,还需要用PopUpManager将组件自身添加到最顶层显示,并将尺寸放大到全屏尺寸(之所以要这样实施,是因为如果用stage.fullScreenSourceRect属性,简单的定义全屏显示区域的话,播放器本身的UI会在放大后出现明显的锯齿,显示非常丑陋)。代码我大体上进行了注释,如下:
private var beforeFullScreenInfo:Object;
/**
* 全屏按钮被点击后,执行的事件侦听方法
*/
protected function fullScreenButtonHandler(event:Event):void
{
//判断状态,如果是全屏,就退出全屏,否则进入全屏
if(stage.displayState == StageDisplayState.FULL_SCREEN) {
//注意这个设置会触发fullScreenEventHandler,返回初始状态,将组件归位
stage.displayState = StageDisplayState.NORMAL;
} else {
var screenBounds:Rectangle = new Rectangle(0,0,stage.fullScreenWidth,stage.fullScreenHeight);
//这里要记录下当前组件的一些数据,用于返回初始状态的时候,将组件设置到原先的状态
beforeFullScreenInfo = {parent: this.parent,
x: this.x,
y: this.y,
explicitWidth: this.explicitWidth,
explicitHeight: this.explicitHeight,
percentWidth: this.percentWidth,
percentHeight: this.percentHeight,
isPopUp: this.isPopUp};
//获取组件在原先的父级上的索引
if (parent is IVisualElementContainer){
var ivec:IVisualElementContainer = IVisualElementContainer(parent);
beforeFullScreenInfo.childIndex = ivec.getElementIndex(this);
ivec.removeElement(this);
}else{
beforeFullScreenInfo.childIndex = parent.getChildIndex(this);
parent.removeChild(this);
}
//用PopUp机制,将组件添加到最上层显示
PopUpManager.addPopUp(this, FlexGlobals.topLevelApplication as DisplayObject, false, null, moduleFactory);
//设置组件的尺寸,匹配全屏下屏幕的尺寸
setLayoutBoundsSize(screenBounds.width, screenBounds.height, true);
this.explicitWidth = width;
this.explicitHeight = height;
setLayoutBoundsPosition(0, 0, true);
this.validateNow();
systemManager.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenEventHandler);
stage.displayState = StageDisplayState.FULL_SCREEN;
currentState = "fullScreen";
}
}
/**
* 屏幕状态切换的时候,触发的事件侦听方法
*/
private function fullScreenEventHandler(event:FullScreenEvent):void
{
//只判断状态从全屏进入普通模式的情况
if(event.fullScreen) return;
currentState = "";
systemManager.stage.removeEventListener(FullScreenEvent.FULL_SCREEN, fullScreenEventHandler);
//根据之前记录的数据,将组件归位
this.x = beforeFullScreenInfo.x;
this.y = beforeFullScreenInfo.y;
this.explicitWidth = beforeFullScreenInfo.explicitWidth;
this.explicitHeight = beforeFullScreenInfo.explicitHeight;
this.percentWidth = beforeFullScreenInfo.percentWidth;
this.percentHeight = beforeFullScreenInfo.percentHeight;
if (!beforeFullScreenInfo.isPopUp){
// remove from top level application:
PopUpManager.removePopUp(this);
// add back to original parent
if (beforeFullScreenInfo.parent is IVisualElementContainer)
beforeFullScreenInfo.parent.addElementAt(this, beforeFullScreenInfo.childIndex);
else
beforeFullScreenInfo.parent.addChildAt(this, beforeFullScreenInfo.childIndex);
}
beforeFullScreenInfo = null;
invalidateSize();
invalidateDisplayList();
}
首先,VideoPlayer是支持全屏播放的,注意播放器的右下角有一个控制全屏状态的按钮,点击之后,视频就进入全屏状态,而播放条会位于稍微靠底部的位置,并且过一段时间后就会自动隐藏。再次点击全屏按钮,或按ESC键,即可退出全屏状态,恢复之前的默认状态。这是默认情况下,VideoPlayer的全屏行为。
如果我们为播放器实现了一个字幕显示功能,那么进入全屏状态后,如何把字幕也显示出来呢?来看一下具体的代码实现:
首先,要实现字幕功能,我们必然要对VideoPlayer的功能进行扩展。基于优先使用组合,而不是继承的建议,我们没有直接继承VideoPlayer,而是使用了Group,内部包含一个VideoPlayer和一个Text组件,Text组件显然是用来显示字幕的,它会叠加在VideoPlayer之上。
<s:VideoPlayer id="vplayer" width="100%" height="100%" currentTimeChange="timeChangeHander(event)" complete="vplayerCompleteHandler(event)" skinClass="com.riameeting.skin.RIAPlayerSkin"/>
<mx:Text id="captionText" width="100%" bottom="24"
textAlign="center" text="{currentCaption}"
filters="{[dropFilter]}"
selectable="false"
fontWeight="bold" color="#FFFFFF"
fontSize.normal="{model.captionFontSize}"
fontSize.fullScreen="{model.captionFontSizeFullScreen}"
/>
假设我们已经完成了字幕的解析和显示功能,那么在正常情况下,字幕播放是正常的,但是一旦进入全屏状态,我们就会发现字幕没有显示出来。因为显然用于显示字幕的Text组件在VideoPlayer之外。所以我们还需要做一些额外的工作,来把字幕显示也加入到VideoPlayer的全屏显示界面里面。
因为VideoPlayer也是基于皮肤机制的,所以我们需要为它指定一个自定义的皮肤(注意控制全屏的按钮,是在皮肤里面存在的),然后我们就可以控制全屏按钮的行为,禁用它的默认行为,并派发一个事件给我们的组件,这样我们的组件就可以在接受到事件之后,完成我们自定义的全屏代码的控制工作。代码里面我们直接注视掉了原先的按钮,增加一个显示和原先一致的新按钮,注意ID是不同的。
<!--
<s:Button id="fullScreenButton" right="0" bottom="0" label="Fullscreen"
skinClass="spark.skins.spark.mediaClasses.normal.FullScreenButtonSkin"
skinClass.fullScreenStates="spark.skins.spark.mediaClasses.fullScreen.FullScreenButtonSkin"
focusIn="event.target.depth=1" focusOut="event.target.depth=0"/>
-->
<s:Button id="fullScreenButtonImp1" right="0" bottom="0" label="Fullscreen"
skinClass="spark.skins.spark.mediaClasses.normal.FullScreenButtonSkin"
skinClass.fullScreenStates="spark.skins.spark.mediaClasses.fullScreen.FullScreenButtonSkin"
focusIn="event.target.depth=1" focusOut="event.target.depth=0" click="dispatchEvent(new Event('videoFullScreen',true))"/>
注意它派发了一个"videoFullScreen"的事件,并且是冒泡的,所以会被我们的组件接收到。然后我们就可以自定义播放器的全屏行为了。参见下面的代码片段,这段代码参阅了VideoPlayer自身的代码,并针对需求进行了一些改动。注意它的全屏控制,并不是简单的设置stage.displayState,还需要用PopUpManager将组件自身添加到最顶层显示,并将尺寸放大到全屏尺寸(之所以要这样实施,是因为如果用stage.fullScreenSourceRect属性,简单的定义全屏显示区域的话,播放器本身的UI会在放大后出现明显的锯齿,显示非常丑陋)。代码我大体上进行了注释,如下:
private var beforeFullScreenInfo:Object;
/**
* 全屏按钮被点击后,执行的事件侦听方法
*/
protected function fullScreenButtonHandler(event:Event):void
{
//判断状态,如果是全屏,就退出全屏,否则进入全屏
if(stage.displayState == StageDisplayState.FULL_SCREEN) {
//注意这个设置会触发fullScreenEventHandler,返回初始状态,将组件归位
stage.displayState = StageDisplayState.NORMAL;
} else {
var screenBounds:Rectangle = new Rectangle(0,0,stage.fullScreenWidth,stage.fullScreenHeight);
//这里要记录下当前组件的一些数据,用于返回初始状态的时候,将组件设置到原先的状态
beforeFullScreenInfo = {parent: this.parent,
x: this.x,
y: this.y,
explicitWidth: this.explicitWidth,
explicitHeight: this.explicitHeight,
percentWidth: this.percentWidth,
percentHeight: this.percentHeight,
isPopUp: this.isPopUp};
//获取组件在原先的父级上的索引
if (parent is IVisualElementContainer){
var ivec:IVisualElementContainer = IVisualElementContainer(parent);
beforeFullScreenInfo.childIndex = ivec.getElementIndex(this);
ivec.removeElement(this);
}else{
beforeFullScreenInfo.childIndex = parent.getChildIndex(this);
parent.removeChild(this);
}
//用PopUp机制,将组件添加到最上层显示
PopUpManager.addPopUp(this, FlexGlobals.topLevelApplication as DisplayObject, false, null, moduleFactory);
//设置组件的尺寸,匹配全屏下屏幕的尺寸
setLayoutBoundsSize(screenBounds.width, screenBounds.height, true);
this.explicitWidth = width;
this.explicitHeight = height;
setLayoutBoundsPosition(0, 0, true);
this.validateNow();
systemManager.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenEventHandler);
stage.displayState = StageDisplayState.FULL_SCREEN;
currentState = "fullScreen";
}
}
/**
* 屏幕状态切换的时候,触发的事件侦听方法
*/
private function fullScreenEventHandler(event:FullScreenEvent):void
{
//只判断状态从全屏进入普通模式的情况
if(event.fullScreen) return;
currentState = "";
systemManager.stage.removeEventListener(FullScreenEvent.FULL_SCREEN, fullScreenEventHandler);
//根据之前记录的数据,将组件归位
this.x = beforeFullScreenInfo.x;
this.y = beforeFullScreenInfo.y;
this.explicitWidth = beforeFullScreenInfo.explicitWidth;
this.explicitHeight = beforeFullScreenInfo.explicitHeight;
this.percentWidth = beforeFullScreenInfo.percentWidth;
this.percentHeight = beforeFullScreenInfo.percentHeight;
if (!beforeFullScreenInfo.isPopUp){
// remove from top level application:
PopUpManager.removePopUp(this);
// add back to original parent
if (beforeFullScreenInfo.parent is IVisualElementContainer)
beforeFullScreenInfo.parent.addElementAt(this, beforeFullScreenInfo.childIndex);
else
beforeFullScreenInfo.parent.addChildAt(this, beforeFullScreenInfo.childIndex);
}
beforeFullScreenInfo = null;
invalidateSize();
invalidateDisplayList();
}
发表评论
-
Adobe Flash Builder 4.6破解方法
2012-12-16 20:08 7C:\Program Files (x86)\Adobe\Ad ... -
FluorineFx 配置支持纯AS3工程!
2012-11-30 13:45 0FluorineFx 配置支持纯AS3工程! 由于自己用的纯 ... -
Flex中ArrayCollection的复制
2012-11-30 13:39 0lex中ArrayCollection的复制 2011- ... -
Flex的array和arrayCollection的应用实例
2012-11-30 13:34 0ArrayCollection是flex中的数组集合类,它是很 ... -
Flex air 中调用com组件的方法
2012-11-30 11:45 0air中直接调用com组件是很难做到的,但我们可以通过Fl ... -
FluorineFx 之 DateFeed,既服务端的数据推送服务
2012-11-30 11:29 0在开发如股票客户端的软件,客户端的数据在实时刷新,是由于服务端 ... -
收藏 flex+fluorinefx+asp.net c#后台如何接收arraycollection 并转换处理
2012-11-30 11:25 0flex,在.NET环境下通过FluorineFx传送Arra ... -
特殊符号收集大全
2012-11-27 19:06 875愛心符號 愛心符號怎 ... -
TextFormat设置中文字体font属性注意的问题
2012-11-27 19:05 2369如果要设置的字体为中文名称,则一定要使用对应的英文名称来设置才 ... -
flex国际化的问题
2012-11-27 18:52 6981、如果是简单项目,一般采用的是类似struts的bundle ... -
flex textfield中文字体
2012-11-27 17:14 923由于flex的图文混排总是有问题,而且效率实在有点低。所以最近 ... -
FLEX如何设置发光字体
2012-11-27 16:35 673<mx:Text id="bulletin&q ... -
Flex实现全屏源代码示例
2012-11-12 10:18 579stage.displayState = (stage.dis ... -
Flex+java+spring 上传和下载文件AIR
2012-11-09 10:50 811什么都别说附上代码 UploadFile.java ... -
FluorineFX初学者之最初配置 Flex4与.NET结合 .
2012-11-09 09:43 862FluorineFX整个架构和BlazeDs差不多,只是最开始 ... -
Flex 绑定/双向绑定
2012-11-08 11:39 6431.什么是数据绑定? Data binding is ... -
Flex ArrayCollection 之排序
2012-11-07 15:59 650利用ArrayCollection的sort属性 & ... -
Flex读取xml文件
2012-11-07 13:12 550<?xml version="1.0& ... -
FLEX中使用FLVPlayback控件
2012-11-07 08:58 784即swc文件的导入,使用问题. FLVPlaybackAS ... -
VideoPlayer
2012-11-06 15:59 1979/** * VERSION: 1.0 * DATE: 20 ...
相关推荐
Flex CSS简介 Flex 使用MXML设置样式 Flex 使用ActionScript设置样式 Flex 样式的继承与叠加 Flex 主题的使用 Flex 自定义皮肤 Flex 应用皮肤
Flex 4.5 实现tree拖拽到任意组建 拖到tree datagrid中并得到目标的全部数据实现添加组建
Flex 4.5''中文资料
flex4.5中文书籍,书中介绍了flex4.5移动开发,主要讲解了Iphone和Android上的Air开发及配置
Flex Builder4.5导入Excel和CSV文件到DataGrid中,并自定义DataGrid选中行的右键
Flex4.5 + Myeclipse8.5 安装 本人已安装成功,flex4.5注册码也附上,只是myeclipse被汉化了,目前还未解决
flex4.5d sdk哦, 现在比较难找了啊 啊
Flex 4.5 API 开发文档(网页版)
Flex 4.5注册码,破解码
flex4.5 从浅入深 第一章 可视化组件.pdf 第二章 布局组件.pdf,初学者的福音。
flex4.5 权威指南(含源码)英文版
FLEX4.5注册机,破解 Flash Builder 4.5工具类,里面有使用说明文档,先看下说明文档,然后在使用注册机就搞定破解了。 一整套破解方案可行
flex4.5自定义组件介绍,自定义组件前提条件
Flex4.5从浅入深+第一章可视化组件运用+第一节butto
flex4.5+spring3+hibernate的项目实例,登录实例
《flex4.5从浅入深》第一(全16节)、二章(5节),清晰版
Flex4.5 UI布局与组件应用_Layout
通过Flex4.5+As3实现的3D网页效果展示墙,主要实现了波纹+发光效果墙,视频播放效果墙,3D进门出门效果展示墙,3D鱼眼发光效果展示墙。实现了目前主要的特效,方便学习。可以自行添加翻书效果等
Flex4.5之DataGrid表格组件的运用,从建立,到属性设置,自定义设置皮肤,很详细