OSMF Strobe Media Player into Flex Mobile Project (Hero)

I have worked with Strobe media player before and it is a nice player with many features and allows a great level of customization if done properly.

So I’ll explain how to import the Strobe Media player into your Mobile Flex builder Projects successfully and create a dynamic Stream with it.

First Download Strobe Media Player: http://sourceforge.net/projects/smp.adobe/files/ (currently I work with 1.5.1)

Export the contents into a folder.

Create a new Mobile Project on Flash/Flex Builder

Copy from the Strobe Media player folder the “src/player/StrobeMediaPlayback/src” and from the same folder the “/assets” folder

Also copy from “/StrobeMediaPlayback_1.5.1-full/src/framework” the OSMF.swc

and place them on the src folder of your project. Refresh the folder tree from Flash/Flex builder.

Place the OSMF.swc into your lib folder.

Now on to some Configurations:

On the Project/Properties

On Build Path/Library Path add the assets.swc from the assets folder

On Compiler arguments add: -define CONFIG::LOGGING false -define CONFIG::FLASH_10_1 true

 

At last Coding time!

Create a new View component, open a fx:Script tag and enter the following:
[cc lang=”actionscript” width=”480″ height=”500″]
import mx.core.UIComponent;

import spark.components.Button;
import spark.components.Group;

public var $playerInstance:StrobeMediaPlayback;
var grp:Group = new Group();
protected function init(event:Event):void
{

_stage = systemManager.stage;
_stage.align = StageAlign.TOP_LEFT;
_parametersĀ  =
{
src:”http://osmf.org/dev/videos/cathy1_SD.mp4″
, controlBarMode:”docked”
, controlBarAutoHide: true
, autoPlay: true
, playButtonOverlay:true
, showVideoInfoOverlayOnStartUp: true
};

var playerInstance:StrobeMediaPlayback = new StrobeMediaPlayback();
playerInstance.initialize(_parameters, _stage, systemManager.loaderInfo, null);
$playerInstance = playerInstance;

var ui:UIComponent = new UIComponent();
ui.addChild($playerInstance as DisplayObject);

grp.percentWidth = 100;
grp.percentHeight = 100;
addElement(grp);
grp.addElement(ui);

}

private var urlLoader:URLLoader;
private var urlRequest:URLRequest;
private var loader:Loader;
private var _stage:Stage;
private var _parameters:Object;
/* static */
private static const ALLOW_LOAD_BYTES_CODE_EXECUTION:String = “allowLoadBytesCodeExecution”;

function emptyCache()
{
$playerInstance.player.pause();
grp.removeAllElements();
this.destructionPolicy = “auto”;
}
[/cc]
Note!

Make sure to call init() on ViewActivate, or CreationComplete event. Also I recoment to assign on ViewDeactivate the emptyCache() function otherwize the sound of the video might keep on playing…

As a side note here, its better to create components in Actionscript even spark ones, than in mxml at least at this point where Flex Hero framework is still in Beta.

So thats it, now you have Strobe Media Player in your Mobile Application, especially now with 10.2 and stage video that focuses on low CPU consumption its essential for any mobile application with a video player.

!Important: In case you are not viewing a controlBar there is a chance that the default ActionBar is pushing the ControlBar downwards, so if that is the case try a different percentage for grp.percent=90, or disable the ActionBar -> set actionBarVisible = false in the View component properties.

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin
Tagged , , , , , , . Bookmark the permalink.

