注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

gmd20的个人空间

// 编程和生活

 
 
 

日志

 
 

原来flash 播放器是这样制作的啊(Flex3 在线帮助文档)  

2008-11-05 10:09:57|  分类: 程序设计 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

VideoDisplay control

Flex supports the VideoDisplay control to incorporate streaming media into Flex applications. Flex supports the Flash Video File (FLV) file format with this control.

Using media in Flex

Media, such as movie and audio clips, are used more and more to provide information to web users. As a result, you need to provide users with a way to stream the media, and then control it. The following examples are usage scenarios for media controls:

  • Showing a video message from the CEO of your company
  • Streaming movies or movie previews
  • Streaming songs or song snippets
  • Providing learning material in the form of media

The Flex streaming VideoDisplay control makes it easy to incorporate streaming media into Flash presentations. Flex supports the Flash Video File (FLV) file format with this control. You can use this control with video and audio data. When you use the VideoDisplay control by itself, your application provides no mechanism for its users to control the media files.

Note: The VideoDisplay control does not support scan forward and scan backward functionality. Also, the VideoDisplay control does not support accessibility or styles.

About the VideoDisplay control

Flex creates a VideoDisplay control with no visible user interface. It is simply a control to hold and play media.

Note: The user cannot see anything unless some video media is playing.

The playheadTime property of the control holds the current position of the playhead in the video file, measured in seconds. Most events dispatched by the control include the playhead position in the associated event object. One use of the playhead position is to dispatch an event when the video file reaches a specific position. For more information, see Adding a cue point.

The VideoDisplay control also supports the volume property. This property takes a value from 0.0 to 1.00; 0.0 is mute and 1.00 is the maximum volume. The default value is 0.75.

Setting the size of a media component

The appearance of any video media playing in a VideoDisplay control is affected by the following properties:

  • maintainAspectRatio
  • height
  • width

When you set maintainAspectRatio to true (the default), the control adjusts the size of the playing media after the control size has been set. The size of the media is set to maintain its aspect ratio.

If you omit both width and height properties for the control, Flex makes the control the size of the playing media. If you specify only one property, and the maintainAspectRatio property is false, the size of the playing media determines the value of the other property. If the maintainAspectRatio property is true, the media retains its aspect ratio when resizing.

The following example creates a VideoDisplay control:

<?xml version="1.0"?><!-- controls\videodisplay\VideoDisplaySimple.mxml --><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">    <mx:VBox>        <mx:VideoDisplay             source="../assets/MyVideo.flv"            height="250"             width="250"        />    </mx:VBox></mx:Application>

The executing SWF file for the previous example is shown below:

By default, Flex sizes the VideoDisplay control to the size of the media. If you specify the width or height property of the control, and either is smaller than the media's dimensions, Flex does not change the size of the component. Instead, Flex sizes the media to fit within the component. If the control's playback area is smaller than the default size of the media, Flex shrinks the media to fit inside the control.

Using methods of the VideoDisplay control

You can use the following methods of the VideoDisplay control in your application: close(), load(), pause(), play(), and stop(). The following example uses the pause() and play() methods in event listener for two Button controls to pause or play an FLV file:

<?xml version="1.0"?><!-- controls\videodisplay\VideoDisplayStopPlay.mxml --><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"     creationComplete="myVid.pause();">    <mx:VBox>        <mx:VideoDisplay id="myVid"             source="../assets/MyVideo.flv"            height="250"             width="250"        />        <mx:HBox>            <mx:Button label="||" click="myVid.pause();"/>            <mx:Button label="&gt;" click="myVid.play();"/>                 </mx:HBox>    </mx:VBox></mx:Application>

The executing SWF file for the previous example is shown below:

Adding a cue point

You can use cue points to trigger events when the playback of your media reaches a specified location. To use cue points, you set the cuePointManagerClass property to mx.controls.videoClasses.CuePointManager to enable cue point management, and then pass an Array of cue points to the cuePoints property of the VideoDisplay control. Each element of the Array contains two fields. The name field contains an arbitrary name of the cue point. The time field contains the playhead location, in seconds, of the VideoDisplay control with which the cue point is associated.

When the playhead of the VideoDisplay control reaches a cue point, it dispatches a cuePoint event, as the following example shows:

<?xml version="1.0"?><!-- controls\videodisplay\VideoDisplayCP.mxml --><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"     creationComplete="myVid.pause();">    <mx:Script>        <![CDATA[            import mx.events.CuePointEvent;            import mx.controls.videoClasses.CuePointManager;            private function cpHandler(event:CuePointEvent):void {                cp.text+="Got to " + event.cuePointName + " cuepoint @ " +                     String(event.cuePointTime) + " seconds in.\n";            }        ]]>    </mx:Script>    <mx:VBox>        <mx:VideoDisplay id="myVid"                      source="../assets/MyVideo.flv"            cuePointManager            cuePoint="cpHandler(event);"            height="250"             width="250"        >            <mx:cuePoints>                <mx:Object name="first" time="5"/>                <mx:Object name="second" time="10"/>            </mx:cuePoints>        </mx:VideoDisplay>        <mx:Label text="{myVid.playheadTime}"/>        <mx:TextArea id="cp" height="100" width="250"/>    </mx:VBox>    <mx:HBox>        <mx:Button label="||" click="myVid.pause();"/>        <mx:Button label="&gt;" click="myVid.play();"/>             </mx:HBox></mx:Application>

The executing SWF file for the previous example is shown below:

