Ask a Jedi: Dynamic Updates for CFMEDIAPLAYER

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.

<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 senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

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

Archived Comments

Comment 1 by Simon posted on 5/5/2010 at 6:55 PM

Just out of interest Ray how are you putting video out on your pages ?

Comment 2 by Raymond Camden posted on 5/5/2010 at 6:59 PM

I rarely use video in my apps, but when I do, it is YouTube. SoI just use their Flash embed. I've done some Jing embeds as well, and for that I use Flash embeds for their SWFs.

Comment 3 by Misty posted on 8/25/2012 at 10:53 PM

Hi ray, Can't I run m3u files with cfmediaplayer

Comment 4 by Raymond Camden posted on 8/26/2012 at 2:06 AM

A m3u is a playlist. I can see that being supported. File a Enhancement Request for it.

Comment 5 by Raymond Camden posted on 8/26/2012 at 2:07 AM

Heck, you could easily read the m3u with CF and use the result file list with my demo above.

Comment 6 by misty posted on 8/26/2012 at 1:24 PM

Hi Ray, can you show a bit of code, i am trying like this and it is not working:

<cfajaximport tags="cfmediaplayer"/>
<cfmediaplayer
name="Myvideo"
source="video/myplaylist.m3u"
bgcolor="ffffff"
width="195"
height="242"
type="html"
align="center"
autoPlay="false"
controlbar="false"
/>

Comment 7 by Raymond Camden posted on 8/26/2012 at 6:57 PM

Did you read my comment? Use CF to read the file - ie, cffile, or fileRead. Then parse it to get the links out (m3u files also support comments).

Comment 8 by Raymond Camden posted on 8/27/2012 at 7:32 PM

Misty, see this blog entry I did: http://www.raymondcamden.co...

Comment 9 by Simon posted on 8/6/2013 at 1:23 PM

Hi all, is there any way of using percentages for height and width so the video player will fit the parent div ?

thanks,

Simon.

Comment 10 by Raymond Camden posted on 8/6/2013 at 5:19 PM

Well, the obvious answer is - when you tried using a percentage did it work?