Home

Articles

Product Reviews

Developer FAQ

Free Controls

About Me

Games

LANGUAGES: VB.NET | C#

ASP.NET VERSIONS: 2.x

QuickTimePlayer

Tour the Source Code of the Free ASP.NET QuickTimePlayer Control

By Steve C. Orr

Playing QuickTime movies from an ASP.NET Web form can be a little tricky. At first it may not seem difficult, but there are a lot of little details to worry about — such as browser differences, ActiveX activation, and the list of acceptable parameters. The QuickTimePlayer control detailed here (and shown in Figure 1) takes care of all those issues, reducing the task to drag-and-drop simplicity.


Figure 1: The QuickTimePlayer control eliminates the chores involved with playing QuickTime movies.

During the exploration of this control you’re also likely to learn a lot about custom Web control design, ActiveX activation, and ASP.NET 2.0 Web resources. All major browsers are supported by the QuickTimePlayer control, including Internet Explorer, Firefox, Safari, America Online, Opera, and Netscape.

How to Use It

The QuickTimePlayer.dll can be added to your Visual Studio toolbox via right-click just like any other control (see end of article for download details). When that task is done, it can be dragged from the toolbox onto any ASP.NET Web form, where a definition similar to this will be rendered to the ASPX:

<cc2:QTPlayer

    ID="QTPlayer1"

    runat="server"

    MOVFile="Sample.mov"

    Width="250" Height="270"

    AutoPlay="true"

    ShowMenu="false">
</cc2:QTPlayer>

Of course, you can type such a declaration manually, if preferred. The MOVFile property is the only one you’ll definitely need to adjust, because it defines which QuickTime movie (*.mov) will be played. There are a variety of other useful properties, as well, including properties for caching the movie and looping the movie endlessly. The full list of unique QuickTimePlayer properties is shown in Figure 2.

QuickTimePlayer Property	Default Value	Description
AutoPlay	True	Specifies whether or not the movie file should automatically start playing as soon as the page is loaded.
Cache	False	A Boolean property that determines whether to cache the video file or not.
Hidden	False	If this Boolean property is set to true, video will not be shown; audio only.
Loop	False	When this Boolean property is set to true it will cause the movie to loop continuously.
MOVFile		Set this string property to the filename of the QuickTime file that should be played.
ShowMenu	True	If this Boolean property is set to false then the dropdown/context menu for the control will not be available, disabling the feature to save the file locally.

Figure 2: The QuickTimePlayer control has many properties that allow adjustment of the look and behavior of the player.

The ShowMenu property can be used to disable the dropdown/context menu that is normally available in QuickTimePlayer. That menu’s primary feature is to allow the user to save the movie file to a local drive. Set the ShowMenu property to False to deny users of that feature. (However, knowledgeable users can still likely use more complex techniques to snag your content.)

The Hidden property can be set to True if you only want to play audio. No video or user interface will be visible when this property is set to its non-default value of True.

The AutoPlay property ensures that a movie starts playing at its first available opportunity. If set to False the movie will load but not play upon page load, as it normally would. The movie can then be started via JavaScript or as a result of the user clicking the play button. The Boolean AutoPlay property’s default value is True.

With the knowledge you now have about using the QuickTimePlayer control, you could stop reading here and start developing with it. But if the developer in you wants to find out the details about the QuickTimePlayer’s inner workings, keep reading ...

How It Works

To play a QuickTime movie on your own (without the aid of the QuickTimePlayer control), you’d include some HTML similar to that shown in Figure 3.

Figure 3: QuickTime movies can be played in most browsers (except Internet Explorer) with a bit of HTML such as this.

This would work great in virtually all browsers except Internet Explorer, which requires a completely different syntax. To play a movie in Internet Explorer, the syntax shown in Figure 4 must be used. However, if this HTML is placed directly in the page, then ActiveX activation will be required, annoying users and forcing them to click on the control before they can interact with it.

Figure 4: Internet Explorer requires this syntax to play QuickTime movies, but ActiveX activation will be required if this HTML is embedded directly in the page.

One common technique is to always output both syntaxes. All browsers will pick the syntax they like and ignore the other one, so it works without issue. When given a choice, however, I prefer tidy HTML output. I don’t want to waste bandwidth by outputting HTML that is not used. Therefore, the QuickTimePlayer control only outputs the most appropriate syntax.

Essentially the QuickTimePlayer control detects which browser the user has and outputs the syntax in Figure 4 for Internet Explorer, or the syntax shown in Figure 3 for other browsers. The control’s private RenderForAlt subroutine (listed in Figure 5) takes charge of rendering the HTML for non-Internet Explorer browsers. The resulting output is similar to that shown in Figure 3.

