![//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](https://image.slidesharecdn.com/standardizeyourflash20100427alive-100429224617-phpapp01/85/Standardize-Your-Flash-with-Adobe-OSMF-0-9-82-320.jpg)
![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](https://image.slidesharecdn.com/standardizeyourflash20100427alive-100429224617-phpapp01/85/Standardize-Your-Flash-with-Adobe-OSMF-0-9-84-320.jpg)
Standardize Your Flash with Adobe OSMF (0.9)
- 1. Standardize Your Flashwith presented by R Blank Training Director | Rich Media Institute The Rich Media Institute | For other courses and much more visit: www.richmediainstitute.com
- 3. What is OSMFramework?
- 4. framework for creating Flash-based media experiences ©2004-2010 R Blank 4
- 5.
- 6.
- 7.
- 8.
- 9. Content Code ApplicationFramework Creation Tools Delivery Platform
- 10. Content Code ApplicationFramework Media Framework Creation Tools Delivery Platform
- 11. Content Code ApplicationFramework Media Framework Creation Tools Delivery Platform
- 12. Content Code ApplicationFramework Media Framework Creation Tools Delivery Platform
- 14. Benefits of aFramework ©2004-2010 R Blank 14
- 15. Benefits of aFramework Accelerate ©2004-2010 R Blank 14
- 16. Benefits of aFramework Accelerate & Standardize ©2004-2010 R Blank 14
- 17. Benefits of aFramework Accelerate & Standardize Development ©2004-2010 R Blank 14
- 18.
- 21.
- 22.
- 23.
- 24. Load Play ©2004-2010 R Blank 19
- 25. Load Play & Display ©2004-2010 R Blank 19
- 26. Load Play & Display Media ©2004-2010 R Blank 19
- 27. 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
- 28. EVERY Flash supported media type ©2004-2010 R Blank 21
- 29. 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
- 30. 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
- 31. Plugins Developed by 3d Parties Or you! ©2004-2010 R Blank 24
- 32.
- 33.
- 34.
- 35. 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
- 36. 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
- 37. The Simplest Possible OSMF Player
- 38. Basic Structure ofan OSMF Player
- 39. Basic Structure ofan OSMF Player MediaElement Any supported media type video images sound etc
- 40. Basic Structure ofan OSMF Player MediaElement Any supported media type or CompositeElement video Parallel or Serial images sound etc
- 41. Basic Structure ofan OSMF Player MediaElement Any supported media type or CompositeElement video Parallel or Serial images sound Tell this to load stuff etc
- 42. Basic Structure ofan 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
- 43. Basic Structure ofan 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
- 44. Basic Structure ofan 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
- 45. Basic Structure ofan 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
- 46. 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
- 47. 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
- 48. 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
- 49. 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
- 50. 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
- 51. Simplest OSMF VideoPlayer 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
- 52.
- 53. 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
- 54. //listen for theclick 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
- 55.
- 56.
- 57.
- 58. MediaFactory Tell this to create MediaElements, with a URL
- 59. MediaFactory Tell this to create MediaElements, with a URL MediaElement
- 60. MediaFactory Tell this to create MediaElements, with a URL MediaElement VideoElement
- 61. MediaFactory Tell this to create MediaElements, with a URL MediaElement ImageElement VideoElement
- 62. MediaFactory Tell this to create MediaElements, with a URL MediaElement ImageElement VideoElement SoundElement
- 63. 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
- 64.
- 65.
- 66.
- 67. MediaContainer LayoutMetadata Controls how a MediaElement is displayed in the MediaContainer MediaElement
- 68.
- 69. 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
- 70.
- 71.
- 72.
- 73.
- 74.
- 75. HTTPStreamingNetLoader NetLoader RTMPDynamicStreamingNetLoader DVRCastNetLoader
- 76. change var videoElement:VideoElement = new VideoElement( resource ); to var videoElement:VideoElement = new VideoElement( resource , new RTMPDynamicStreamingNetLoader ( ) ); ©2004-2010 R Blank 52
- 77.
- 78.
- 79. MediaElement DynamicStreamingResource Vector.<DynamicStreamingResourceItem> low medium high
- 80. //create a newDynamicStreamingResource pointing to our FMS application var resource : DynamicStreamingResource = new DynamicStreamingResource ( RMTP_URL ) ; ©2004-2010 R Blank 55
- 81. //create a Vectorto store the DynamicStreaminingItem objects var vector : Vector.<DynamicStreamingItem> = new Vector.<DynamicStreamingItem> ( 3 ) ; ©2004-2010 R Blank 56
- 82. //create 3 entriesin 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
- 83. //set the streamItemsproperty 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
- 84. Dynamic Streaming ina 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
- 85.
- 86.
- 87. ParallelElement MediaElement MediaElement
- 88. ParallelElement MediaElement MediaElement concurrently
- 89. SerialElement MediaElement MediaElement consecutively
- 90. Basic Structure ofan OSMF Player with CompositeElements Playback MediaPlayer CompositeElement MediaElement MediaElement
- 91. Basic Structure ofan OSMF Player with CompositeElements Display MediaContainer MediaElement MediaElement
- 92. Basic Structure ofan OSMF Player with CompositeElements Display MediaContainer LayoutMetadata MediaElement MediaElement
- 93. Basic Structure ofan OSMF Player with CompositeElements Display MediaContainer LayoutMetadata LayoutMetadata MediaElement MediaElement
- 94. 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
- 95. Use two layoutsfor 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
- 96. 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
- 97.
- 98. //create a resourcepointing 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
- 99.
- 100.
- 101. MediaPlayer Properties duration ©2004-2010 R Blank 71
- 102. MediaPlayer Properties duration time ©2004-2010 R Blank 71
- 103. MediaPlayer Properties duration time autoPlay ©2004-2010 R Blank 71
- 104. MediaPlayer Properties duration time autoPlay autoRewind ©2004-2010 R Blank 71
- 105. Media Player Events TimeEvent.CURRENT_TIME_CHANGE ©2004-2010 R Blank 72
- 106. _mediaPlayer.addEventListener ( TimeEvent.CURRENT_TIME_CHANGE , _onCurrentTimeChange ) ; function _onCurrentTimeChange ( evt : TimeEvent ) : void { trace ( "_onCurrentTimeChange () , evt.time : " + evt.time ) ; } ©2004-2010 R Blank 73
- 107. Media Player Events MediaPlayerCapabilityChangeEvent. CAN_LOAD_CHANGE ©2004-2010 R Blank 74
- 108. _mediaPlayer.addEventListener ( MediaPlayerCapabilityChangeEvent.CAN_LOAD_CHANGE , _onCanLoadChange ) ; function _onCanLoadChange ( evt : MediaPlayerCapabilityChangeEvent ) : void { trace ( "_onCanLoadChange () , evt.enabled : " + evt.enabled ) ; } ©2004-2010 R Blank 75
- 109. Media Player Events MediaPlayerCapabilityChangeEvent. CAN_PLAY_CHANGE ©2004-2010 R Blank 76
- 110. _mediaPlayer.addEventListener ( MediaPlayerCapabilityChangeEvent.CAN_PLAY_CHANGE , _onCanPlayChange ) ; function _onCanPlayChange ( evt : MediaPlayerCapabilityChangeEvent ) : void { trace ( "_onCanPlayChange () , evt.enabled : " + evt.enabled ) ; } ©2004-2010 R Blank 77
- 111. Media Player Events MediaPlayerCapabilityChangeEvent. CAN_SEEK_CHANGE ©2004-2010 R Blank 78
- 112. _mediaPlayer.addEventListener ( MediaPlayerCapabilityChangeEvent.CAN_SEEK_CHANGE , _onCanSeekChange ) ; function _onCanSeekChange ( evt : MediaPlayerCapabilityChangeEvent ) : void { trace ( "_onCanSeekChange () , evt.enabled : " + evt.enabled ) ; } ©2004-2010 R Blank 79
- 113. Media Player Events MediaErrorEvent.MEDIA_ERROR ©2004-2010 R Blank 80
- 114. _mediaPlayer.addEventListener ( MediaErrorEvent.MEDIA_ERROR, _onMediaError ) ; function _onMediaError ( evt : MediaErrorEvent ) : void { trace ( "_onMediaError () , evt.error : " + evt.error ) ; } ©2004-2010 R Blank 81
- 115. Media Player Events MediaPlayerStateChangeEvent. MEDIA_PLAYER_STATE_CHANGE ©2004-2010 R Blank 82
- 116. _mediaPlayer.addEventListener ( MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE , _onMediaPlayerStateChange ) ; function _onMediaPlayerStateChange ( evt : MediaPlayerStateChangeEvent ) : void { trace ( "_onMediaPlayerStateChange () , evt.state : " + evt.state ) ; } ©2004-2010 R Blank 83
- 117. MediaPlayer State Values playing loading buffering uninitialized ready ©2004-2010 R Blank 84
- 118.
- 119. read the docs ©2004-2010R Blank 86
- 120. check sample files ©2004-2010R Blank 87
- 121. start working withit ©2004-2010 R Blank 88
- 122. Thank You Training: richmediainstitute.com Production: almerblank.com Blog: rblank.com ©2004-2010 R Blank 89
Editor's Notes
- #2 download slides and all code @ rblank.com shortly after this talk
- #3 about me ...>
- #5 ...well what does that mean?
- #14 a framework - a bunch of code you can use out of the box why?
- #15 ...what type of development?
- #16 ...what type of development?
- #17 ...what type of development?
- #18 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's specifically built to be flexible in that way
- #19 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
- #20 so just as the Flex Framework has helped standardize and accelerate the production of what we call RIAs, that's what OSMF is to media -- an ActionScript 3 framework to standardize the creation of media delivery experiences on the Flash Platform it's still in beta, but at Sprint 10, v0.93, much of the API has now been locked down, so it's gonna be a lot more fun to play and work with it no GUI components -- yet but nothing's stopping you!
- #30 1) RSS media reader 2) closed captioning 3) akamai CDN integration
- #33 download
- #34 the source includes a ton of files -- go straight to this one also download the ASDocs for helpful reference, but those aren't required to work with it
- #37 media player can contain one MediaElement at a time mediacontainers can multiple MediaElements at a time
- #38 media player can contain one MediaElement at a time mediacontainers can multiple MediaElements at a time
- #39 media player can contain one MediaElement at a time mediacontainers can multiple MediaElements at a time
- #40 media player can contain one MediaElement at a time mediacontainers can multiple MediaElements at a time
- #41 media player can contain one MediaElement at a time mediacontainers can multiple MediaElements at a time
- #42 media player can contain one MediaElement at a time mediacontainers can multiple MediaElements at a time
- #43 media player can contain one MediaElement at a time mediacontainers can multiple MediaElements at a time
- #44 if you'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
- #49 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...>
- #55 use of mediafactory is optional each specific type of media element has specific traits but if you use a mediafactory, you don'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'm not covering today) requires using the mediafactory, precisely because it's agnostic on the specific type of MediaElement
- #56 use of mediafactory is optional each specific type of media element has specific traits but if you use a mediafactory, you don'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'm not covering today) requires using the mediafactory, precisely because it's agnostic on the specific type of MediaElement
- #57 use of mediafactory is optional each specific type of media element has specific traits but if you use a mediafactory, you don'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'm not covering today) requires using the mediafactory, precisely because it's agnostic on the specific type of MediaElement
- #58 use of mediafactory is optional each specific type of media element has specific traits but if you use a mediafactory, you don'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'm not covering today) requires using the mediafactory, precisely because it's agnostic on the specific type of MediaElement
- #59 use of mediafactory is optional each specific type of media element has specific traits but if you use a mediafactory, you don'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'm not covering today) requires using the mediafactory, precisely because it's agnostic on the specific type of MediaElement
- #67 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't, the MediaFactory will create the right one for you the plain vanilla NetLoader is useful in most cases...>
- #68 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't, the MediaFactory will create the right one for you the plain vanilla NetLoader is useful in most cases...>
- #69 but the netloader has three inheritors which give us some fun powers right away http streaming...>
- #70 ... a more traditional type of streaming is RTMP you've seen how easy it is to do streaming with OSMF -- it's the same exact code as progressive OSMF also makes dynamic streaming really easy
- #78 you don'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
- #83 compositeelements do not factor into the display at all technically layout metadata is optional, but almost certainly required when using parallelelements
- #84 compositeelements do not factor into the display at all technically layout metadata is optional, but almost certainly required when using parallelelements
- #90 it'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're probably going to want to know a few properties and a few events on the MediaPlayer
- #108 read the tutorials and check the sample code there's a fair bit on Adobe Dev Center (linked from osmf page) also, there'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