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:
- The .fla(cs5)
- The class as described above
- The swc for OSMF
- A sample cute video that I found on youtube as an example
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.
No comments:
Post a Comment