The ESA HD Media Player supports the playback of videos hosted on YouTube. Because we have implemented YouTube’s entire AS3 API into our MediaPlayer component, you can easily load and manipulate YouTube videos with our default components, and you can even take advantage of the small, medium, large, and HD720 formats they offer using any of our bit rate switching options, including: automated selection based on bandwidth, dynamic switching for seamless transitions, and user defined switching that allows your users to switch on the fly. A few key advantages of using YouTube as your content host include free hosting and bandwidh, easy uploading and encoding to multiple bit rates, ability to seek to any part of the video at any time (i.e. you don’t have to wait for the entire video to download), and seamless bit rate switching (picks up right where it left off with only a minor pause and no blank screen). However, there are also a few key disadvantages to using YouTube’s free service, including: they don’t allow access to the NetStream object, so their content does not work with the CCForFlash component (i.e. no external caption support), you can’t adjust the buffer time, you can’t use the smoothing option, and you can’t detect dropped frames; you are not allowed to overlay anything on top of a YouTube video (no links, captions, overlays, or logos); and you can’t get rid of the clickable YouTube logo that appears in the lower right corner of the video (links back to the YouTube page where that video is featured).
To load YouTube videos you must use the following syntax to reference your files using the Component Inspector, FlashVars, JavaScript, ActionScript, or XML. Please note: VIDEO_ID is the ID value provided by YouTube for that particular video:
To use the other bit rate options offered by YouTube, you must enable the bandwidth detection and bit rate switching buttons in our player, and you must use our XML playlist file to define the urls and speed thresholds as shown below. Please note: the same VIDEO_ID should be used for all three versions in the XML, and our player will sort out the rest. The LD version equals YouTube’s ”small” file, the MD version equals YouTube’s “medium” file, and the HD version equals YouTube’s ”hd720″ file (if the hd720 file does not exist the HD version equals YouTube’s ”large” file). Also note: our player will not pull any images from YouTube, so you have to store any images you want to display on your own web server.
The ESA HD Media Player supports automated and manual bit rate switching that works with all web servers (http:progressive), Flash Media Server 3 or 4 (rtmp:streaming), Wowza, Red5, and YouTube. This feature allows you to deliver the appropriate media to users based on their bandwidth and CPU capabilities. To enable the bit rate switching you need to enable the bandwidth detection and you must set up your XML to refer to multiple versions of your media files at different bit rates. You can also enable the bit rate selector buttons to allow your users to manually switch to a different bit rate.
Bandwidth Detection: When the player first loads on the page it will estimate the user’s bandwidth and load the appropriate media item. If you are not familiar with our bandwidth detection system, you should refer to our ”Automated Bandwidth Detection” tutorial to learn more.
Setting Up The XML: “items” container
Along the top of the XML is the “items” container, which can include the following attributes that are used to configure the bit rate switching system. Here we discuss only the nodes and attributes that are relevant to bit rate switching.
dynamicStream attribute (true, false): If set to “true” and the files are hosted on a FMS 3.5/4 or YouTube, the player will seamlessly transition from one file to another, so the playhead will not stop and the user will barely notice that the player has switched to a different bit rate (pros: impressively smooth transitions; cons: the transition takes a few seconds and you can not use any of the player controls during the transition). If set to “false” and/or the files are not hosted on a FMS 3.5 or YouTube, the player will unload the current media item then load the new file, so the user will see a blank screen for a moment while the switching occurs (pros: fast transitions, the player controls are always enabled, and streaming files pick up where the playhead left off; cons: momentary blank screen and progressive files restart at time 0). This setting can also be configured using the “dynamicStreaming” parameter in the MediaPlayer’s Component Inspector (remember, XML settings override Component Inspector settings)
autoSwitch attribute (true, false): If set to “true” the player will automatically switch to a lower bit rate option if the player stops to buffer too many times (indicates that the user’s bandwidth has dropped) or if there are too many dropped frames (indicates that the user’s CPU is unable to handle the current bit rate; this option does not work with YouTube). You can use the “dynamicBufferStops” and “droppedFrameLimit” parameters in the MediaPlayer’s Component Inspector to adjust these thresholds; and the autoSwitch setting can also be configured using the “dynamicAutoSwitch” parameter in the MediaPlayer’s Component Inspector (remember, XML settings override Component Inspector settings).
bandwidthTest attribute (string): See the bandwidth detection section above.
“item” container The body of the XML is comprised of one or more “item” containers that include media nodes (used to reference the media files that will be loaded into the player) and attributes (used to control various aspects of the media playback). Here we discuss only the nodes and attributes that are relevant to bit rate switching.
media node (string): This node is required and is used to define the path to the medium-definition media file (should NOT include the kbps attribute). When the player is operating in auto mode (always in auto mode until the user manually selects a different bit rate), this file will be selected if the user’s bandwidth exceeds the bandwidth threshold for the mediaLD file and is less than the bandwidth threshold for the mediaHD file. When using YouTube, this version refers to their “medium” file.
mediaHD node (string) with kbps attribute (number): This node is optional and is used to define the path to the high-definition media file. If this node is used, you must define the kpbs attribute, which is used to established the bandwidth threshold for the high-definition file. When the player is operating in auto mode (always in auto mode until the user manually selects a different bit rate), this media file will be selected if the user’s bandwidth exceeds the bandwidth threshold for the high-definition file. When using YouTube, this version refers to their “hd720″ file, or if it does not exist, it refers to their “large” file.
mediaLD node (string) with kbps attribute (number): This node is optional and is used to define the path to the low-definition media file. If this node is used, you must define the kpbs attribute, which is used to established the bandwidth threshold for the low-definition file. When the player is operating in auto mode (always in auto mode until the user manually selects a different bit rate), this media file will be selected if the user’s bandwidth is less than the bandwidth threshold for the low-definition file. When using YouTube, this version refers to their “small” file.
Progressive XML Example: In the following XML example we have stripped out all of the attributes and nodes that are not relevant to bit rate switching. Notice the dynamicStream is set to “false” (only works with FMS 3.5 or 4), and the paths for the bandwidthTest and media files all use the ‘http’ protocol to refer to files on a web server:
Streaming XML Example: In the following XML example we have stripped out all of the attributes and nodes that are not relevant to bit rate switching. Notice the dynamicStream attribute is set to “true” (only works with FMS 3.5/4 and YouTube), and the paths for the bandwidthTest and media files all use the ‘rtmp’ protocol to refer to files on a Flash Media Server 3 or 4:
YouTube XML Example: In the following XML example we have stripped out all of the attributes and nodes that are not relevant to bit rate switching. Notice the dynamicStream attribute is set to “true” (only works with FMS 3.5/4 and YouTube), and the paths for the bandwidthTest and media files all use the ‘http’ protocol to refer to files on a web server:
Manual Bit Rate Selector Buttons: To allow users to manually select the bit rate that is best for them, you can enable the “LD-MD-HD” bit rate selector buttons using the ”enableDEF” parameter in the Controller’s Component Inspector (already enabled in our default player). Once a user manually selects a bit rate, all of the player’s automated bit rate switching routines are disabled.