Creating and Embedding a Customized Player, Part III
In Part I, we looked at the basic formatting and embedding of the player -- also looking at methods to assign external buttons for controlling basic functions of the player. In
Part II, we reviewed more complicated functions, including the volume control, the video clock, and the bandwidth display functions. In Part III, we'll look at the clip properties and close with making the transition to Windows Media.
Before We Get Started
Again, the full version of the player (Real) is located here.If you haven't done so already, please download a full version of the code and graphics here.And lastly, the RealPlayer Embedded SDK can be found here.
Additional resources for Part III include the full version of the player (WMT). You may download all of the WMT code and graphics here. And lastly, the Windows Media SDK can be found here. (Note: the Windows Media SDK is a 22MB download)
Outline
The following is a basic outline of the pieces of this embedded player.
- Formatting and Framework
- Media Player ActiveX Control
- Media Player Full, Play, Pause, and Stop Controls
- Media Player Volume Control
- Media Player Clock and Bandwidth Properties
- Media Player Clip Information Properties
- Transition to the Windows Media Player
We'll finish the series by looking at items 6 and 7, the clip information properties and making the transition to Windows Media.
Clip Properties
If we look back at all the properties we've accessed thus far --the volume status, the media position, and the current and average bandwidths-- we'll notice that accessing the clip properties is no different. In fact, because we don't actually perform any data conversion, as we did in the previous cases, displaying the title, author, and copyright is very simple.
The following is the DIV to which we will write the clip properties:
Again, we will be using the innerTEXT property to update these DIVs. We have created a javascript function that is called by the applicationLoad() function, so the clip properties are attained when the player is loaded. We will be calling three player methods to get the Title, Author, and Copyright. These are GetTitle(), GetAuthor(), and GetCopyright(), respectively.
In the following javascript function, we query the media player for these strings, check to see if they are null, and then write them to their respective DIVs. If the returned strings are null, we'll just set the string value equal to "none".
You'll notice that once we've implemented the video clock and bandwidth display functions, this is very straightforward.
Making the Transition to Windows Media
Now that we've gone through the entire application, let's look at making the transition to Windows Media. There are two things we'll need to examine during this transition.
- The object tag.
- The corresponding properties and methods and there parameters and return values.
The first is straightforward, as discussed below. The second is a bit more involved, as we need to see if a corresponding property or method exists, and if so, what value it returns. In certain cases, the parameters and return values are different and we need to make changes to our logic. In other cases, there is no corresponding property or method at all.
We will be using the same base HTML and Style Sheet. It is not required to make any changes to the formatting in order to make this transition.
Windows Media Object Tag
The Windows Media object tag looks like this:
Notice the two object tags are very similar to one another. We have kept the object id the same as in the RealPlayer version. This will enable us to only change the property or method, without needing to change the object id throughout.
Properties and Methods
We begin to discover the differences between the two players when we start looking at the players' corresponding properties and methods. The following is a table relating the properties and methods we use in this application.
| Property or Method | RealPlayer | Windows Media | WMT Differences |
| Play | DoPlay | Play | |
| Pause | DoPause | Pause | |
| Stop | DoStop | Stop | |
| Full Screen | SetFullScreen | DisplaySize(3) | General set display size function. Required parameter, 3, specifies full screen |
| Volume | SetVolume | Volume | Accepts an input of between -10,000 and 0 rather than 0 and 100. |
| Position / Clock | GetPosition | CurrentPosition | Returns seconds, not milliseconds |
| Current Bandwidth | GetBandwidthCurrent | None | WMT does not have a corresponding method |
| Average Bandwidth | GetBandwidthAverage | None | WMT does not have a corresponding method |
| Title | GetTitle | GetMediaInfoString(1) | General media info string function. Required parameter. |
| Author | GetAuthor | GetMediaInfoString(2) | " |
| Copyright | GetCopyright | GetMediaInfoString(3) | " |
One of the first noticeable differences is the way we assign values to various properties of the WMT ActiveX control. Using RealPlayer, we assign a value using a syntax of Property(parameter). Using WM, we assign a value using a syntax of Property = parameter.
We'll begin to go through the functions, one by one, and make the switch.
Play, Pause, and Stop Functions
Of all the functions, these require the least changes in order to make the transition to Windows Media. Referencing the above table, notice the methods are virtually identical.
The following is the WM code for the play function:
Again, the only difference between the Windows Media version is objMediaPlayer.Play() as opposed to objMediaPlayer.DoPlay() for the RealPlayer version.
FullScreen
The FullScreen function demonstrates some of the subtle differences between the two ActiveX controls. With Real, the method used is objMediaPlayer.SetFullScreen(). Using WMT, however, we use the DisplaySize property. In order to set the video into full screen mode, we need to assign the DisplaySize property a value of 3. Note: Reference the SDK for a full list of the various states allowed.
The following is the full screen function:
In Windows Media, we assign a value to a property using a property = parameter syntax.
Volume
The volume function is an example of the significant differences in the way each ActiveX control manages the volume state. Using the RealPlayer, we set the volume using the SetVolume() function, passing a value of between 0 and 100. Windows Media, however, requires a parameter with a value between -10,000 and 0, where 0 is the loudest. This requires some changes to our logic. It's not required to make any changes to the display function, controlling the volume status bars, however, we will need to make the conversion from 0 - 8, representing the status bars, to -10,000 and 0, representing the volume. The only required change exists in the setVolume() function.
The following is the setVolume() function for Windows Media:
The conversion routine used subtracts 8 from the passed volume parameter and multiplies the result by 1250 to get a value between -10,000 and 0, with 0 as full volume. We thereby changed the method, SetVolume() into a property, Volume, and assigned it the result value.
Video Clock
Similar to the volume function, the video clock function requires some changes. In this case, however, the return value --rather than the passed value-- is different, although minor. Using the RealPlayer method, GetPosition(), we received a value in milliseconds. Using the Windows Media property, we receive a value in seconds. This requires only a minor change in our code, as seen below.
There are two changes in the code snippet above. First we changed the additional conditional expression, objMediaPlayer.BufferingProgress == 100. We've inserted this due to a minor bug. When the play button is pressed, the videoPlay() function instantiates the loop calling the videoClock() function. However, if the Windows Media player is buffering, a -1 is returned, causing an erroneous clock display. By inserting this conditional, we are checking to see if the buffering progress has reached 100%, and only then do we execute the following logic.
Because we are receiving a value in seconds rather than milliseconds, do not divide the returned value by 1000 before moving on to the rest of the 00:00:00 formatting conversion.
Current and Average Bandwidths
Here you'll notice a problem that will come up over and over again when developing cross technology applications. In fact, there are no corresponding properties and methods in the Windows Media Player to access the current and average bandwidths. While we could abstract this information by timing the number of packets received against one another, this would not be as accurate and would take a substantial bit of code. For the purpose of this tutorial, we will replace the bandwidth displays with packet displays, showing the number of packets received and the overall packet reception quality, as this concept remains the same.
The following is the new DIV replacing the bandwidth displays:
Notice the DIV id has changed to reflect a more accurate naming convention, but the class ids have not. The class ids were left with the old names in order to not create redundant style sheet entries.
We will use two WM properties to get the packet information: ReceivedPackets and ReceptionQuality -- both of which return an integer.
The following getPackets() function is almost identical in logic to the corresponding getBandwidth() function in the Real version of the player.
We query the media player for the packets received and the reception quality, check to see if they're null, and then update the innerText properties of their corresponding DIVs.
Clip Info
The final pieces of the application requiring transitioning are the clip information displays. The code changes here are similar to the full screen function. Windows Media uses a singular method with parameters rather than individual ones as with Real.
We will use the GetMediaInfoString() method, passing a 1 to request the title, a 2 to request the author, and a 3 to request the copyright.
The following is the clipInfo() function:
The only differences in this function are the media player methods, as the return values are identical to those returned by the RealPlayer.
Conclusion
To reiterate, the majority of programming involved in creating a customized, embedded player builds upon technologies independent of the embedded media player, such as Javascript and CSS. I would encourage you to explore the SDKs, as there exist a wealth of features allowing for functionality far beyond what we've covered here.
Contributor Marco Bianco is CTO at OverDrive Media.OverDrive Media is a full service streaming media development house delivering world-class streaming media solutions.