Serving HTML5 videos with ColdFusion 10

In ColdFusion 10, we revamped the CFMEDIAPLAYER tag to support HTML5 videos. Earlier, you could use this tag to play only Flash video formats (FLV). With ColdFusion 10, you can support HTML5 video formats like MP4, OGV, and WEBM. In ColdFusion 10, we built the CFMEDIAPLAYER tag on the Open Source Media Framework (OSMF), which allows you to extend the functionality of the tag with plug-ins built on the OSMF framework. With a growing interest in HTML5 standards, the changes brought about in ColdFusion 10 signify a gigantic leap for the video player–in terms of supporting new formats, new sources of video content, and customization options. In terms of compatibility, it is cross-browser and cross-device compatible. It is equipped to support multiple devices, such as iPads and Android tablets and phones.

This article aims to initiate users in setting up a video player for HTML5 videos, help users understand the CFMEDIAPLAYER behavior in cases of fallback, and give users a brief idea about the new features available to customize the player according to the user's requirements.

To play HTML5 video using the CFMEDIAPLAYER tag, specify the video name in the source attribute, just as you would for any Flash video, as follows:

The CFMEDIAPLAYER tag recognizes the video as HTML5 video and loads the HTML5 player in the browser. Video playback depends on browser support. Not all browsers support all HTML5 video formats. To see, try to load the above-mentioned snippet in Chrome or Firefox.

We have designed the Flash and HTML5 players to look as identical as possible so as to support seamless fallback.

Use the type attribute to enforce Flash/HTML5 playback

You can use the newly added type attribute to specify whether your browser plays the same video as a Flash or HTML video. This is pretty useful when you want to enforce a particular type of content to be sent to the client.

You can play MP4 videos as both Flash and HTML videos. This essentially means that if you try to play an MP4 video with Flash enabled, you see a Flash player loaded (right-click the player and observe the "About Flash Player" info) and when you enable HTML the browser loads the HTML player.

Try this in Chrome to see the difference, using the following code:

The default value for the type attribute is flash to support backward compatibility.

Use the ColdFusion.MediaPlayer.getType(player_id) function to retrieve the type of playback through JavaScript

You can use the ColdFusion.MediaPlayer.getType(player_id) method to retrieve the type of playback at runtime using the following code:

Try to play this snippet in Chrome, first with Flash enabled and then disabled. Click the button Player 1 to view the player type.

Use the HTML source tag to specify video as source

You can also use the HTML source tag instead of the CFMEDIAPLAYER tag's source attribute to specify the video source. I discuss this later in the Flash/HTML5 fallback support section.

ColdFusion 10 comes equipped with fallback support for multiple browsers. Depending on Flash availability and HTML5 support by a browser, you can use the CFMEDIAPLAYER tag to ensure that your player behaves seamlessly no matter whether Flash is present or absent; whether HTML5 support is present or absent.

Fallback support ensures that your video solution works across browsers, iPads, Android devices, and so forth.

Setting up fallback support for multiple browsers

The CFMEDIAPLAYER tag uses the browser's capability to decide whether to play a video as Flash or HTML. You do not need to use the type attribute to observe fallback. Suppose you declare a CFMEDIAPLAYER tag with source as mp4, as follows:

Now, play this snippet in a browser (Chrome, IE9, Safari) with Flash enabled. Flash player loads in the browser. Next, use the getType() method as specified above and check the type of the player. You shall see that it is the Flash player. Now, go ahead and disable Flash through the browser tools. Reload the page. Now the player automatically loads a slightly different player for the same source. Use the getType() method again, and notice that the player is HTML. When the browser loads or reloads the page, ColdFusion detects the presence and absence of Flash and loads the appropriate player.

You can observe another example of fall back in Firefox (currently running version 11). Firefox does not support the MP4 format that is typically playable in HTML.

Playing the above-mentioned code snippet plays the MP4 video in Flash. ColdFusion detects that Firefox is unable to play the video in the type specified and automatically falls back to Flash to play the video.

Setting up fallback through the HTML source tag.

