Example of M3U Support for CFMEDIAPLAYER

This post is more than 2 years old.

A while ago I wrote a blog entry that discussed how to add a playlist to a CFMEDIAPLAYER tag. The idea was simple. Given a query - turn it into a grid control that could then drive the content for the media player control. Misty posted a comment about M3U support so I thought I'd write up a quick example.

For those who don't know, a M3U file (Wikipedia Entry) is simply a text file that represents a playlist. I've normally seen this used for MP3 collections, but it can really be used for any type of media.

Since it is just a text file, it would be trivial to update the old example to take its data from a file instead. First, let's build a simple M3U file.

I'm using the same URLs from before. Note the use of #-prefixed lines as comments. I need to ensure we ignore those lines when parsing in the data. Let's look at that code:

I begin by reading in the file and then splitting it into an array. Using the new ColdFusion 10 arrayFilter function, I can quickly remove the comment lines. I create a new query object and then loop through each line and add it to the data. My titles are just numerical but could be specified in some other manner. Also note that I could have skipped the filter entirely and just used arrayEach. That would have made the code a bit slimmer.

That's it. The end result is a query object with URLs based on the M3U file. I've pasted the entire template before.

Note: In ColdFusion 9, the JavaScript API for working with a media player on the page was: ColdFusion.Mediaplayer. In ColdFusion 10, the API is now: ColdFusion.MediaPlayer. Note the capital P. The docs have this wrong. (I posted a comment to the online version.) With JavaScript being case-sensitive, this is an important thing to remember.

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 Misty posted on 8/30/2012 at 11:44 AM

Hi ray, thanks for this, I will check this.

well tiy will say i am bugging with questions but here is teh new issue i found with cfmediaplyer

trying to call cfmediaplayer inside a DIV with click of an event, but it is not loading

any ideas:
$().ready(function() {
$("#media").load("video.cfm");
});

<div id="media"></div>

video.cfm file has following:

<cfmediaplayer source="file.flv">

Comment 2 by Raymond Camden posted on 8/30/2012 at 6:43 PM

Remember that if you use a CF Ajax UI item on content that is loaded like that (ie, via ajax), you have to use <cfajaximport>.

Comment 3 by Misty posted on 8/31/2012 at 1:01 PM

That i am doing, an cfajaximport and in the firebug, i see the libraries loaded

cfajax, cfmediaplyer.js

but just it does not work

Comment 4 by Raymond Camden posted on 8/31/2012 at 2:58 PM

I don't know then. I'd have to see it online to try to help more.

Comment 5 by Misty posted on 9/22/2012 at 5:12 PM

Hi ray, back here long time,

you are using Coldfusion 10, I am using Coldfusion 9, what will be the alternative to this now:

lines = arrayFilter(lines, function(l) { return left(l,1) is not "##"; });

q = queryNew("title,url");

arrayEach(lines, function(l) {
queryAddRow(q, {title:"Video #q.recordCount+1#",url:l});
});

we can remove arrayfilter as i am adding comments

Comment 6 by Misty posted on 9/22/2012 at 5:14 PM

and this runs only when i click next video, what about continous, if the paylist has 4 videos, rather than clicking, it should run all 4 continously

Comment 7 by Misty posted on 9/23/2012 at 2:10 PM

Hi ray, I do not know but your Mediaplayer Example does not seems to work, it neither picks up full path, neither the files. If you wanna see, I can show you what is the problem with it

Thanks

Comment 8 by Raymond Camden posted on 9/23/2012 at 5:36 PM

1) You would make a new array. Loop over old array and where the line doesn't begin with #, add it to the ne array.

2) Change array each to a simple for loop.

Comment 9 by Raymond Camden posted on 9/23/2012 at 5:37 PM

To play track N when N-1 is done, look at using the onComplete feature of cfmediaplayer. It fires when done. It could easily do this.

Comment 10 by Raymond Camden posted on 9/23/2012 at 5:38 PM

As to your last comment, sure, let me know where I can see it.

Comment 11 by Misty posted on 9/24/2012 at 11:30 AM

Here it is, I do not know but it is not allowing me to enter the url. should i use pastebin

http://pastebin.com/XkCVjJ41

Comment 12 by Raymond Camden posted on 9/24/2012 at 2:54 PM

If you open the console (Chrome Web Tools for example), you clearly see:

Uncaught TypeError: Cannot call method 'setSource' of undefined

Which means the JS code you are using isn't quite right. Please share the code - via pastebin.

Comment 13 by Misty posted on 9/24/2012 at 5:35 PM

Hi, Here is the pastebin Code

http://pastebin.com/L7FqfN9F

Comment 14 by misty posted on 9/26/2012 at 9:23 AM

Hi Ray, have you checked this code i posted in pastebin

Comment 15 by Raymond Camden posted on 9/26/2012 at 2:43 PM

Are you in CF9 or 10?

Comment 16 by Misty posted on 9/26/2012 at 5:33 PM

I have both and i have taken care of the "P" you specified in your post that in CF 9, the "P" is smaller and in CF 10 it is big "P"

Thanks

Comment 17 by Raymond Camden posted on 9/26/2012 at 6:00 PM

So...to be clear, the code in your pastebin is for CF10, and you are running it on CF10, right?

Comment 18 by Misty posted on 9/27/2012 at 10:34 AM

100% Yes

Comment 19 by Raymond Camden posted on 9/27/2012 at 3:24 PM

Um, don't know then. I hit your URL again but I'm getting an error about a session variable. At this point, it makes sense to switch to email. If you could fix the error on the site now, and send me details via email (url, code pastebin again), I'll take a look.

Comment 20 by Misty posted on 10/17/2012 at 12:24 AM

Hi ray, Coming very late on this, Left it due to some other Works. So how can i remove grid and run the file one after another. I do not want to show the cfgrid and the onclick event, it should start working immediately onload and continue till end. How is that possible

Comment 21 by Raymond Camden posted on 10/17/2012 at 4:08 PM

I would look into the JavaScript API. According to the docs, you can do

ColdFusion.MediaPlayer.getPlayer

Do some inspection of the object returned and see if it supports events.

Actually - I stand corrected. <cfmediaplayer> has an onComplete function. So you would use that to run JS to load up the next song - until the end when you would do nothing.

Comment 22 by Misty posted on 10/17/2012 at 5:15 PM

But ray, Why Adobe Posted this then

http://help.adobe.com/en_US...

It refers to that the cfmediaplayer can play playlists

Note: This option is not available for HTML 5 videos.

The list of media that you have to play are embedded in play list file M3U format.

You can specify the play list as follows:

<cfmediaplayer source="playlist.m3u" />

Comment 23 by Raymond Camden posted on 10/17/2012 at 5:55 PM

Um, I guess the answer is I didn't know it and I don't know everything? ;) Good find there.

Comment 24 by Wayne Pankey posted on 3/13/2014 at 8:17 PM

Hi Ray and Misty. Curious to know what the resolution to the very first question is/was? I'm having the same issue getting cfmediaplayer working within a cflayoutarea.

Comment 25 by Misty posted on 3/13/2014 at 9:40 PM

Hi @wayne,

I suggest you don't use cflayout or cflayoutarea, i had many troubles with cfajax UI, as ray has also suggested many times in posts, not to use those, best option is to use:

https://github.com/cfjedima...