Flex [original] video playback solution for iOS (iPhone/iPad)

Flex4.6 [original] video playback solution for iOS (iPhone/iPad)

 

The flex video class is incompatible with the iOS operating system for video playback. How can we call the idea of calling the IOS source player?

The competition between HTML5 and flex is said. This time, the HTML5 video tag is used to play videos in iOS, because the Safari browser in IOS automatically calls out the source player when parsing the video tag on the HTML5 page, believe that you are smart.

Environment: flex4.6

1: The first thing flex needs to do is to load the HTML5 page in the mobile project.

Flex encapsulates a container for loading HTML5 (html5video. mxml)

View code

<? XML version = "1.0" encoding = "UTF-8"?> <! -- Videoplayer depend on HTML5 ====================================== Explain:  This  Is a stagewebview object looad HTML5 with a videoplayercode by: yaoyf --> <S: skinnablecontainer xmlns: FX = "http://ns.adobe.com/mxml/2009" Xmlns: S = "Library: // ns.adobe.com/flex/spark" Backgroundcolor = "0 xeeeeee" Width = "100%" Height = "100%" Addedtostage = "Calllater (addedtostagehandler)"> <FX: SCRIPT> <! [CDATA [  Import  Flash. utils. setTimeout;  Import  MX. Events. flexevent;  /**  This is a stagewebview *  */              Private  VaR webview: stagewebview;  /**  The video's URL *  */ [Bindable]  Public  VaR videourl: string;  Private VaR isshow: Boolean = True  ;  Private  VaR rect: rectangle;  Protected Function addedtostagehandler (): Void  {Webview = New Stagewebview (); webview. Stage = This  . Stage; webview. addeventlistener (locationchangeevent. location_change, onlocationchange); webview. addeventlistener (event. complete, oncomplete); webview. addeventlistener (errorevent. error, onerror); webview. loadurl (videourl );}  Protected Function oncomplete (Event: Event ): Void  {Trace ( "Oncomplete:" + Event );}  Protected Function onerror (Event: errorevent ): Void  {Trace (event. Text );}  Protected Function onlocationchange (Event: Event ): Void  {Trace ( "Url located:" + Videourl );  If  (Isshow) {webview. viewport = Rect;} isshow = False ;}  Public Function redrawrectangle (_ x: Number, _ y: Number, _ width: Number, _ Height: number ): Void  {Rect = Null  ; Drawrectangle (_ x, _ y, _ width, _ height );  If (! Webview) Return  ; Webview. viewport = Rect ;}  Private Function drawrectangle (_ x: Number, _ y: Number, _ width: Number, _ Height: number ): Void  {Rect = New  Rectangle (_ x, _ y, _ width, _ height);}] > </FX: SCRIPT> <FX: declarations> </S: skinnablecontainer>

 

2: first view: transmits the video URL, listens to the screen turning event, and processes it (sample_videoview.mxml)

View code

<? XML version = "1.0" encoding = "UTF-8"?> <S: View xmlns: FX = "http://ns.adobe.com/mxml/2009" Xmlns: S = "Library: // ns.adobe.com/flex/spark" Title = "Video" backgroundcolor = "0x030303" Xmlns: Video = "Views. Video. *" actionbarvisible = "true" Addedtostage = "Calllater (addedtostagehandler)"> <FX: declarations> </FX: declarations> <FX: SCRIPT> <! [CDATA [  Import  MX. Events. flexevent;  Import  Views. Video. html5video; [Bindable]  Public VaR vdourl: String = "http: // 10.4.6.117: 8080/Video/video. jsp? Videourl00002.mp4" ;  Private Function onorientationchange (Event: stageorientationevent ): Void  {  This  . Orientationchanged (event. afterorientation );}  Protected Function addedtostagehandler (): Void  {Stage. addeventlistener (stageorientationevent. orientation_change, onorientationchange ); This  . Orientationchanged (stage. Orientation );}  Private Function orientationchanged (orientation: string ): Void  {Html5_video.redrawrectangle ( 0, This . Actionbarvisible = True ? 45: 0, This . Width, This  . Height) ;}]] > </FX: SCRIPT> <video: html5video id = "html5_video" videourl = "{vdourl}" horizontalcenter = "0" verticalcenter = "0"/> </s: view>

 

3: deploy a JSP page to Tomcat

JSP pageCode:( Video. jsp)

View code

<! Doctype HTML> Body {margin-Top: 10%; Color: # eeeeee ;}</Style> Your browser does not support the video tag.</Video> </center> </body>  
 
 
 

 
Deployment:
 

 
 

 
My local request address: http: // 10.4.6.117: 8080/Video/video. jsp? Videourl00002.mp4
 

First use a browser that supports HTML5 (Google Chrome, etc)
 

 
 

 
 
 

 
Finally, package the flex project to the iOS device (I tested it on iPad)
 

 
 
 

 
Source code: http://files.cnblogs.com/loveFlex/Sample_Video.rar
 

 
 
 

 
Thank you for your support ~
 

 
 
 

<! Doctype HTML> Body {margin-Top: 10%; Color: # eeeeee ;}</Style> Your browser does not support the video tag.</Video> </center> </body>