Flex - VideoPlayer 控件

更新于 2025/1/4 9:52:17

简介

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

类声明

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

public class VideoPlayer
    extends SkinnableComponent

公共属性

Sr.No	属性 &描述
1	autoDisplayFirstFrame : Boolean 如果 autoPlay = false，则 autoDisplayFirstFrame 控制在设置源时是否加载视频。
2	autoPlay : Boolean 指定在设置源属性时是否立即开始播放视频。
3	autoRewind : Boolean 指定 FLV 文件在播放停止时是否应倒回到第一帧(通过调用 stop() 方法或到达结尾)流。
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 播放器 flash.media.Video 对象。
16	volume : Number 音量级别，指定为 0 到 1 之间的值。

公共方法

Sr.No	方法 &描述
1	VideoPlayer() 构造函数。
2	pause():void 暂停播放而不移动播放头。
3	play():void 播放视频。
4	seek(time:Number):void 在视频。
5	stop():void 停止视频播放。

受保护的方法

Sr.No	方法和说明
1	formatTimeValue(value:Number):String 将以秒为单位指定的时间值格式化为用于 currentTime 和持续时间的字符串。

事件

Sr.No	方法 &描述
1	bytesLoadedChange 在下载操作进行过程中收到数据时分派。
2	complete 在播放头达到可播放媒体的持续时间时分派。
3	currentTimeChange 在 MediaPlayer 的 currentTime 属性发生更改时分派。
4	durationChange 在持续时间媒体的属性已更改。
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 VideoPlayer 控件示例

让我们按照以下步骤通过创建测试应用程序 − 来检查 Flex 应用程序中 VideoPlayer 控件的使用情况 −

步骤	描述
1	按照Flex - 创建应用程序一章中的说明，在com.tutorialspoint.client包下创建一个名为HelloWorld的项目。
2	将文件夹video添加到src文件夹。并将示例视频添加到其中。
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 - 创建应用程序一章中一样，以正常模式编译并运行应用程序。如果您的应用程序一切正常，它将产生以下结果:[ 在线试用 ]