Figure 5: This VB.NET function interprets the QuickTimePlayer control’s property settings and uses them to render HTML similar to that shown in Figure 3.

We could use a nearly identical function for outputting Figure 4 HTML syntax for Internet Explorer, but, as mentioned previously, that would impose ActiveX activation upon the user.

Avoiding ActiveX Activation

To avoid ActiveX activation, object tags (such as shown in Figure 4) must be output dynamically on the client side by an external JavaScript file. The JavaScript file (named qt.js) used by the QuickTimePlayer control is listed in Figure 6.

Figure 6: This client-side JavaScript function is invoked to dynamically output HTML object syntax similar to that shown in Figure 4, thus avoiding ActiveX activation.

Because this script remains static, the only dynamic server-side output the QuickTimePlayer control needs to render for Internet Explorer browsers is a single line of JavaScript that calls the function in Figure 6:

CreateIEMOV('QTPlayer1', 'Sample.mov', 250, 270, '0000cd',

true, false, false, false, false);

The private RenderForIE subroutine (listed in Figure 7) dynamically generates the above JavaScript function call.

Figure 7: This VB.NET function generates a line of JavaScript that calls the function in Figure 6, which in turn instantiates QuickTimePlayer for Internet Explorer.

ASP.NET 2.0 Embedded Web Resources

You’re likely aware that external JavaScript files must be referenced with HTML similar to this:

<script language="javascript" src="qt.js"></script>

If the qt.js file is not referenced, Internet Explorer rendering won’t work because the client-side CreateIEMov function won’t be available. These items can be embedded within the control itself to avoid having to remember to include the JavaScript file and the above reference to it in every page and project that uses the QuickTimePlayer control.

The qt.js file shown in Figure 6 is included in the QuickTimePlayer control’s Visual Studio Web control library project. This file’s Build Action property is set to Embedded Resource, which causes it to be compiled directly into the control’s assembly. The next step required for configuring this file as an ASP.NET 2.0 embedded resource is to add the following declaration near the top of the class file:

<Assembly: System.Web.UI.WebResource("ControlFreak.qt.js", "text/javascript")>

The file (qt.js) must be prefixed with the correct namespace (ControlFreak); this is all case sensitive. When an embedded resource isn’t rendering as you expect, this string is the most likely culprit. It must be formed quite specifically or it won’t work.

Finally, the reference to the file must be rendered for Internet Explorer users, as is done by the VB.NET code shown in Figure 8. Once again, be very careful with the file and namespace reference (assigned to the rsname variable); it must be precise.

Figure 8: The OnPreRender event is a good place to include references to embedded resources.

ASP.NET 2.0 embedded Web resources are vital for creating professional, user-friendly server controls. I suggest you get to know and love them.

Finishing Touches

The Render method listed in Figure 9 is used to ensure the MOVFile property is set and to determine which browser output should be rendered. Either the RenderForIE subroutine or the RenderForAlt subroutine is called, depending on the user’s browser.

Figure 9: The Render method is overridden to ensure the MOVFile property is set and to determine which browser output should be rendered.

The properties of the QuickTimePlayer control are fairly standard, with most of them looking a lot like those shown in Figure 10.

Figure 10: The properties of the QuickTimePlayer control are fairly standard.

As you can see, standard attributes are applied to categorize the property, permit data binding, set the default value, and provide a description to be shown in the Visual Studio Property window at design time. ViewState is used to store the property value between postbacks.

The MOVFile property definition is a little more interesting, adding a couple more attributes (see Figure 11).

Figure 11: Added attributes make the MOVFile property definition more interesting.

The Editor attribute is used to ensure the UrlEditor dialog box should appear when the developer clicks the ellipsis button next to the property in the Visual Studio Property window at design time.

This sums up the major features and functions of the QuickTimePlayer control.

Conclusion

The QuickTimePlayer control encapsulates the complexities involved with playing QuickTime movies. It automatically handles browser differences, detecting and outputting the best and most efficient HTML syntax. It also eliminates ActiveX activation by refactoring the rendering of the object tag into an external JavaScript file. This JavaScript file is incorporated as an ASP.NET 2.0 embedded Web resource to add a professional polish and eliminate the possibility that required resources or references could be forgotten.

Download the control now to simplify QuickTime movie playing in your ASP.NET Web applications. If you don’t like it, do something about it! You’ve got the source code. I’d love to hear about any creative enhancements you make to the QuickTimePlayer control.

If you like this QuickTimePlayer control then perhaps you'll also find my flash player control or streaming media control useful as well.

The source code for this article is available for download here.

The original version of this article was published in the May 2007 issue of ASP.NET Pro Magazine.