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.
Archived Comments
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">
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>.
That i am doing, an cfajaximport and in the firebug, i see the libraries loaded
cfajax, cfmediaplyer.js
but just it does not work
I don't know then. I'd have to see it online to try to help more.
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
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
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
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.
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.
As to your last comment, sure, let me know where I can see it.
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
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.
Hi, Here is the pastebin Code
http://pastebin.com/L7FqfN9F
Hi Ray, have you checked this code i posted in pastebin
Are you in CF9 or 10?
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
So...to be clear, the code in your pastebin is for CF10, and you are running it on CF10, right?
100% Yes
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.
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
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.
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" />
Um, I guess the answer is I didn't know it and I don't know everything? ;) Good find there.
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.
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...