Wednesday, May 25, 2011

Have you ever tried OSMF to create your videoplayer?



Intro
As I remember myself from the first steps of my career I am developing every year a new video player. The reason behind this loop is the different challenges every year. I am always trying to create a reusable videoplayer that can come through every expectation that you or your employer-client may have.

The challenge
So I was thinking of all those mobiles that (thank god!! and android) support flash. (btw I stopped eating apples..) So what I have seen is that videoplayback that I've been using the last years is "heavy" for a mobile and video seems to be choppy/laggy at some points. So I needed a player that can play with a more lightweight style. And I wanted to be fast! So I digged in the back of my mind and remembered Adobe's OSMF.

The Code
What you need to initiate a player for videos using OSMF is a class the following:
1:    package com.sotirisbk.videoplayer  
2:    {  
3:      import flash.display.MovieClip;  
4:      import flash.events.Event;  
5:      import flash.display.StageDisplayState;  
6:      import org.osmf.containers.MediaContainer;  
7:      import org.osmf.events.MediaPlayerStateChangeEvent;  
8:      import org.osmf.media.DefaultMediaFactory;  
9:      import org.osmf.media.MediaElement;  
10:      import org.osmf.media.MediaFactory;  
11:      import org.osmf.media.MediaPlayer;  
12:      import org.osmf.media.MediaPlayerSprite;  
13:      import org.osmf.media.MediaType;  
14:      import org.osmf.media.URLResource;  
15:      import org.osmf.layout.ScaleMode;  
16:      /**  
17:       * Demo of OSMF videoplayer  
18:       * @author Sotiris Boukouvalas  
19:       */  
20:      public class SimpleOSMFVideoPlayer extends MovieClip  
21:      {  
22:        private var container:MediaContainer;  
23:        private var mediaFactory:MediaFactory  
24:        private var resource:URLResource;  
25:        private var mediaElement:MediaElement;  
26:        public var mediaPlayer:MediaPlayer;  
27:        private var mediaPlayerSprite:MediaPlayerSprite;  
28:        private var _width:Number;  
29:        private var _height:Number;  
30:        public function SimpleOSMFVideoPlayer(link:String , width:int , height:int , autoplay:Boolean = false)  
31:        {  
32:          this._width = width;  
33:          this._height = height;  
34:          this.addEventListener(Event.ADDED_TO_STAGE, _onAddToStage );  
35:          container = new MediaContainer();  
36:          this.addChild(container);  
37:          mediaFactory = new DefaultMediaFactory();  
38:          resource = new URLResource(link);  
39:          resource.mediaType = MediaType.VIDEO;  
40:          mediaElement = mediaFactory.createMediaElement(resource);  
41:          container.addMediaElement(mediaElement);  
42:          mediaPlayerSprite = new MediaPlayerSprite();        
43:          mediaPlayer = mediaPlayerSprite.mediaPlayer;  
44:          mediaPlayer.media = mediaElement;  
45:          mediaPlayerSprite.scaleMode = ScaleMode.LETTERBOX;  //change this if you wish different behaviour of aspect ratio  
46:          this.addChild(mediaPlayerSprite);  
47:          mediaPlayerSprite.width = width;  
48:          mediaPlayerSprite.height = height;  
49:          mediaPlayer.addEventListener(MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE , _onmplayerStateChange);  
50:          mediaPlayer.autoPlay = autoplay;  
51:          if (!autoplay) mediaPlayer.stop();  
52:        }  
53:        private function _onmplayerStateChange(evt:MediaPlayerStateChangeEvent):void {  
54:          trace("State Change :: " + evt.state );  
55:        }  
56:        private function _onAddToStage(evt:Event):void {  
57:          this.stage.addEventListener(Event.RESIZE , _onStageResize);  
58:        }  
59:        private function _onStageResize(evt:Event) {  
60:          if (this.stage.displayState == StageDisplayState.NORMAL) {  
61:            mediaPlayerSprite.width = this._width;  
62:            mediaPlayerSprite.height = this._height;  
63:          }  
64:          else if (this.stage.displayState == StageDisplayState.FULL_SCREEN) {    //if you later add fullscreen controls this could me useful  
65:            mediaPlayerSprite.width = stage.stageWidth;  
66:            mediaPlayerSprite.height = stage.stageHeight;  
67:          }  
68:        }  
69:      }  
70:    }  
So now simply initiate the player inside your fla like this:

1:  import flash.display.MovieClip;  
2:  import com.sotirisbk.videoplayer.SimpleOSMFVideoPlayer;  
3:  var videoplayer:SimpleOSMFVideoPlayer;  
4:  videoplayer = new SimpleOSMFVideoPlayer("Surprised_Kitty_Original.flv", 960 , 540, true);  
5:  this.addChild(videoplayer);  

And that's all for your basic player. Of course I did not add any controls which could be your second part of work in order to complete your player.

The Files
Feel free to download and use the above code. For this reason I added them on rapidshare. download OSMF_Test_Player.rar
The rar contains:
  1. The .fla(cs5)
  2. The class as described above
  3. The swc for OSMF
  4. A sample cute video that I found on youtube as an example
Easy enough huh? Next time I am going to add a control's bar so you can handle your video easily. Any feedback is welcome and let me know if you need anything else on that part.
If you try to upload the videoplayer on the web and use your android you will notice that the performance of the video is very nice. I 've tested it with Samsung Galaxy Tab and my sister's Samsung Galaxy i5500.
Please try it your self by visiting this page or using the QR code below.
qrcode

No comments:

Post a Comment