37 Responses to OSMF Strobe Media Player into Flex Mobile Project (Hero)

  1. Adrian-Cortez Jackson says:

    I’ve followed the instructions exactly as written, but I’m getting an error:

    1046: Type was not found or was not a compile-time constant: StrobeMediaPlayback.

    What am I doing wrong?

    Thanks in advanced!

  2. coder says:

    Do you have StrobeMediaPlayback.as in your src folder? Even if you do try to also import it.
    You can find this file on “StrobeMediaPlayback_1.6.267-full\src\player\StrobeMediaPlayback\src” as you download it.
    Let me know if this helps.

  3. Confused says:

    Hmmm…in your sample there’s no controlbar visible even though there are parameters passed in. Where did it go?

  4. coder says:

    The reason the control bar might not be visible is probably because the container that holds the player is not scaled at 100% height, normally the control bar would be docked at the bottom of the player.
    Also remember that it is auto collapsing, meaning that it auto-closes when it detects no mouse (or finger in mobiles) movement. I’m afraid I can’t be of more assistance if I don’t see some of the code.
    You’re welcome to send me the file that you’re working on and mention in what SDK and editor are you working.

    I hope it helped somehow.

  5. Kodar says:

    I don see where menuButton is declared
    ..
    grp.addElement(menuButton); )
    ..
    1120: Access of undefined property menuButton.

  6. coder says:

    I have removed the declaration altogether, it wasn’t adding anything to the example after all, thanks for the heads up.

  7. DJ says:

    Does this work on the Iphone, or are there any configurations that can get it to work. I have this working for the android and im streaming f4m files with a mp4 that has been segmented into 30 sec clips. The iphone shows that it got the data but the video is not displaying and the audio does not play back either.

  8. coder says:

    I assume you are trying this through an Air mobile project correct? I would I assume that it is working, although you might wanna check out the new Strobe Media Player 1.6 which has native support for mobile devices.

  9. Seraphipoo says:

    Hi coder,
    I followed your instruction and it worked. Problem is the player doesn’t resume after pausing (I’m playing a live stream, it doesn’t happen with the given mp4)

  10. coder says:

    This is weird since the code doesn’t affect the playback sequence, have you tried manually declaring $playerInstance.mediaPlayer.play(); ? Also run the app in a debug mode.
    All in all switch to OSMF Strobe 1.6 since it has build in support for mobiles now, the post was mostly referring to 1.0 – 1.5 versions.

  11. Seraphipoo says:

    I think I found the problem. Got this from osmf dev guide:
    Note: When playing RTMP live streams, your player should not enable Pause button functionality, unless the live stream also has DVR support
    Thanks for the instruction and the fast response. Much appreciated!

  12. Joel says:

    Hi, is there anyone can help? I follow this tutorial, but the video is not fit into the screen (too big), when I run it in tablet it works fine, but when I run it in mobile phone, the video screen size is too big on the screen. I have set the width and height for the video, but it still the same. Below is the code:

    _parameters =
    {
    src:”http://osmf.org/dev/videos/cathy1_SD.mp4″
    , controlBarMode:”docked”
    , controlBarAutoHide: true
    , width: “400”
    , height: “300”
    , autoPlay: true
    , playButtonOverlay:true
    , showVideoInfoOverlayOnStartUp: true
    };

    Thanks!

    Joel

  13. diyab says:

    @Joel

    I’ve got the same problem. It works fine on tablet but too big on android phone. Have you fixed it?

  14. coder says:

    There is a new version of OSMF 1.6 and strobe media playback which supports mobiles and tablets with fallback to HTML5.
    I will post another tutorial for this when I find some time šŸ™
    Basically to detect mobile and tablet you could try read the Stage.stageWidth and Stage.stageHeight and form some sort of media-query rules to change the size of the player.

  15. nick says:

    using your example above i cannot get the control bar to display, i say the comment regarding the height but this already has a % setting

    What am i missing?

  16. coder says:

    @nick Are you viewing this on a smartphone, emulator, web, air app?

    Results might vary from device to device because of the dpi try setting different DPI values in the main mxml component of the .
    Also make sure you select “docked” for the control-bar.

  17. nick says:

    debugging this in the FB ADL emulator
    only way i can get the control bar to display is by setting the actionBarVisible to false

    played with the group height and group % height with no joy

    It is set to docked

    cool the DPI did it

    Thanks

  18. Justin says:

    I am trying to get osmf player working and i keep getting.
    1046: Type was not found or was not a compile-time constant: there are about 96 errors alonge the same lines.
    Do you guys know how to fix this?
    Thank you in advanced!

  19. Partha Chakraborty says:

    I ‘ve tested this code and it works fine in IOS platform, but when it comes to Android its video gets bigger in screen size please fix these problem for me. please

  20. coder says:

    You should probably check the dpi settings, maybe create one separate rule for each dpi value. iOs devices mostly use one dpi setting or the retina screen one. However android devices come in many shapes and sizes so the dpi values vary. So either create rules for dpi>72 and dpi<160 or target the dpi/resolution screen that you want mainly this to play well.
    This tutorial was actually made to show how it can be achieved. And I am sure that there are ways to play around with minimal coding required.

  21. Manoj Kumar says:

    It was very much useful for me. A very big thanks to you dude. I was searching for a better sample for video player on Flex – Android. You gave me a wonder example. Awesome!

  22. Manoj Kumar says:

    And a very small issue, i have problem with width and height of player. I tried with reducing grp.percent to 50 even it occupies full table screen. I made actionbarVisible to false already. I can see the player and it works fine.

    I want to add it to a border container. I used borderContainer.addElement(grp). But even it occupies full screen and overlaying with other components on screen.

    Could you please help me?

    Thanks in advance!

  23. coder says:

    If I understand your problem exactly, you will need to adjust the width and height and make it fit in the container, width:100% and height: 100% will make it occupy the whole screen because it references the flash stage. Also try to reduce the width and height of the grp component.

  24. Manoj Kumar says:

    I have changed all the component (grp, bordercontainer which parent of grp) sizes to 90% / 50% even i tried with fixed width and height. Still the player remains in its the same size. Occupies full screen.

    I found this article – http://jodieorourke.com/view.php?id=152&blog=news

    I used this one and changed this

    _mediaPlayer.media = _factory.createMediaElement( new URLResource( _source ) );

    to

    _mediaPlayer.player.media = _factory.createMediaElement( new URLResource( _source ) );

    now it fits into the border container i have.
    i made something like

    But while i turn the player to full screen mode it goes away from the view. I can’t see the player.

    Any idea now?

  25. coder says:

    I think that there isn’t really the use of fullscreen on mobile devices as you could increase the width and height to match the device proportions and simply make the border alpha = 0
    That way you have virtually “fullscreen”

  26. magatz says:

    I’ve setup a mobile app for ios, following your guidelines. the porject runs, but i keep on getting this message:
    “We are unable to connect to the content you have requested.
    Flash Builder 1.4.6 with AIR 3.3. on windows7 64bit
    the video widget says:
    Build 1.6.328 for Flash Player 10.1
    Flash Player version: IOS 11,3,300,257 (debug)

  27. coder says:

    Not sure why this is happening… but there are some successfull instalations on iOs. Maybe you need to update the iOs in order for it to accept the .ipa files that Flash Builder is exporting.

  28. Manoj Kumar says:

    Is there any other video player for playing live rtmp video on air mobile application? i used Strobe, but it plays video with fully jerkiness. How we can avoid the jerkiness of player or is there any other good player? Is there something like Flash Media Playback for mobile which i got from google. But i don’t find a suitable example for that. Any idea?

    here my params to strobe,
    _parameters =
    {
    src: data.stream
    , controlBarMode:”docked”
    , controlBarAutoHide: true
    , autoPlay: true
    , playButtonOverlay:true
    , showVideoInfoOverlayOnStartUp: false
    , controlBarAutoHideTimeout: 0.6
    , volume: 0.8
    , streamType: “live”
    , bufferTime: 10
    , dynamicStreamBufferTime: 15
    };

    Have i missed something which will avoid the jerkiness of video?

    Thanks in advance.

  29. coder says:

    Well there is the new version of StrobeMediaPlayer that also has some functions for mobile development, the “jerkiness” could be due to DRM content, if you are not using DRM then maybe its the device CPU or memory.

  30. Manoj Kumar says:

    I think i’m not using DRM. Whenever i debug the app, it cause error with DRM at the following code.

    var drmManager:DRMManager = DRMManager.getDRMManager();
    drmManager.addEventListener(DRMErrorEvent.DRM_ERROR, onDRMError);

    So i comment the line for adding event listener. How it use DRM & what is DRM?

  31. Manoj Kumar says:

    Could you please help me to solve that DRM problem? If i set the render mode to GPU, will it solve my problem.

  32. Manoj Kumar says:

    I checked with DRM and i have never used it on app. I’m doing this app for Android Tablets. DRM manager is not supporting mobile profile. So i added a line DRMManager.isSupported to check and skip creating instance for drmManager. How can i remove the jerkiness now. I’m being struggled with this.

    Any idea now?

  33. coder says:

    Render mode as GPU won’t do much for the video it is intented mainly for fonts and graphic render. Maybe if you would try StageVideo would solve your problem. But it should not play with delay to begin with

  34. Manoj Kumar says:

    If you are able to do and have some time, could you please post or give me an example about Stage Video. Possibly a working example for mobile. I have tried with something i got from adobe blog. Each thing have some problem, if it plays local video, unable to play from RTMP link. Sometimes, Playonstatus not found error when video playing come to end…. i read many articles, everything solves once problem, but create some different error on next time….

    Anything you could help here?

  35. Is it possible to play local video file on Strobe Media Player with Air for Desktop?

    When i try it says, “unable to connect with content…”

  36. Ali Abu Ras says:

    Hi,
    You did a great job, but I face a problem with my player! I cant see my HLS plugin on stage, all custom control that I did appears on stage but the no the video display only white screen but I can hear the video sound! did you face such thing? do you have a solution.
    Thanks

  37. Maybe check the opacity properties maybe something is hiding something else or is redered invisible? I haven’t worked on OSMF for several years so I can’t exactly debug or offer much input on the matter. Thanks for your nice words though!

Leave a Reply

Your email address will not be published. Required fields are marked *