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

列印頁面