You can use the CFMEDIAPLAYER tag with the HTML source tag to specify multiple sources for the CFMEDIAPLAYER tag. ColdFusion uses this information to choose the most appropriate video to play from the specified list depending on browser capability, the type specified, and the order in which you have specified video. If the browser cannot play the first video specified in the list, CFMEDIAPLAYER cycles through the video list looking for a playable video for that particular browser according to the type specified. In the case where the browser is unable to find a video, the fallback process occurs and the browser plays first playable video. Run the following code snippet in Flash-enabled Chrome.

Notice that the first video specified is WEBM format (WEBM is an HTML video format), even though the type attribute specifies Flash. Since you cannot play WEBM format video Flash, the CFMEDIAPLAYER tag fallback process takes effect, and searches the list for other videos that the browser can play Flash. The first such video that the browser finds in the list has an MP4 format and plays it.

Now disable Flash and reload the page in Chrome. As the browser can play none of the videos in the list in the type specified, the fallback process occurs and the browser plays the first playable video according to its parameters. In this case the first playable video happens to be WEBM; the browser plays the WEBM video.

When you run the same code snippet in Internet Explorer or Safari, with Flash-disabled, the browsers will go through the fallback process and play the MP4 video in HTML as they do not support the WEBM format.

Using error-handling capabilities with the CFMEDIAPLAYER tag

The CFMEDIAPLAYER tag provides a way for you to handle errors when the media player is unable to play a video. There are different reasons why the media play might be unable to play the video specified, and you can handle each of these scenarios. You can use ColdFusion to handle error conditions through the CFMEDIAPLAYER tag in the following ways.

1. The onerror event: Use the onerror event to specify a JavaScript function as an error handler.
2. The JavaScript function ColdFusion.MediaPlayer.logError(player,string) :Use the logError() JavaScript function to provide a custom error message that the player displays whenever an error occurs.
3. Default error message: If none of above specified error handling mechanisms handle the error, ColdFusion displays a default error message on the player.

1. Play the code snippet below in Chrome with Flash disabled to observe error handling.

In this case, the player Myvideo01 show a JavaScript alert whenever there is an error condition. Use the event handler to handle errors more effectively. Notice the custom error message specified in the code for the Myvideo02 player. Lastly, notice the default error message specified for the Myvideo03 player.

ColdFusion 10 allows you to customize your media player. You can use the same attributes to customize your Flash and HTML players.

Setting the title attribute and using the setTitle() method

Use the title attribute to set a custom title for your player. You can set the title attribute at runtime using the setTitle() method. By default, in ColdFusion 10, the title is not visible. You can set the hideTitle attribute to a value of false to display the title. Then, you can use the existing style attribute to set a style for your title text and title background. You can also use HTML to enhance your custom title.

Using the repeat and posterimage attributes

Use the repeat attribute to play the video in a loop continuously. A poster image is an image that the player shows before playback begins and after playback finishes. Use the posterimage attribute to specify an image as the poster image for the player.

Using CSS to specify advanced customization options in the HTML5 player

You can modify the player-related CSS and customize the HTML player directly, according to your needs. To do so, modify the CSS file jquery.strobemediaplaybackhtml5-desk.css to enhance the desktop playback experience; you can modify the CSS file jquery.strobemediaplaybackhtml5.css can for tablets. These CSS files are in the /CFIDE/scripts/ajax/resources/cf/smp/ folder.

The goal of this article is to help you get started using the CFMEDIAPLAYER tag as a solution for playing HTML5 videos, and to help you use multiple browser support through the CFMEDIAPLAYER tag and its fallback process, through fall-through, and error-handling mechanisms. See the ColdFusion documentation for more code snippet examples.

In conclusion, there are a few key points to keep in mind:

• Specify <!DOCTYPE html > , <head/> , and <body> tags to write your CFML page for best results. A few browsers will not render the player properly without these tags.
• If you are using a web server, make sure that you have specified the right mime-types so that your server and the user's browser can serve content to the client.
• Video playback depends on browser support for formats, codecs, and rendering.
• To check browser support for HTML5 videos, visit the browser's website or refer to this article.