Standardize Your Flash with




                         presented by R Blank
    Training Director | Rich Media Institute...
What is OSM Framework?
framework for creating
              Flash-based media
                 experiences



©2004-2010 R Blank                 ...
Delivery Platform
Creation Tools




Delivery Platform
Content




Creation
Tools



Delivery
Platform
Content


 Code




Creation
Tools



Delivery
Platform
Content


 Code




 Application Framework


Creation
Tools



Delivery
Platform
Content


 Code




 Application Framework   Media Framework


Creation
Tools



Delivery
Platform
Content


 Code




 Application Framework   Media Framework


Creation
Tools



Delivery
Platform
Content


 Code




 Application Framework   Media Framework


Creation
Tools



Delivery
Platform
Benefits of a Framework




©2004-2010 R Blank            14
Benefits of a Framework




                     Accelerate




©2004-2010 R Blank                14
Benefits of a Framework




                      Accelerate
                     & Standardize




©2004-2010 R Blank    ...
Benefits of a Framework




                      Accelerate
                     & Standardize
                     Devel...
media




©2004-2010 R Blank           15
Capabilities
©2004-2010 R Blank   19
Load




©2004-2010 R Blank          19
Load
                     Play




©2004-2010 R Blank          19
Load
                       Play
                     & Display




©2004-2010 R Blank               19
Load
                       Play
                     & Display
                      Media


©2004-2010 R Blank          ...
Supported Media Types
   Streaming audio
        mp3, AAC, Speex, and Nellymoser
   Streaming video
        FLV, F4V, MP4,...
EVERY Flash supported
                 media type




©2004-2010 R Blank                  21
Delivery

   Flash Player
     Quality of Service APIs (aka QoS)
     Digital Rights Management APIs (aka DRM)
     Server...
Existing Standards Support


   Video Ad Serving Template (VAST)
   Media Abstract Sequencing Template
   (MAST)
   Media ...
Plugins




   Developed by 3d Parties
   Or you!




©2004-2010 R Blank           24
Getting Started
Installing in Flash
adobe.com/go/osmf




