12.1.3 自定义播放界面

　　下面的代码创建了一个简单的自定义界面，展示了如何利用代码创建按钮，并通过事件响应机制，根据用户的鼠标操作控制视频的播放：

(1)首先创建视频播放对象：

import fl.video.*;

 

//创建FLVPlayback对象

var myfp:FLVPlayback= new FLVPlayback();

 

//载入外部文件

myfp.load("flv/flvdata.flv");

myfp.x=0;

myfp.y=20;

(2)创建按钮，作为播放控制元件。

//正常状态

var btnShape:Shape=new Shape();

         btnShape.graphics.beginFill(0x22CCFF，0.8);

         btnShape.graphics.drawCircle(20，20，20); //绘制圆

         btnShape.graphics.endFill();

 

//鼠标悬停状态

var btnShape_over:Shape=new Shape();

         btnShape_over.graphics.beginFill(0xCCFF22，1);

         btnShape_over.graphics.drawCircle(20，20，20);           //绘制圆

         btnShape_over.graphics.endFill();

 

//创建按钮

var flvplay:SimpleButton=new SimpleButton(btnShape，btnShape_over，btnShape，btnShape);

flvplay.x=30;

flvplay.y=220;

(3)创建按钮，作为暂停控制元件。

//新建形状

//使用该形状担任按钮的正常状态

var btnShape2:Shape=new Shape();

btnShape2.graphics.beginFill(0x22CCFF，0.8);

btnShape2.graphics.drawCircle(20，20，20);         //绘制圆

btnShape2.graphics.endFill();

 

//悬停状态

var btnShape_over2:Shape=new Shape();

btnShape_over2.graphics.beginFill(0xCCFF22，1);

btnShape_over2.graphics.drawCircle(20，20，20);        //绘制圆

btnShape_over2.graphics.endFill();

 

//创建按钮，按钮的三种状态和点击测试区

var flvpause:SimpleButton=new SimpleButton(btnShape2，btnShape_over2，btnShape2，btnShape2);

//屏幕位置

flvpause.x=130;

flvpause.y=220;

(4)为创建的两个按钮添加响应鼠标单击的事件侦听器。

flvplay.addEventListener(MouseEvent.CLICK，handleflv);

flvpause.addEventListener(MouseEvent.CLICK，handleflv);

(5)事件侦听器。根据事件对象的目标属性(target)判断用户单击了哪一个按钮，并调用FLVPlayback对象的相应控制方法。

function handleflv(jia:MouseEvent):void {

         if (jia.target==flvplay) {

                   //开始播放

                   myfp.play();

         } else if (jia.target==flvpause) {

                   //停止播放

                   myfp.pause();

         }

}

读者可以自行添加其他控制，例如停止，快进等。

(6)修改显示列表，将控制按钮和视频播放器对象顺序装入舞台显示列表。

var flvbox:Sprite=new Sprite();

//构建子显示列表

         flvbox.addChild(myfp);

         flvbox.addChild(flvplay);

         flvbox.addChild(flvpause);

 

//将flvbox对象加入舞台显示

addChild(flvbox);

执行此程序，可以看到视频对象上出现两个圆形按钮，通过单击按钮，可以控制视频的播放和暂停。这只是一个简单的示范，为了创建美观的视频播放器，需要添加更多功能，例如进度条、全屏、播放列表等。