The document discusses the OSMF (Open Source Media Framework) framework for creating Flash-based media experiences. It describes the basic structure of an OSMF player including the MediaPlayer, MediaElement, and MediaContainer classes. It covers loading and playing media, controlling playback, using media factories, layouts, composite elements, and subclipping. The full code example shows how to create a basic OSMF video player.

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

3. What is OSM Framework?

4. framework for creating
Flash-based media
experiences
©2004-2010 R Blank 4

5. Delivery Platform

6. Creation Tools
Delivery Platform

7. Content
Creation
Tools
Delivery
Platform

8. Content
Code
Creation
Tools
Delivery
Platform

9. Content
Code
Application Framework
Creation
Tools
Delivery
Platform

10. Content
Code
Application Framework Media Framework
Creation
Tools
Delivery
Platform

11. Content
Code
Application Framework Media Framework
Creation
Tools
Delivery
Platform

12. Content
Code
Application Framework Media Framework
Creation
Tools
Delivery
Platform

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

15. Benefits of a Framework
Accelerate
©2004-2010 R Blank 14

16. Benefits of a Framework
Accelerate
& Standardize
©2004-2010 R Blank 14

17. Benefits of a Framework
Accelerate
& Standardize
Development
©2004-2010 R Blank 14

18. media
©2004-2010 R Blank 15

21. Capabilities

22. ©2004-2010 R Blank 19

23. Load
©2004-2010 R Blank 19

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. Getting Started

33. Installing in Flash

34. adobe.com/go/osmf
©2004-2010 R Blank 27

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 of an OSMF Player

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

40. Basic Structure of an OSMF Player
MediaElement
Any supported media type or CompositeElement
video Parallel or Serial
images
sound
etc

41. 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

42. 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

43. 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

44. 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

45. 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

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 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

52. Controlling Playback

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 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

55. Using More Features

56. Media Factories

57. MediaFactory

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. Layouts

65. MediaContainer
MediaElement

66. MediaContainer
LayoutMetadata
MediaElement

67. MediaContainer
LayoutMetadata
Controls how a
MediaElement is displayed
in the MediaContainer
MediaElement

68. LayoutMetadata
width
height
x
y
...
can be absolute or relative

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. NetLoader

71. MediaElement

72. MediaElement

73. MediaElement
NetLoader

74. HTTPStreamingNetLoader
RTMPDynamicStreamingNetLoader
DVRCastNetLoader

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. MediaElement

78. MediaElement
URLResource
"some.flv"

79. MediaElement
DynamicStreamingResource
Vector.<DynamicStreamingResourceItem>
low medium high

80. //create a new DynamicStreamingResource
pointing to our FMS application
var resource : DynamicStreamingResource = new
DynamicStreamingResource ( RMTP_URL ) ;
©2004-2010 R Blank 55

81. //create a Vector to store the
DynamicStreaminingItem objects
var vector : Vector.<DynamicStreamingItem> =
new Vector.<DynamicStreamingItem> ( 3 ) ;
©2004-2010 R Blank 56

82. //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

83. //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

84. 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

85. Composite Elements

86. ParallelElement

87. ParallelElement
MediaElement MediaElement

88. ParallelElement
MediaElement MediaElement
concurrently

89. SerialElement
MediaElement MediaElement
consecutively

90. Basic Structure of an OSMF Player
with CompositeElements
Playback
MediaPlayer
CompositeElement
MediaElement MediaElement

91. Basic Structure of an OSMF Player
with CompositeElements
Display
MediaContainer
MediaElement MediaElement

92. Basic Structure of an OSMF Player
with CompositeElements
Display
MediaContainer
LayoutMetadata
MediaElement MediaElement

93. Basic Structure of an 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 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

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. Subclipping

98. //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

99. Full Basic Player

100. MediaPlayer Properties
©2004-2010 R Blank 71

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. Next Steps
adobe.com/go/osmf

119. read the docs
©2004-2010 R Blank 86

120. check sample files
©2004-2010 R Blank 87

121. start working with it
©2004-2010 R Blank 88

122. Thank You
Training: richmediainstitute.com
Production: almerblank.com
Blog: rblank.com
©2004-2010 R Blank 89