在Flex中利用NetConnection, NetStream和Video类显示video文件

By Minidxer | March 2, 2008

下面的例子说明了利用NetConnection, NetStream和Video类，如何在Flex应用中显示一个FLV文件，以及如何使用onMetaData和onCuePoint事件处理视频数据(video meta data)和提示点(cue points)。

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- http://blog.flexexamples.com/2008/03/01/displaying-a-video-in-flex-using-the-netconnection-netstream-and-video-classes/ -->
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white"
  7.         creationComplete="init();" viewSourceURL="srcview/index.html">
  8.  
  9.     <mx:Script>
  10.         <![CDATA[
  11.             import mx.utils.ObjectUtil;
  12.  
  13.             private var nc:NetConnection;
  14.             private var ns:NetStream;
  15.             private var video:Video;
  16.             private var meta:Object;
  17.  
  18.             private function init():void {
  19.                 var nsClient:Object = {};
  20.                 nsClient.onMetaData = ns_onMetaData;
  21.                 nsClient.onCuePoint = ns_onCuePoint; 
  22.  
  23.                 nc = new NetConnection();
  24.                 nc.connect(null);
  25.  
  26.                 ns = new NetStream(nc);
  27.                 ns.play("http://www.helpexamples.com/flash/video/cuepoints.flv");
  28.                 ns.client = nsClient;
  29.  
  30.                 video = new Video();
  31.                 video.attachNetStream(ns);
  32.                 uic.addChild(video);
  33.             }
  34.  
  35.             private function ns_onMetaData(item:Object):void {
  36.                 trace("meta");
  37.                 meta = item;
  38.                 // Resize Video object to same size as meta data.
  39.                 video.width = item.width;
  40.                 video.height = item.height;
  41.                 // Resize UIComponent to same size as Video object.
  42.                 uic.width = video.width;
  43.                 uic.height = video.height;
  44.                 panel.title = "framerate: " + item.framerate;
  45.                 panel.visible = true;
  46.                 trace(ObjectUtil.toString(item));
  47.             }
  48.  
  49.             private function ns_onCuePoint(item:Object):void {
  50.                 trace("cue");
  51.             }
  52.         ]]>
  53.     </mx:Script>
  54.  
  55.     <mx:Panel id="panel" visible="false">
  56.         <mx:UIComponent id="uic" />
  57.         <mx:ControlBar>
  58.             <mx:Button label="Play/Pause" click="ns.togglePause();" />
  59.             <mx:Button label="Rewind" click="ns.seek(0); ns.pause();" />
  60.         </mx:ControlBar>
  61.     </mx:Panel>
  62.  
  63. </mx:Application>

实际运行效果请看原文。

原文作者：Peter deHaan　　翻译：minidxer
Resource:

Streaming video  Check out Top YouTube videos with most amazing video clips on Earth.
Web Development Services  Netbois Consulting is specialized in web development, web design contributions, web content management system (CMS Joomla, SPIP).

Topics: Flex | Tags: , , , , ,

Related Post

One comment | Add One

  1. dcju - 09/22/2008 at 4:14 pm

    挺好。。支持一下

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Recent Posts

Blogroll

Sponsored Ads