vlc playlist events and manipulation in javascript

[crypticman]

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.

[plexium_nerd]

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>

[crypticman]

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.

[crypticman]

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

[saegeas]

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!