Ask a Jedi: Dynamic Updates for CFMEDIAPLAYER

May 5, 2010 coldfusion

(This post is more than 2 years old.)

Alan asks:

I am trying to dynamically populate the source of a cfmediaplayer tag. I can't find any documentation of this on the web. Is it even possible?

I haven't made much use of cfmediaplayer. This is one of the new tags in ColdFusion 9 and while it seems to work perfectly fine, I just don't use FLV media that much. That being said I took a quick look at this and came up with a solution.

First off - this tag does not allow for binding in the source attribute. If it did, my solution would have been a heck of a lot slimmer. But it does have multiple JavaScript API points, one of them being the ability to set the source. Let's take a look at my code. I began by creating a grid with fake data. The idea being that the user would be presented with a list of videos to choose from.

<cfset q = queryNew("title,url")> <cfset queryAddRow(q)> <cfset querySetCell(q, "title", "Video One")> <cfset querySetCell(q, "url", "http://www.archives.alabama.gov/video/at0310.flv")> <cfset queryAddRow(q)> <cfset querySetCell(q, "title", "Video Two")> <cfset querySetCell(q, "url", "http://www.archives.alabama.gov/video/at0210.flv")> <cfset queryAddRow(q)> <cfset querySetCell(q, "title", "Video Three")> <cfset querySetCell(q, "url", "http://www.archives.alabama.gov/video/at0110.flv")>

<cfform name="boguswhydoineedaformforthis"> <cfgrid name="mediafiles" format="html" query="q" selectonload="false"> <cfgridcolumn name="url" display="false"> <cfgridcolumn name="title" header="Title"> </cfgrid> </cfform>

<cfmediaplayer name="mediaplayer">

Nothing there should be complicated. Obviously your query would be dynamic, or you would use an Ajax binding for the grid. I needed something quick and simple though. Also take note of the mediaplayer at the bottom. It has a name but no source for now. For the next step, I wanted to notice changes to the selected video in the grid. For that I used:

<cfajaxproxy bind="javascript:gridChange({mediafiles.url})">

This says - when the value of mediafiles (the grid) changes, call a JavaScript function (gridChange) and pass the URL column. Now let's look at that JavaScript:

<script> function gridChange(url) { ColdFusion.Mediaplayer.setSource("mediaplayer", url) } </script>

And... that's it. Really. Nice and simple. You can see a demo of this here. Also notice that you the video does not auto play on selection. I tend to hate auto play, but if you wanted to do that as well, you would just add: ColdFusion.Mediaplayer.startPlay(). Oh, one note. Notice the lowercase "p" in Mediaplayer. The docs show it as upper case. Anyway, I hope this is helpful. The entire template is below.

<cfajaxproxy bind="javascript:gridChange({mediafiles.url})">


<html>
<head>
<script>
function gridChange(url) {
ColdFusion.Mediaplayer.setSource("mediaplayer", url)
}
</script>
</head>
<body>
<h2>Click to View</h2>
<cfform name="boguswhydoineedaformforthis">
<cfgrid name="mediafiles" format="html" query="q" selectonload="false">
<cfgridcolumn name="url" display="false">
<cfgridcolumn name="title" header="Title">
</cfgrid>
</cfform>
<cfmediaplayer name="mediaplayer">

</body> </html>