The VideoLAN Forums

Posted: **16 Feb 2011 10:23**

Hi Guys
I have a problem where I have added 2 playlist items streaming from a UDP Multicast server and I want to change from one channel to another, but it wont work...

Below is the code:

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>

<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-vlc.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="js/vlc-object.js"></script>

<script type='text/javascript'>
     window.onload = function(){
       	var vlc0 = document.getElementById('vlc0');
		vlc0.playlist.playItem( vlc0.playlist.add('udp://@239.100.0.4:4422') );
		var vlc1 = document.getElementById('vlc1');
		vlc1.playlist.playItem( vlc1.playlist.add('udp://@239.107.1.4:4422') );
     };
</script>

<body>

	<embed id="vlc" type="application/x-vlc-plugin"
		autoplay="yes"
		width="547"
		height="305"
		target="udp://@239.100.0.4:4422">
	</embed>

<script type="text/javascript">
	function mute(){
		vlc.audio.toggleMute();
	}

	function pause(){   
		vlc.playlist.togglePause();
	}
	
	function stop() {
		vlc.playlist.stop();
	}
	
	function change(){
		vlc.playlist.playItem(vlc1);
	}
	
</script>

<input type="button" onClick='pause();' value="Play/Pause" />
<input type="button" onClick='mute();' value="Mute" />
<input type="button" onClick='stop();' value="Stop" />
<input type="button" onClick="change();" value="channel up" />

</body>
</html>

Posted: **18 Feb 2011 09:20**

Hi, there:

I check your script, and you've something missunderstood about the VLC webpage plugin.
1. The ID of your vlc player instance is 'vlc' (described in <embed>). But you use 'vlc0', 'vlc1' to operate it. (described in getElementById(), so you've to change it.
2. since there's just one player instance, so the 2 playlist.add() should both operate on object 'vlc'.
3. You use <embed> tag, that would not work on IE, instead both of them should be <object> (see my writeVLC()).
4. Your codes are just native JavaScript so the includes are not necessary (jquery.js, jquery-vlc.js, vlc-object.js)

Here's the webpage, I've test it on IE and FF with my local video clip.

Code: Select all

<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="commonR.js"></script>
</head>

<script type='text/javascript'>
   function WriteVLC(str, xsz, ysz) {
      if (navigator.plugins && navigator.mimeTypes && navigator.mimeTypes.length) {      // netscape
         document.write('<object type="application/x-vlc-plugin"');
         document.write('     version="VideoLAN.VLCPlugin.2"');
         document.write(' pluginspage="http://www.videolan.org"');
      } else {   // IE
         document.write('<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"');
         document.write('       codebase="http://download.videolan.org/pub/videolan/vlc/0.8.6c/win32/axvlc.cab"');
      }
      document.writeln(' id="'+str+'" name="'+str+'" width='+xsz+' height='+ysz+' events="true">');
      document.writeln('</object>');
   }
</script>

<body>
<script type="text/javascript">WriteVLC("vlc", 547, 305);</script>
<script type="text/javascript">
   function mute() {
      vlc.audio.toggleMute();
   }

   function pause() {
      vlc.playlist.togglePause();
   }

   function stop() {
      vlc.playlist.stop();
   }

   function next() {
      if (vlc.playindex == vlc.playlist.items.count) {
         vlc.playlist.playItem(0);
         vlc.playindex = 1;
      } else {
         vlc.playlist.next();
         vlc.playindex ++;
      }
   }

   function prev() {
      if (vlc.playindex == 1) {
         vlc.playindex = vlc.playlist.items.count;
         vlc.playlist.playItem(vlc.playindex-1);
      } else {
         vlc.playindex --;
         vlc.playlist.prev();
      }
   }

   var vlc = new Object();
   function fnInit() {
      // For My test code
//      var vLoc = window.location.href ;
//      var vBase = vLoc.substr(0, vLoc.lastIndexOf("/", vLoc.lastIndexOf("/")-1)+1) + "Video/" ;

      vlc = document.getElementById('vlc');
      vlc.playlist.clear();
//      vlc.playlist.add(vBase+'00011.avi');    // For My local test code
//      vlc.playlist.add(vBase+'00010.avi');    // For My local test code
      vlc.playlist.add('udp://239.100.0.4:4422');
      vlc.playlist.add('udp://239.107.1.4:4422');
      vlc.playlist.playItem(0);
      vlc.playindex = 1;  // my Extended for looping check
  }

   function regEvent(tobj, type, func) {
      if (tobj.addEventListener)
         tobj.addEventListener(type, func, true);
      else if (tobj.attachEvent)
         tobj.attachEvent("on" + type, func);
      else tobj["on" + type] = func;
   }

   regEvent(window, 'load', fnInit);
</script>
<br>
<input type="button" onClick='pause();' value="Play/Pause" />
<input type="button" onClick='mute();'  value="Mute" />
<input type="button" onClick='stop();'  value="Stop" />
<input type="button" onClick='prev();'  value="Channel Down" />
<input type="button" onClick='next();'  value="Channel Up" />

</body>
</html>

Posted: **18 Feb 2011 09:34**

Hey
Thanks I will check it out now, so your commonR.js file is jquery?

Posted: **18 Feb 2011 09:46**

oh never mind stupid question! Thanks Its working

Posted: **18 Feb 2011 10:06**

Sorry, its my debug code. just remove it.

Posted: **18 Feb 2011 10:32**

Do you no how to assign an id to each playlist item so i can have a list of all the channels and the onClick(); pick a certain channel?

Posted: **20 Feb 2011 08:57**

The return value of vlc.playlist.add() is the index number of the item you just added, basically it's number that count from 0. So the first time when vlc.playlist.add() valled it will return 0, and second time it returns 1, ... and os on (of course, you have to make sure to calear the playlist first).

I think, it's not necessary to assign an id for this item, just use vlc.playlist.playItem(i) to switch to the item you want to play. If you really need it, you can assign it to the data structure of your own source uri. Like this... (sorry, it's not tested)

Code: Select all

var srcData = [
{URI: "...", chName:"channel A" },  // item 1, use object for extend later
{URI: "...", chName:"channel B" },  // item 2 (fill the "..." with your own data)
...
{URI: "...", chName:"channel z" }   // last item
];

...  // somewhere in some function or just the top level of you code
for (var i in srcData) {
// add item to play list, and store the index as an id in srcData
  srcData.id = vlc.playlist.add(srcData[i].URI);
};
var sel = getElementById('Ur_select_id');
// some extra work for add it to a select box
for (var i in srcData) {
  var opt = createElement('option');
  opt.text = scrData[i].chName;
  opt.value = scrData[i].id;
  sel.appendChild(opt);
};
// register a triger function, on the select 'change' or on some summit button

The VideoLAN Forums

skip to next playlist item not working!!!

skip to next playlist item not working!!!

Re: skip to next playlist item not working!!!

Re: skip to next playlist item not working!!!

Re: skip to next playlist item not working!!!

Re: skip to next playlist item not working!!!

Re: skip to next playlist item not working!!!

Re: skip to next playlist item not working!!!