Posted in ColdFusion | Posted on 05-05-2010 | 2,700 views
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.
2<cfset queryAddRow(q)>
3<cfset querySetCell(q, "title", "Video One")>
4<cfset querySetCell(q, "url", "http://www.archives.alabama.gov/video/at0310.flv")>
5<cfset queryAddRow(q)>
6<cfset querySetCell(q, "title", "Video Two")>
7<cfset querySetCell(q, "url", "http://www.archives.alabama.gov/video/at0210.flv")>
8<cfset queryAddRow(q)>
9<cfset querySetCell(q, "title", "Video Three")>
10<cfset querySetCell(q, "url", "http://www.archives.alabama.gov/video/at0110.flv")>
11
12<cfform name="boguswhydoineedaformforthis">
13<cfgrid name="mediafiles" format="html" query="q" selectonload="false">
14 <cfgridcolumn name="url" display="false">
15 <cfgridcolumn name="title" header="Title">
16</cfgrid>
17</cfform>
18
19<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:
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:
2function gridChange(url) {
3 ColdFusion.Mediaplayer.setSource("mediaplayer", url)
4}
5</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.
2<cfset queryAddRow(q)>
3<cfset querySetCell(q, "title", "Video One")>
4<cfset querySetCell(q, "url", "http://www.archives.alabama.gov/video/at0310.flv")>
5<cfset queryAddRow(q)>
6<cfset querySetCell(q, "title", "Video Two")>
7<cfset querySetCell(q, "url", "http://www.archives.alabama.gov/video/at0210.flv")>
8<cfset queryAddRow(q)>
9<cfset querySetCell(q, "title", "Video Three")>
10<cfset querySetCell(q, "url", "http://www.archives.alabama.gov/video/at0110.flv")>
11
12<cfajaxproxy bind="javascript:gridChange({mediafiles.url})">
13
14<html>
15<head>
16
17<script>
18function gridChange(url) {
19 ColdFusion.Mediaplayer.setSource("mediaplayer", url)
20}
21</script>
22
23</head>
24
25<body>
26
27<h2>Click to View</h2>
28
29<cfform name="boguswhydoineedaformforthis">
30<cfgrid name="mediafiles" format="html" query="q" selectonload="false">
31 <cfgridcolumn name="url" display="false">
32 <cfgridcolumn name="title" header="Title">
33</cfgrid>
34</cfform>
35
36<cfmediaplayer name="mediaplayer">
37
38</body>
39</html>