©2004-2010 R Blank                       27
download 'source'
                in source folder, copy
                      OSMF.swc

               Direct Link (not t...
In Windows:
     Program FilesAdobeAdobe Flash CS4Common
     ConfigurationActionScript 3.0libs


   On the Macintosh:
   ...
The Simplest Possible
    OSMF Player
Basic Structure of an OSMF Player
Basic Structure of an OSMF Player




                  MediaElement
Any supported media type
 video
 images
 sound
 etc
Basic Structure of an OSMF Player




                  MediaElement
Any supported media type      or CompositeElement
 vi...
Basic Structure of an OSMF Player




                  MediaElement
Any supported media type          or CompositeElement...
Basic Structure of an OSMF Player

    MediaPlayer
Control playback of a
MediaElement




                   MediaElement
...
Basic Structure of an OSMF Player

    MediaPlayer
Control playback of a
MediaElement

 Tell this to play, stop, etc



  ...
Basic Structure of an OSMF Player

    MediaPlayer                    MediaContainer
Control playback of a            Disp...
Basic Structure of an OSMF Player

    MediaPlayer                    MediaContainer
Control playback of a            Disp...
imports




   import org.osmf.containers.MediaContainer;
   import org.osmf.elements.VideoElement;
   import org.osmf.med...
the MediaContainer




   import org.osmf.containers.MediaContainer;
   import org.osmf.elements.VideoElement;
   import o...
the MediaContainer




   import org.osmf.containers.MediaContainer;
   import org.osmf.elements.VideoElement;
   import o...
the MediaPlayer



   import org.osmf.containers.MediaContainer;
   import org.osmf.elements.VideoElement;
   import org.o...
the MediaPlayer
   import org.osmf.containers.MediaContainer;
   import org.osmf.elements.VideoElement;
   import org.osmf...
Simplest OSMF Video Player

   import org.osmf.containers.MediaContainer;
   import org.osmf.elements.VideoElement;
   imp...
Controlling Playback
Default Playback




    //set autoPlay to false on the MediaPlayer instance
    so that playback does not begin by defaul...
//listen for the click event on the stage
   stage.addEventListener( MouseEvent.CLICK , _onClick );


   function _onClick...
Using More Features
Media Factories
MediaFactory
MediaFactory
    Tell this to create
MediaElements, with a URL
MediaFactory
    Tell this to create
MediaElements, with a URL




    MediaElement
MediaFactory
    Tell this to create
MediaElements, with a URL




    MediaElement

      VideoElement
MediaFactory
                   Tell this to create
               MediaElements, with a URL




                   MediaE...
MediaFactory
                   Tell this to create
               MediaElements, with a URL




                   MediaE...
the Media Factory




   import org.osmf.media.DefaultMediaFactory;
    //create the DefaultMediaFactory instance
   var m...
Layouts
MediaContainer




MediaElement
MediaContainer

LayoutMetadata




MediaElement
MediaContainer

LayoutMetadata


     Controls how a
MediaElement is displayed
 in the MediaContainer




  MediaElement
LayoutMetadata
width
height
x
y
...

can be absolute or relative
LayoutMetadata

      //create a LayoutMetadata object
   var layout = new LayoutMetadata();
      //set the width and hei...
NetLoader
MediaElement
MediaElement
MediaElement



 NetLoader
HTTPStreamingNetLoader


RTMPDynamicStreamingNetLoader

DVRCastNetLoader
HTTPStreamingNetLoader


NetLoader   RTMPDynamicStreamingNetLoader

            DVRCastNetLoader
change
   var videoElement:VideoElement = new
   VideoElement( resource );



      to
   var videoElement:VideoElement = ...
MediaElement
MediaElement

URLResource
  "some.flv"
MediaElement

      DynamicStreamingResource
Vector.<DynamicStreamingResourceItem>




low             medium            h...
//create a new DynamicStreamingResource
    pointing to our FMS application
   var resource : DynamicStreamingResource = n...
//create a Vector to store the
    DynamicStreaminingItem objects
   var vector : Vector.<DynamicStreamingItem> =
   new V...
//create 3 entries in the vector, each a
    DynamicStreamingItem, with a file name and a
    minimum bitrate
   vector [ ...
//set the streamItems property on the
    DynamicStreamingResource to our vector
   resource.streamItems = vector ;
    //...
Dynamic Streaming in a few lines....




   var resource = new DynamicStreamingResource ( RMTP_URL ) ;
   var vector = new...
Composite Elements
ParallelElement
ParallelElement

MediaElement    MediaElement
ParallelElement

MediaElement     MediaElement




         concurrently
SerialElement

MediaElement      MediaElement




         consecutively
Basic Structure of an OSMF Player
       with CompositeElements
              Playback


           MediaPlayer

       Co...
Basic Structure of an OSMF Player
        with CompositeElements
                Display


         MediaContainer




Med...
Basic Structure of an OSMF Player
         with CompositeElements
                 Display


          MediaContainer

Lay...
Basic Structure of an OSMF Player
         with CompositeElements
                 Display


          MediaContainer

Lay...
create 2 MediaElements




      //use the mediaFactory to create two new MediaElement
      objects
   var mediaElement1=...
Use two layouts for the container
      //create, size and position two LayoutMetadata objects
   var layout1 = new Layout...
the SerialElement


      //create a new SerialElement
   var serialElement = new SerialElement ( );
      //add both Medi...
Subclipping
//create a resource pointing to MEDIA_URL1 from 0 seconds to 10
      seconds
   var resource1=new StreamingURLResource(ME...
Full Basic Player
MediaPlayer Properties




©2004-2010 R Blank           71
MediaPlayer Properties




                     duration




©2004-2010 R Blank              71
MediaPlayer Properties




                     duration
                       time




©2004-2010 R Blank              71
MediaPlayer Properties




                     duration
                       time
                     autoPlay




©20...
MediaPlayer Properties




                      duration
                        time
                      autoPlay
    ...
Media Player Events




   TimeEvent.CURRENT_TIME_CHANGE




©2004-2010 R Blank                 72
_mediaPlayer.addEventListener
   ( TimeEvent.CURRENT_TIME_CHANGE , _onCurrentTimeChange ) ;


   function _onCurrentTimeCh...
Media Player Events




    MediaPlayerCapabilityChangeEvent.
           CAN_LOAD_CHANGE




©2004-2010 R Blank           ...
_mediaPlayer.addEventListener
   ( MediaPlayerCapabilityChangeEvent.CAN_LOAD_CHANGE ,
   _onCanLoadChange ) ;


   functio...
Media Player Events




    MediaPlayerCapabilityChangeEvent.
           CAN_PLAY_CHANGE




©2004-2010 R Blank           ...
_mediaPlayer.addEventListener
   ( MediaPlayerCapabilityChangeEvent.CAN_PLAY_CHANGE ,
   _onCanPlayChange ) ;


   functio...
Media Player Events




    MediaPlayerCapabilityChangeEvent.
           CAN_SEEK_CHANGE




©2004-2010 R Blank           ...
_mediaPlayer.addEventListener
   ( MediaPlayerCapabilityChangeEvent.CAN_SEEK_CHANGE ,
   _onCanSeekChange ) ;


   functio...
Media Player Events




           MediaErrorEvent.MEDIA_ERROR




©2004-2010 R Blank                       80
_mediaPlayer.addEventListener ( MediaErrorEvent.MEDIA_ERROR ,
   _onMediaError ) ;


   function _onMediaError ( evt : Med...
Media Player Events




   MediaPlayerStateChangeEvent.
   MEDIA_PLAYER_STATE_CHANGE




©2004-2010 R Blank               ...
_mediaPlayer.addEventListener
   ( MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE ,
   _onMediaPlayerStateChange ) ...
MediaPlayer State Values




   playing
   loading
   buffering
   uninitialized
   ready




©2004-2010 R Blank          ...
Next Steps

adobe.com/go/osmf
read the docs




©2004-2010 R Blank                   86
check sample files




©2004-2010 R Blank                        87
start working with it




©2004-2010 R Blank                           88
Thank You

   Training:   richmediainstitute.com
   Production: almerblank.com
   Blog:       rblank.com




©2004-2010 R ...
Standardize Your Flash with Adobe OSMF (0.9)
Standardize Your Flash with Adobe OSMF (0.9)
Standardize Your Flash with Adobe OSMF (0.9)
Standardize Your Flash with Adobe OSMF (0.9)
Upcoming SlideShare
Loading in …5
×

Standardize Your Flash with Adobe OSMF (0.9)

7,189 views

Published on

The brand spankin' new Adobe Open Source Media Framework (OSMF) is an amazingly powerful code library that can significantly assist your Flash development.

Just as Flex is a framework that supports and standardizes application-centric Flash, OSMF supports and standardizes your media-centric Flash experiences (which, when you actually think about it, is basically all non-application experiences in Flash).

OSMF was born from a desire to standardize Flash video players. Have you ever noticed that no two video players in Flash are built the same way? That makes it really hard to maintain and monetize your work. It means that you literally have to recreate the wheel (or the video player, or the image gallery, or whatever) each time! That's a tremendous waste.

Although perhaps most directly relevant to video players, OSMF actually adds value to any AS3/Flash Player 10+ project. With standards and definitions for advanced media handling (audio, video, text, SWF, bitmap -- all of it), layouts, playlists, plug-ins and even monetization, OSMF makes it much easier and faster for you to create media-based Flash work, to use open-source plug-ins to further assist your work, and for you to maintain that work over time, and integrate it into other projects.

In short, if you're sick of wasting time re-creating the wheel with each AS3 project, OSMF is for you.

Come learn how to get started with OSMF, and watch R as he builds a powerful, standards-driven experience, in front of you in under an hour.

Published in: Education
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,189
On SlideShare
0
From Embeds
0
Number of Embeds
1,097
Actions
Shares
0
Downloads
0
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide
  • download slides and all code @ rblank.com shortly after this talk

  • about me ...&gt;


  • ...well what does that mean?








  • a framework - a bunch of code you can use out of the box

    why?
  • ...what type of development?
  • ...what type of development?
  • ...what type of development?
  • but where it will likely have the most immediate impact is video
    for reasons I will shortly explain
    but I want to reiterate how OSMF is for all media -- it&apos;s specifically built to be flexible in that way
  • as I said, video is where OSMF will have the most immediate impact

    so much of web video is now Flash video
    so many sites have video players
    each video player is frustratingly unique

    not just playback controls
    but how the player works (e.g., when resized in different forms or in full-screen mode), how ads work, how metrics are tracked

    this:
    slows down developers/engineers
    increases production costs for content distributors
    confuses users (with different standards, interactions and controls)

    implementing a standard framework for the creation of these media-rich Flash Platform experiences has a lot of potential benefit for the entire world of digital content




  • so just as the Flex Framework has helped standardize and accelerate the production of what we call RIAs, that&apos;s what OSMF is to media -- an ActionScript 3 framework to standardize the creation of media delivery experiences on the Flash Platform

    it&apos;s still in beta, but at Sprint 10, v0.93, much of the API has now been locked down, so it&apos;s gonna be a lot more fun to play and work with it

    no GUI components -- yet
    but nothing&apos;s stopping you!









  • 1) RSS media reader
    2) closed captioning
    3) akamai CDN integration


  • download
  • the source includes a ton of files -- go straight to this one

    also download the ASDocs for helpful reference, but those aren&apos;t required to work with it


  • media player can contain one MediaElement at a time
    mediacontainers can multiple MediaElements at a time
  • media player can contain one MediaElement at a time
    mediacontainers can multiple MediaElements at a time
  • media player can contain one MediaElement at a time
    mediacontainers can multiple MediaElements at a time
  • media player can contain one MediaElement at a time
    mediacontainers can multiple MediaElements at a time
  • media player can contain one MediaElement at a time
    mediacontainers can multiple MediaElements at a time
  • media player can contain one MediaElement at a time
    mediacontainers can multiple MediaElements at a time
  • media player can contain one MediaElement at a time
    mediacontainers can multiple MediaElements at a time
  • if you&apos;re used to coding on the timeline, you might not be used to using imports

    since OSMF is a framework that is not part of the Flash Player, you have to import all of the OSMF classes you work with





  • 6 lines of code

    and the same code works to stream video

    ...now that we have these basics in place, we can do a bit more...&gt;





  • use of mediafactory is optional

    each specific type of media element has specific traits

    but if you use a mediafactory, you don&apos;t need to care about what specific type of MediaElement
    you require -- Flash will choose it for you automatically based on the media type

    use of plugins (which I&apos;m not covering today) requires using the mediafactory, precisely because it&apos;s agnostic on the specific type of MediaElement


  • use of mediafactory is optional

    each specific type of media element has specific traits

    but if you use a mediafactory, you don&apos;t need to care about what specific type of MediaElement
    you require -- Flash will choose it for you automatically based on the media type

    use of plugins (which I&apos;m not covering today) requires using the mediafactory, precisely because it&apos;s agnostic on the specific type of MediaElement


  • use of mediafactory is optional

    each specific type of media element has specific traits

    but if you use a mediafactory, you don&apos;t need to care about what specific type of MediaElement
    you require -- Flash will choose it for you automatically based on the media type

    use of plugins (which I&apos;m not covering today) requires using the mediafactory, precisely because it&apos;s agnostic on the specific type of MediaElement


  • use of mediafactory is optional

    each specific type of media element has specific traits

    but if you use a mediafactory, you don&apos;t need to care about what specific type of MediaElement
    you require -- Flash will choose it for you automatically based on the media type

    use of plugins (which I&apos;m not covering today) requires using the mediafactory, precisely because it&apos;s agnostic on the specific type of MediaElement


  • use of mediafactory is optional

    each specific type of media element has specific traits

    but if you use a mediafactory, you don&apos;t need to care about what specific type of MediaElement
    you require -- Flash will choose it for you automatically based on the media type

    use of plugins (which I&apos;m not covering today) requires using the mediafactory, precisely because it&apos;s agnostic on the specific type of MediaElement









  • mediaelements load media
    they do this using something called a NetLoader

    when you create a mediaelement (either directly, or through a mediafactory) you have the option of passing in a type of NetLoader
    if you don&apos;t, the MediaFactory will create the right one for you

    the plain vanilla NetLoader is useful in most cases...&gt;
  • mediaelements load media
    they do this using something called a NetLoader

    when you create a mediaelement (either directly, or through a mediafactory) you have the option of passing in a type of NetLoader
    if you don&apos;t, the MediaFactory will create the right one for you

    the plain vanilla NetLoader is useful in most cases...&gt;
  • but the netloader has three inheritors
    which give us some fun powers right away

    http streaming...&gt;


  • ... a more traditional type of streaming is RTMP
    you&apos;ve seen how easy it is to do streaming with OSMF -- it&apos;s the same exact code as progressive
    OSMF also makes dynamic streaming really easy








  • you don&apos;t generally create a CompositeElement directly
    you create one of two types of CompositeElements

    for playback management only -- not display
    still a one-to-one for mediaelements to the mediacontainer




  • compositeelements do not factor into the display at all

    technically layout metadata is optional, but almost certainly required when using parallelelements
  • compositeelements do not factor into the display at all

    technically layout metadata is optional, but almost certainly required when using parallelelements





  • it&apos;s in the source files for this talk
    in order to start building any apps that work with OSMF, there just a few key items you&apos;re probably going to want to know
    a few properties and a few events on the MediaPlayer

















  • read the tutorials and check the sample code
    there&apos;s a fair bit on Adobe Dev Center (linked from osmf page)
    also, there&apos;s a virtual Adobe User Group for OSMF, find out about it at osmf site

    google for other tutorials and blog posts -- which are becoming more plentiful




  • Standardize Your Flash with Adobe OSMF (0.9)

    1. 1. Standardize Your Flash with presented by R Blank Training Director | Rich Media Institute The Rich Media Institute | For other courses and much more visit: www.richmediainstitute.com
    2. 2. What is OSM Framework?
    3. 3. framework for creating Flash-based media experiences ©2004-2010 R Blank 4
    4. 4. Delivery Platform
    5. 5. Creation Tools Delivery Platform
    6. 6. Content Creation Tools Delivery Platform
    7. 7. Content Code Creation Tools Delivery Platform
    8. 8. Content Code Application Framework Creation Tools Delivery Platform
    9. 9. Content Code Application Framework Media Framework Creation Tools Delivery Platform
    10. 10. Content Code Application Framework Media Framework Creation Tools Delivery Platform
    11. 11. Content Code Application Framework Media Framework Creation Tools Delivery Platform
    12. 12. Benefits of a Framework ©2004-2010 R Blank 14
    13. 13. Benefits of a Framework Accelerate ©2004-2010 R Blank 14
    14. 14. Benefits of a Framework Accelerate & Standardize ©2004-2010 R Blank 14
    15. 15. Benefits of a Framework Accelerate & Standardize Development ©2004-2010 R Blank 14
    16. 16. media ©2004-2010 R Blank 15
    17. 17. Capabilities
    18. 18. ©2004-2010 R Blank 19
    19. 19. Load ©2004-2010 R Blank 19
    20. 20. Load Play ©2004-2010 R Blank 19
    21. 21. Load Play & Display ©2004-2010 R Blank 19
    22. 22. Load Play & Display Media ©2004-2010 R Blank 19
    23. 23. Supported Media Types Streaming audio mp3, AAC, Speex, and Nellymoser Streaming video FLV, F4V, MP4, MPEG-4: MP4, M4V, F4V, 3GPP Progressive audio mp3 Progressive video FLV, F4V, MP4, MP4V-ES, M4V, 3GPP, 3GPP2, QuickTime Images PNG, GIF, or JPG SWF files ©2004-2010 R Blank 20
    24. 24. EVERY Flash supported media type ©2004-2010 R Blank 21
    25. 25. Delivery Flash Player Quality of Service APIs (aka QoS) Digital Rights Management APIs (aka DRM) Server side HTTP Streaming (currently code-named Project Zeri) Flash Media Server Flash Media Manifest files (aka F4M) Digital Video Recorder functionality (aka DVR) ©2004-2010 R Blank 22
    26. 26. Existing Standards Support Video Ad Serving Template (VAST) Media Abstract Sequencing Template (MAST) Media RSS (MRSS) Distribution Format Exchange Profile (DFXP) Synchronized Multimedia Integration Language (SMIL) ©2004-2010 R Blank 23
    27. 27. Plugins Developed by 3d Parties Or you! ©2004-2010 R Blank 24
    28. 28. Getting Started
    29. 29. Installing in Flash
    30. 30. adobe.com/go/osmf ©2004-2010 R Blank 27
    31. 31. download 'source' in source folder, copy OSMF.swc Direct Link (not to SVN, but to zips): http://opensource.adobe.com/wiki/display/osmf/Downloads ©2004-2010 R Blank 28
    32. 32. In Windows: Program FilesAdobeAdobe Flash CS4Common ConfigurationActionScript 3.0libs On the Macintosh: /Applications/Adobe Flash CS4/Common/ Configuration/ActionScript 3.0/libs ©2004-2010 R Blank 29
    33. 33. The Simplest Possible OSMF Player
    34. 34. Basic Structure of an OSMF Player
    35. 35. Basic Structure of an OSMF Player MediaElement Any supported media type video images sound etc
    36. 36. Basic Structure of an OSMF Player MediaElement Any supported media type or CompositeElement video Parallel or Serial images sound etc
    37. 37. Basic Structure of an OSMF Player MediaElement Any supported media type or CompositeElement video Parallel or Serial images sound Tell this to load stuff etc
    38. 38. Basic Structure of an OSMF Player MediaPlayer Control playback of a MediaElement MediaElement Any supported media type or CompositeElement video Parallel or Serial images sound Tell this to load stuff etc
    39. 39. Basic Structure of an OSMF Player MediaPlayer Control playback of a MediaElement Tell this to play, stop, etc MediaElement Any supported media type or CompositeElement video Parallel or Serial images sound Tell this to load stuff etc
    40. 40. Basic Structure of an OSMF Player MediaPlayer MediaContainer Control playback of a Display MediaElement(s) MediaElement on the Stage Tell this to play, stop, etc MediaElement Any supported media type or CompositeElement video Parallel or Serial images sound Tell this to load stuff etc
    41. 41. Basic Structure of an OSMF Player MediaPlayer MediaContainer Control playback of a Display MediaElement(s) MediaElement on the Stage Add this to stage, tell it Tell this to play, stop, etc what element(s) to show MediaElement Any supported media type or CompositeElement video Parallel or Serial images sound Tell this to load stuff etc
    42. 42. imports import org.osmf.containers.MediaContainer; import org.osmf.elements.VideoElement; import org.osmf.media.MediaPlayer; import org.osmf.media.URLResource; ©2004-2010 R Blank 32
    43. 43. the MediaContainer import org.osmf.containers.MediaContainer; import org.osmf.elements.VideoElement; import org.osmf.media.MediaPlayer; import org.osmf.media.URLResource; // Create the container class that displays the media. var container:MediaContainer = new MediaContainer(); ©2004-2010 R Blank 33
    44. 44. the MediaContainer import org.osmf.containers.MediaContainer; import org.osmf.elements.VideoElement; import org.osmf.media.MediaPlayer; import org.osmf.media.URLResource; var container = new MediaContainer(); //add the MediaContainer instance to the stage addChild(container); ©2004-2010 R Blank 34
    45. 45. the MediaPlayer import org.osmf.containers.MediaContainer; import org.osmf.elements.VideoElement; import org.osmf.media.MediaPlayer; import org.osmf.media.URLResource; var container = new MediaContainer(); addChild(container); var videoElement=new VideoElement(new URLResource("my.flv")); //create the MediaPlayer instance var mediaPlayer:MediaPlayer = new MediaPlayer(); ©2004-2010 R Blank 35
    46. 46. the MediaPlayer import org.osmf.containers.MediaContainer; import org.osmf.elements.VideoElement; import org.osmf.media.MediaPlayer; import org.osmf.media.URLResource; var container = new MediaContainer(); addChild(container); var videoElement=new VideoElement(new URLResource("my.flv")); container.addMediaElement(videoElement); var mediaPlayer = new MediaPlayer(); // Set the MediaElement on the MediaPlayer. //Because autoPlay defaults to true, playback begins immediately mediaPlayer.media=videoElement; ©2004-2010 R Blank 36
    47. 47. Simplest OSMF Video Player import org.osmf.containers.MediaContainer; import org.osmf.elements.VideoElement; import org.osmf.media.MediaPlayer; import org.osmf.media.URLResource; var container = new MediaContainer(); addChild(container); var videoElement=new VideoElement(new URLResource("my.flv")); container.addMediaElement(videoElement); var mediaPlayer = new MediaPlayer(); mediaPlayer.media=videoElement; ©2004-2010 R Blank 37
    48. 48. Controlling Playback
    49. 49. Default Playback //set autoPlay to false on the MediaPlayer instance so that playback does not begin by default mediaPlayer.autoPlay=false; ©2004-2010 R Blank 39
    50. 50. //listen for the click event on the stage stage.addEventListener( MouseEvent.CLICK , _onClick ); function _onClick( evt ):void { //if the MediaPlayer is playing if (mediaPlayer.playing) { //pause it mediaPlayer.pause( ); } else { //resume it mediaPlayer.play( ); } } ©2004-2010 R Blank 40
    51. 51. Using More Features
    52. 52. Media Factories
    53. 53. MediaFactory
    54. 54. MediaFactory Tell this to create MediaElements, with a URL
    55. 55. MediaFactory Tell this to create MediaElements, with a URL MediaElement
    56. 56. MediaFactory Tell this to create MediaElements, with a URL MediaElement VideoElement
    57. 57. MediaFactory Tell this to create MediaElements, with a URL MediaElement ImageElement VideoElement
    58. 58. MediaFactory Tell this to create MediaElements, with a URL MediaElement ImageElement VideoElement SoundElement
    59. 59. the Media Factory import org.osmf.media.DefaultMediaFactory; //create the DefaultMediaFactory instance var mediaFactory = new DefaultMediaFactory(); //have the mediafactory create the VideoElement var mediaElement=mediaFactory.createMediaElement(ne w URLResource("my.flv")); ©2004-2010 R Blank 44
    60. 60. Layouts
    61. 61. MediaContainer MediaElement
    62. 62. MediaContainer LayoutMetadata MediaElement
    63. 63. MediaContainer LayoutMetadata Controls how a MediaElement is displayed in the MediaContainer MediaElement
    64. 64. LayoutMetadata width height x y ... can be absolute or relative
    65. 65. LayoutMetadata //create a LayoutMetadata object var layout = new LayoutMetadata(); //set the width and height of the LayoutMetadata object layout.width=640; layout.height=480; //tie the LayoutMetadata instance to the MediaElement instance mediaElement.addMetadata(LayoutMetadata.LAYOUT_ NAMESPACE, layout); ©2004-2010 R Blank 48
    66. 66. NetLoader
    67. 67. MediaElement
    68. 68. MediaElement
    69. 69. MediaElement NetLoader
    70. 70. HTTPStreamingNetLoader RTMPDynamicStreamingNetLoader DVRCastNetLoader
    71. 71. HTTPStreamingNetLoader NetLoader RTMPDynamicStreamingNetLoader DVRCastNetLoader
    72. 72. change var videoElement:VideoElement = new VideoElement( resource ); to var videoElement:VideoElement = new VideoElement( resource , new RTMPDynamicStreamingNetLoader ( ) ); ©2004-2010 R Blank 52
    73. 73. MediaElement
    74. 74. MediaElement URLResource "some.flv"
    75. 75. MediaElement DynamicStreamingResource Vector.<DynamicStreamingResourceItem> low medium high
    76. 76. //create a new DynamicStreamingResource pointing to our FMS application var resource : DynamicStreamingResource = new DynamicStreamingResource ( RMTP_URL ) ; ©2004-2010 R Blank 55
    77. 77. //create a Vector to store the DynamicStreaminingItem objects var vector : Vector.<DynamicStreamingItem> = new Vector.<DynamicStreamingItem> ( 3 ) ; ©2004-2010 R Blank 56
    78. 78. //create 3 entries in the vector, each a DynamicStreamingItem, with a file name and a minimum bitrate vector [ 0 ] = new DynamicStreamingItem ( "2012_high" , 1500 ) ; vector [ 1 ] = new DynamicStreamingItem ( "2012_low" , 400 ) ; vector [ 2 ] = new DynamicStreamingItem ( "2012_medium" , 600 ) ; ©2004-2010 R Blank 57
    79. 79. //set the streamItems property on the DynamicStreamingResource to our vector resource.streamItems = vector ; //create a new VideoElement, based on the resource var videoElement = new VideoElement( resource ) ; ©2004-2010 R Blank 58
    80. 80. Dynamic Streaming in a few lines.... var resource = new DynamicStreamingResource ( RMTP_URL ) ; var vector = new Vector.<DynamicStreamingItem> ( 3 ) ; vector [ 0 ] = new DynamicStreamingItem ( "2012_high" , 1500 ) ; vector [ 1 ] = new DynamicStreamingItem ( "2012_low" , 400 ) ; vector [ 2 ] = new DynamicStreamingItem ( "2012_medium" , 600 ) ; resource.streamItems = vector ; var videoElement = new VideoElement( resource ) ; ©2004-2010 R Blank 59
    81. 81. Composite Elements
    82. 82. ParallelElement
    83. 83. ParallelElement MediaElement MediaElement
    84. 84. ParallelElement MediaElement MediaElement concurrently
    85. 85. SerialElement MediaElement MediaElement consecutively
    86. 86. Basic Structure of an OSMF Player with CompositeElements Playback MediaPlayer CompositeElement MediaElement MediaElement
    87. 87. Basic Structure of an OSMF Player with CompositeElements Display MediaContainer MediaElement MediaElement
    88. 88. Basic Structure of an OSMF Player with CompositeElements Display MediaContainer LayoutMetadata MediaElement MediaElement
    89. 89. Basic Structure of an OSMF Player with CompositeElements Display MediaContainer LayoutMetadata LayoutMetadata MediaElement MediaElement
    90. 90. create 2 MediaElements //use the mediaFactory to create two new MediaElement objects var mediaElement1=mediaFactory.createMediaElement(new URLResource(MEDIA_URL)); var mediaElement2=mediaFactory.createMediaElement(new URLResource(MEDIA_URL2)); ©2004-2010 R Blank 65
    91. 91. Use two layouts for the container //create, size and position two LayoutMetadata objects var layout1 = new LayoutMetadata(); layout1.width=320; layout1.height=240; var layout2 = new LayoutMetadata(); layout2.width=320; layout2.height=240; //tie each LayoutMetadata object to one of the MediaElement objects mediaElement1.addMetadata(LayoutMetadata.LAYOUT_NAMESPACE , layout1); mediaElement2.addMetadata(LayoutMetadata.LAYOUT_NAMESPACE , layout2); ©2004-2010 R Blank 66
    92. 92. the SerialElement //create a new SerialElement var serialElement = new SerialElement ( ); //add both MediaElement instances to the serialElement serialElement.addChild( mediaElement1 ); serialElement.addChild( mediaElement2 ); //set the media property of the mediaPlayer to the parallelElement mediaPlayer.media= serialElement; //add the parallelElement to the MediaContainer mediaContainer.addMediaElement(serialElement); ©2004-2010 R Blank 67
    93. 93. Subclipping
    94. 94. //create a resource pointing to MEDIA_URL1 from 0 seconds to 10 seconds var resource1=new StreamingURLResource(MEDIA_URL1,null,0,10); //add resource1 to the serialElement serialElement.addChild( new VideoElement( resource1 ) ); //create a (regular) resource pointing to (the whole) AD serialElement.addChild( new VideoElement( new URLResource( AD ) ) ); //create a resource pointing to MEDIA_URL1 from 20 seconds to 30 seconds var resource2=new StreamingURLResource(MEDIA_URL2,null,20,30); ©2004-2010 R Blank 69
    95. 95. Full Basic Player
    96. 96. MediaPlayer Properties ©2004-2010 R Blank 71
    97. 97. MediaPlayer Properties duration ©2004-2010 R Blank 71
    98. 98. MediaPlayer Properties duration time ©2004-2010 R Blank 71
    99. 99. MediaPlayer Properties duration time autoPlay ©2004-2010 R Blank 71
    100. 100. MediaPlayer Properties duration time autoPlay autoRewind ©2004-2010 R Blank 71
    101. 101. Media Player Events TimeEvent.CURRENT_TIME_CHANGE ©2004-2010 R Blank 72
    102. 102. _mediaPlayer.addEventListener ( TimeEvent.CURRENT_TIME_CHANGE , _onCurrentTimeChange ) ; function _onCurrentTimeChange ( evt : TimeEvent ) : void { trace ( "_onCurrentTimeChange () , evt.time : " + evt.time ) ; } ©2004-2010 R Blank 73
    103. 103. Media Player Events MediaPlayerCapabilityChangeEvent. CAN_LOAD_CHANGE ©2004-2010 R Blank 74
    104. 104. _mediaPlayer.addEventListener ( MediaPlayerCapabilityChangeEvent.CAN_LOAD_CHANGE , _onCanLoadChange ) ; function _onCanLoadChange ( evt : MediaPlayerCapabilityChangeEvent ) : void { trace ( "_onCanLoadChange () , evt.enabled : " + evt.enabled ) ; } ©2004-2010 R Blank 75
    105. 105. Media Player Events MediaPlayerCapabilityChangeEvent. CAN_PLAY_CHANGE ©2004-2010 R Blank 76
    106. 106. _mediaPlayer.addEventListener ( MediaPlayerCapabilityChangeEvent.CAN_PLAY_CHANGE , _onCanPlayChange ) ; function _onCanPlayChange ( evt : MediaPlayerCapabilityChangeEvent ) : void { trace ( "_onCanPlayChange () , evt.enabled : " + evt.enabled ) ; } ©2004-2010 R Blank 77
    107. 107. Media Player Events MediaPlayerCapabilityChangeEvent. CAN_SEEK_CHANGE ©2004-2010 R Blank 78
    108. 108. _mediaPlayer.addEventListener ( MediaPlayerCapabilityChangeEvent.CAN_SEEK_CHANGE , _onCanSeekChange ) ; function _onCanSeekChange ( evt : MediaPlayerCapabilityChangeEvent ) : void { trace ( "_onCanSeekChange () , evt.enabled : " + evt.enabled ) ; } ©2004-2010 R Blank 79
    109. 109. Media Player Events MediaErrorEvent.MEDIA_ERROR ©2004-2010 R Blank 80
    110. 110. _mediaPlayer.addEventListener ( MediaErrorEvent.MEDIA_ERROR , _onMediaError ) ; function _onMediaError ( evt : MediaErrorEvent ) : void { trace ( "_onMediaError () , evt.error : " + evt.error ) ; } ©2004-2010 R Blank 81
    111. 111. Media Player Events MediaPlayerStateChangeEvent. MEDIA_PLAYER_STATE_CHANGE ©2004-2010 R Blank 82
    112. 112. _mediaPlayer.addEventListener ( MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE , _onMediaPlayerStateChange ) ; function _onMediaPlayerStateChange ( evt : MediaPlayerStateChangeEvent ) : void { trace ( "_onMediaPlayerStateChange () , evt.state : " + evt.state ) ; } ©2004-2010 R Blank 83
    113. 113. MediaPlayer State Values playing loading buffering uninitialized ready ©2004-2010 R Blank 84
    114. 114. Next Steps adobe.com/go/osmf
    115. 115. read the docs ©2004-2010 R Blank 86
    116. 116. check sample files ©2004-2010 R Blank 87
    117. 117. start working with it ©2004-2010 R Blank 88
    118. 118. Thank You Training: richmediainstitute.com Production: almerblank.com Blog: rblank.com ©2004-2010 R Blank 89

    ×