Ask a Jedi: Dynamic Updates for CFMEDIAPLAYER

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.

<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")> <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>

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.

Lafayette, LA https://www.raymondcamden.com

Comments