The VideoLAN Forums

Posted: **27 Mar 2008 15:51**

Hi all,
I am trying to implement this on my web page. The vlc player embedded on my web page will play automatically whatever items in the playlist and willl be using autoloop. I know how to load the playlist dynamically into the vlc playlist, but the tricky part is that I want to display the name of the item (currently playing ) on my web page. My questions are :

1. Is it possible to display the name of currently playing item in the playlist? I know the original vlc API is not shipped with that feature. please advise me a brief logic how to design it

2. Is there a way to detect the event if the playlist moves to the next item (since it will be playing automatically and autolooping)

Thank you so much in advance.

Posted: **27 Mar 2008 20:15**

I've had this question as well and searched through the forum to see that others have had the same question with no response. So here is the code I've managed to put together to solve my problem. Please note I'm building an app for Mozilla so it's not tested on IE but hopefully someone can get some insight from this code and port it to IE.

All the code does is setInterval on a function which reads the VLC message log looking for a pattern indicating a new item is being played.

Just place this block of code on your web page, external js, etc...

Code: Select all


//VLCPlugin PlaylistListener//
HTMLEmbedElement.prototype.attachPlaylistListener = function( callback, freq )
{	
	if ( this.type == 'application/x-vlc-plugin' )
	{
		//force vlc to log info//
		this.log.verbosity = 0;

		//track what is currently playing
		this.currentlyPlaying = '';

		//private interval ID
		this._playlistListenerID = null;
		this._fileLogFilter = new RegExp('^creating access \'([^\']*)\' path=\'([^\']+)\'','i');

		var vlc = this;
		this.__playlistListenerID = setInterval(function(){ 

			if ( !vlc._vlcUpdating )
			{
				vlc._vlcUpdating = true;

				var i = vlc.log.messages.iterator();
					
				while ( i.hasNext )
				{
					var m = i.next();
					if ( m.name == 'main' && m.type == 'input' && vlc._fileLogFilter.test(m.message) )
					{
						var uri = (RegExp.$1!=''?RegExp.$1+'://':'') + RegExp.$2;
						if ( vlc.currentlyPlaying != uri )
						{
							if ( callback && typeof(callback) == 'function' )
							{
								callback.apply(vlc, ['CHANGE', {to:uri,from:vlc.currentlyPlaying} ]);
							}

							vlc.currentlyPlaying = uri;
						}
					}		
				}

				vlc.log.messages.clear();
				vlc._vlcUpdating = false;	
			}

		}, freq || 100);
	}
};


HTMLEmbedElement.prototype.detachPlaylistListener= function()
{	
	if ( this._playlistListenerID )
	{
		clearInterval(this._intervalID);
	}
};

Again, this most likely will only work on Firefox but it's a start.

Usage:

Code: Select all

<embed type="application/x-vlc-plugin" 
  id="vlcviewer" pluginspage="http://www.videolan.org" 
  version="VideoLAN.VLCPlugin.2" name="vlcviewer" 
  autoplay="yes" loop="no"></embed>

<script type="text/javascript">
   var vlc = document.getElementById('vlcviewer');

   vlc.playlist.add('D:\\music\\As I Lay Dying\\As I lay Dying - Track 07.mp3');
   vlc.playlist.add('D:\\music\\As I Lay Dying\\As I lay Dying - Track 08.mp3');
   vlc.playlist.play();

   //the passed callback function will be called everytime the playlist changes
   vlc.attachPlaylistListener( function( type, info ){
      // do something with this data//
      // type = type of event, always 'CHANGE'
      // info = object with event info. Currently only has info.to and info.from
      myelement.value = info.to;
      myoldelement.value = info.from;
   } );

   //additionally, the currently playing item can be checked with currentlyPlaying property
   alert(vlc.currentlyPlaying);
</script>

Posted: **28 Mar 2008 12:57**

yah unfortunately, i am coding for IE only site. but it looks like a working solution. It would have been much easier if the vlc activex handles all those events.
Thank you so much. I hope they pick this up and consider for the next release.

Posted: **28 Mar 2008 21:45**

ok i got it working on my own version. I took your general design though

here is the general design i found it working

, not really the best though

Code: Select all

util.getCurrentTitle = function()
 {
	
  	 var player = util.getVLC('vlc');
	 player.log.verbosity = 0;
	 var logMessages = player.log.messages;
	 var i = logMessages.iterator();
	 var mediaName;
	 while(i.hasNext)
	 {	
		var msg = i.next();
	    if(msg.type =='access' && msg.name == 'access_file')//filter out lots of junky logs
		{
		    var title = util.getAssetTitle(util.parseMediaName(msg.message));
			if(title ==null || title == 'undefined')
				title = 'Not Avilable';
			document.getElementById('titleDiv').innerHTML = 'Trailer -'+title;
		}
		
	 }
	 player.log.messages.clear();
	 
	 setTimeout('util.getCurrentTitle()',1500);
 }
 
 //to remove network urls and slashes
 util.parseMediaName = function(input)
 {
	var fName = input;
	if( fName.length == 0 ) return "";
	var slash = fName.lastIndexOf("\\");
	if( slash == -1 ) return "";
	var mediaName = fName.substr(slash+1,fName.length);
	mediaName = mediaName.split("'")[0]; //remove " ' " from log 
	return mediaName;
	
 
}

util.getAssetTitle = function(filename)
{
//mapping code for movie title to  filename
return movile_title;

}

I hope they could include more playlist handling API in the next version.
Thanks again

Posted: **07 Nov 2008 21:26**

plexium_nerd: Thank you!! Awesome. I too was able to adapt this to my purposes (watch for message containing pattern "nothing to play", which indicates that playback has ceased). I'm sure this technique will be useful in many situations to come... crypticman: Thanks for starting this thread!

The VideoLAN Forums

vlc playlist events and manipulation in javascript

vlc playlist events and manipulation in javascript

Re: vlc playlist events and manipulation in javascript

Re: vlc playlist events and manipulation in javascript

Re: vlc playlist events and manipulation in javascript

Re: vlc playlist events and manipulation in javascript