Flex - 视频播放器控件

介绍

视频控件支持播放 FLV 和 F4v 文件。此控件包含一个功能齐全的 UI，用于控制视频播放。

类声明

以下是spark.components.VideoPlayer类的声明：

public class VideoPlayer 
   extends SkinnableComponent

公共属性

序号	属性及描述
1	autoDisplayFirstFrame : Boolean 如果 autoPlay = false，则 autoDisplayFirstFrame 控制在设置源时是否加载视频。
2	autoPlay : Boolean 指定设置 source 属性后视频是否立即开始播放。
3	autoRewind : Boolean 指定播放停止时（通过调用 stop() 方法或到达流的末尾）FLV 文件是否应倒回第一帧。
4	bytesLoaded : Number [只读] 已下载到应用程序中的数据字节数。
5	bytesTotal : Number [只读] 下载到应用程序中的数据的总大小（以字节为单位）。
6	currentTime : Number [只读] 播放头的当前时间（以秒为单位），从视频开始播放算起。
7	duration : Number [只读] 视频播放的持续时间（以秒为单位）。
8	loop : Boolean 指示媒体播放完成后是否应再次播放。
9	mediaPlayerState : String [只读] 视频的当前状态。
10	muted : Boolean 设置为 true 可将视频静音，设置为 false 可取消静音。
11	pauseWhenHidden : Boolean 控制视频在“隐藏”时是否继续播放。
12	playing : Boolean [只读] 如果视频正在播放或正在尝试播放，则包含 true。
13	scaleMode : String scaleMode 属性描述了调整视频内容大小的不同方法。
14	source : Object 视频源。
15	videoObject : Video [只读] 底层的 flash player flash.media.Video 对象。
16	volume : Number 音量级别，指定为 0 到 1 之间的值。

公共方法

序号	方法及描述
1	VideoPlayer() 构造函数。
2	pause():void 暂停播放而不移动播放头。
3	play():void 使视频播放。
4	seek(time:Number):void 跳转到视频中的给定时间。
5	stop():void 停止视频播放。

受保护的方法

序号	方法及描述
1	formatTimeValue(value:Number):String 将以秒为单位指定的时间值格式化为用于 currentTime 和 duration 的字符串。

事件

序号	方法及描述
1	bytesLoadedChange 在下载操作进行过程中接收到数据时调度。
2	complete 播放头到达可播放媒体的持续时间时调度。
3	currentTimeChange MediaPlayer 的 currentTime 属性更改时调度。
4	durationChange 媒体的 duration 属性更改时调度。
5	mediaPlayerStateChange MediaPlayer 的状态更改时调度。

继承的方法

此类继承自以下类的方法：

spark.components.supportClasses.SkinnableComponent
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Flex 视频播放器控件示例

让我们按照以下步骤检查在 Flex 应用程序中使用 VideoPlayer 控件的情况，方法是创建一个测试应用程序：

步骤	描述
1	如“Flex - 创建应用程序”一章所述，在包com.tutorialspoint.client下创建一个名为HelloWorld的项目。
2	向src文件夹添加一个名为video的文件夹。并将示例视频添加到其中。
3	修改HelloWorld.mxml，如下所述。保持其余文件不变。
4	编译并运行应用程序，以确保业务逻辑按要求运行。

以下是将视频嵌入 Flex 应用程序的方法。

<s:VideoPlayer source = "video/just for laugh magic trick.flv"
   width = "350" height = "250" loop = "true" />

以下是修改后的 mxml 文件src/com.tutorialspoint/HelloWorld.mxml的内容。

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "library://ns.adobe.com/flex/spark"
   xmlns:mx = "library://ns.adobe.com/flex/mx
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />	   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer" 
      styleName = "container">
      
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Complex Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
            
            <s:Panel id = "videoPlayerPanel" title = "Using VideoPlayer" 
               width = "500" height = "300" >
               <s:layout>
                  <s:HorizontalLayout  gap = "10" verticalAlign = "middle" 
                     horizontalAlign = "center" />	
               </s:layout>				
               
               <s:VideoPlayer source = "video/just for laugh magic trick.flv"
                  width = "350" height = "250" loop = "true" />				
            </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

完成所有更改后，让我们像在Flex - 创建应用程序章节中那样，在普通模式下编译并运行应用程序。如果应用程序一切正常，它将产生以下结果：[ 在线试用 ]

flex_complex_controls.htm

打印页面