In this example, the event listener writes a String to the TextArea control when the control reaches a cue point. The String contains the name and time of the cue point.

Adding a cue point by using the CuePointManager class

You can set cue points for the VideoDisplay control by using the cuePointManager property. This property is of type CuePointManager, where the CuePointManager class defines methods that you use to programmatically manipulate cue points, as the following example shows:

<?xml version="1.0"?><!-- controls\videodisplay\VideoDisplayCPManager.mxml --><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="myVid.pause();">    <mx:Script>        <![CDATA[            import mx.events.CuePointEvent;            [Bindable]            private var myCuePoints:Array = [                { name: "first", time: 5},                { name: "second", time: 10}             ];                                   // Set cue points using methods of the CuePointManager class.            private function initCP():void {                myVid.cuePointManager.setCuePoints(myCuePoints);            }            private var currentCP:Object=new Object();            private function cpHandler(event:CuePointEvent):void {                cp.text += "Got to " + event.cuePointName + " cuepoint @ " +                     String(event.cuePointTime) + " seconds in.\n";                // Remove cue point.                currentCP.name=event.cuePointName;                currentCP.time=event.cuePointTime;                myVid.cuePointManager.removeCuePoint(currentCP);                // Display the number of remaining cue points.                 cp.text += "# cue points remaining: " +                     String(myVid.cuePointManager.getCuePoints().length) + ".\n";             }        ]]>    </mx:Script>    <mx:VBox>        <mx:VideoDisplay id="myVid"             cuePointManager            source="../assets/MyVideo.flv"            cuePoint="cpHandler(event);"            height="250"             width="250"        />        <mx:Label text="{myVid.playheadTime}"/>        <mx:TextArea id="cp" height="100" width="250"/>    </mx:VBox>    <mx:HBox>        <mx:Button label="&gt;" click="cp.text='';initCP();myVid.play();"/>             </mx:HBox></mx:Application>

The executing SWF file for the previous example is shown below:

Streaming video from a camera

You can use the VideoDisplay.attachCamera() method to configure the control to display a video stream from a camera, as the following example shows:

<?xml version="1.0"?><!-- controls\videodisplay\VideoDisplayCamera.mxml --><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">    <mx:Script>        <![CDATA[                // Define a variable of type Camera.            import flash.media.Camera;            public var cam:Camera;            public function initCamera():void {                // Initialize the variable.                cam = Camera.getCamera();                myVid.attachCamera(cam)            }        ]]>    </mx:Script>      <mx:VideoDisplay id="myVid"         width="320" height="240"         creationComplete="initCamera();"/></mx:Application>

The executing SWF file for the previous example is shown below:

In this example, you create a Camera object in the event handler for the creationComplete event of the VideoDisplay control, then pass the Camera object as the argument to the attachCamera() method.

Using the VideoDisplay control with Flash Media Server 2

You can use the VideoDisplay control to import a media stream from Adobe® Flash® Media Server 2, as the following example shows:

<?xml version="1.0"?><!-- controls\videodisplay\VideoDisplayFMS.mxml --><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">    <mx:HBox>        <mx:Label text="RTMP FMS 2.0"/>        <mx:VideoDisplay             autoBandWidthDetection="false"             source="rtmp://localhost/videodisplay/bike.flv"/>    </mx:HBox></mx:Application>

In this example, you place the bike.flv file in the directory Flash Media Server 2\applications\videodisplay\streams\_definst_.

Notice that you explicitly set the autoBandWidthDetection property to false, its default value. When the autoBandWidthDetection property is true, you must create the server-side file main.asc in the directory Flash Media Server 2\applications\videodisplay\scripts, which implements the following functions:

application.onConnect = function(p_client, p_autoSenseBW) {}application.calculateClientBw = function(p_client) {}Client.prototype.getStreamLength = function(p_streamName) {}

The following example shows an implementation of main.asc:

application.onConnect = function(p_client, p_autoSenseBW) {    //Add security code here.    this.acceptConnection(p_client);    if (p_autoSenseBW)        this.calculateClientBw(p_client);    else        p_client.call("onBWDone");}Client.prototype.getStreamLength = function(p_streamName) {    return Stream.length(p_streamName);}application.calculateClientBw = function(p_client) {    // Add code to set the clients BandWidth.    // Use p_client.getStats() which returns bytes_in     // and bytes_Out and check your bandWidth using     // p_client.call("onBWCheck", result, p_client.payload).    p_client.call("onBWDone");}

For more information on main.asc, see the Flash Media Server 2 documentation.

Specifying the AMF version for Flash Media Server

When you read from or write to a NetConnection, NetStream, or SharedObject object as binary data, the objectEncoding property of the object indicates which Action Message Format (AMF) version to use: the ActionScript 3.0 format or the ActionScript 1.0 or ActionScript 2.0 format. The possible values of the objectEncoding property include the following:

AMF0

Objects are serialized by using the AMF format for ActionScript 1.0 and 2.0.



AMF3

Objects are serialized by using the AMF format for ActionScript 3.0.



DEFAULT

Objects are serialized by using the default format for your version of Flash Player.



All versions of Flash Media Server use the AMF0 encoding. Therefore, Flex applications must set the objectEncoding property of all NetConnection and SharedObject objects used with Flash Media Server to AMF0. For NetStream, the objectEncoding property is read only. Any FAP connections or RTMP connections to your own server can use AMF3.

Previous
Next

  评论这张
 
阅读(686)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017