The VideoLAN Forums

Posted: **05 Feb 2009 14:29**

Hi,

I'm using vlc 0.9.8a and Firefox 3.0.5

in this webpage http://www.davide83.altervista.org/vlc.html I'm trying to embed vlc and control it with javascript, but on my machine there no way to make it run properly.
I followed this http://wiki.videolan.org/Windows.
The autoplay parameter is "yes", and the video actually starts well, but none of the javascript controls I wrote seem to work.
The Firefox's Error Console reports messages like:

Error: document.getElementsByName("video1").play is not a function
Error: document.getElementById("vlc").play is not a function
Error: vlc.stop is not a function

..is not a function? And then what the heck is it?
Why ???
(

)

You can easily find the html source, but anyway it's:

Code: Select all

<html>
<head><title>VLC2.HTML</title></head>
<body>
<h1>VLC2.HTML</h1>
<div align="center">
<table>
<tr>
<td>
<embed	type="application/x-vlc-plugin" 
		name="video1" 
		id="vlc" 
		autoplay="yes" 
		loop="no" 
		width="400" 
		height="300" 
		target="extra/sample.avi"  
/>
<div id="info"></div>
</td>
<td>
<script type="text/javascript">
	var vlc = document.getElementById("vlc");
	if(vlc){
		document.getElementById("info").innerHTML = "OK";
	} else {
		document.getElementById("info").innerHTML = "Undefined";
	}
</script>
<br />
	<input type="button" onclick='document.video1.Play();' value="Play" /><br>
	<input type="button" onclick='document.getElementsByName("video1").play();' value="Play (name)" /><br>
	<input type="button" onclick='document.getElementById("vlc").play();return false;' value="Play (id)" /><br>
	<input type="button" onclick='document.video1.stop();' value="Stop" /><br>
	<input type="button" onclick='document.getElementById("info").innerHTML = document.video1.get_length();' value="Get length" /><br>
</td></tr>
</table>
</div>
</body>
</html>

Posted: **05 Feb 2009 18:51**

you should use the new api as described here :

http://wiki.videolan.org/Documentation: ... d_above.29

Posted: **05 Feb 2009 19:13**

Thank you very much!

Posted: **09 Feb 2009 15:12**

...ok, I studied a few things. Now would know how to basicly handle vlc with javascript..
but there is a thing that is bringing me nuts..

I modified the code, and now it is:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>VLC Embed</title></head>

<body>

<h1>VLC Embed</h1>
<div align="center">
<table>
<tr>
<td>
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2"
    width="300"
    height="240"
	autoplay="no"
    id="vlc"
	target="extra/sample.avi">
</embed>
		  

<div id="info"></div>
<br>
<input type="button" class="sed1" onclick="else_r();" size='30' value="Info" /><br>
<textarea id="txtout" rows="10" cols="45"></textarea>
</td>
<td>
<script type="text/javascript">

	var vlc = document.getElementById("vlc");
	if(vlc){
		document.getElementById("info").innerHTML = "Ready";
	} else {
		document.getElementById("info").innerHTML = "Not Ready";
	}
	function mute(){
		vlc.audio.toggleMute();
	}
	function play(){
		vlc.playlist.play();
		intval = setInterval(uptime, 250);
	}
	function stop(){
		clearInterval(intval);
		vlc.playlist.stop();

	}
	function pause(){	
		vlc.playlist.togglePause();
	}
	function c_time(){
		return eval(vlc.input.time / 1000);
	}
	function seek(value){
	var vlc = document.getElementById("vlc");
		//alert(value);
		vlc.input.time = eval(value*1000)
		//return true;
	}
	function backof(value){
	var vlc = document.getElementById("vlc");
		vlc.input.time = vlc.input.time - eval(value*1000);
		//alert(vlc.input.state);
		//return true;
	}

	function uptime(){
		document.getElementById("nowt").innerHTML = eval(vlc.input.time/1000);
	}
	function else_r(){
		oi = document.getElementById("txtout");
		oi.value = '';
		oi.value += vlc.versionInfo() +"\n";
		oi.value += "VLC position " + vlc.input.position +"\n";
		oi.value += "VLC length " + vlc.input.length +"\n";
		oi.value += "VLC rate " + vlc.input.rate +"\n";
		oi.value += "VLC is Playing " + vlc.playlist.isPlaying +"\n";
	}

</script>
<br />
	<input type="button" onclick='play();' value="Play" /><br>
	<input type="button" onclick='pause();' value="Pause" /><br>
	<input type="button" onclick='stop();' value="Stop" /><br>
	<input type="button" onclick='document.getElementById("info").innerHTML = c_time();' value="Time" /><br>
	
	<input type="button" onclick='mute();' value="Mute" /><br>
	
	<div>
	
	<input id="seekto" type="text" size="4" value="10" />
	<input type="button" class="sed1" onclick="seek(document.getElementById('seekto').value);" size='30' value="Seek (sec)" />
	
	<br>
	
	<input id="backof" type="text" size="4" value="5" />
	<input type="button" class="sed1" onclick="backof(document.getElementById('backof').value);" size='30' value="Back of (sec)" />
	
	
	</div>
	<br>
	
	<div id="nowt"></div>
	<br>
</td></tr>
</table>

</div>
</body>
</html>

I'm working to be able to seek through the stream, but very strange things happen, and I can't understand why:

The code above works perfectly offline, only if I save the webpage as *.html, if I save *.php (as I need) a strange thing happens: the "SEEK" and "BACK OF" button don't work anymore.

But there's more:
Here I uploaded the webpages:
http://www.davide83.altervista.org/vlc_em.html
http://www.davide83.altervista.org/vlc_em.php

These both don't seem to work properly in the same strange way.
Does anyone know how to help me?
What does it change for the vlc plug in if I'm online or offline and if it's a html or php page?

I use Firefox 3.0.6 and vlc 0.9.8a (Same behaviour on Google Chrome 1.0.something)

Thanks in advance.

Posted: **09 Feb 2009 20:01**

VLC cannot seek avi over http.... this is a known, annoying, persistent bug....

Posted: **09 Feb 2009 20:59**

...d'oh!

I just really needed it...
I didn't know it was so "known". I hope it could be helpful for anyone else.
Sorry but what do you mean exactly?
But you with the revolunet API seek the avi over http, don't you?

I think it would be useful to find this information on the wiki, I didn't find them. (Maybe I didn't search so well
So you can seek only media files that are on the client, is it right?)

Thanks.

Posted: **10 Feb 2009 00:09**

no, revolunet API doesnt help in VLC http/avi seek bug which is vlc internal...

But we can seek over mpg, mkv, mov with no problems

there is a problem with avi/pasketiser something obscur i cannot understand neither debug...

This bug is in VLC trac see http://trac.videolan.org/vlc/ticket/2151

Posted: **10 Feb 2009 00:40**

problem only with AVI?

So strange.. even interesting somehow..

Anyway, you helped me to bypass my problem and to learn many things.
And so quick!

Thank you!

Posted: **21 Jun 2011 23:26**

Cromartie888, I just found this thread and wanted to inform you that your method described in here:

viewtopic.php?f=16&t=55544#p184127

is working for me. I am using it on the blogger. I've just modified little your script because html is not available in blogger:

<div align="center">
<table>
<tr> <td>
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2"
width="640"
height="480"
autoplay="no"
id="vlc"
target="videosample.avi">
</embed>
<div id="info">
</div>
<input type="button" class="sed1" onclick="else_r();" size='30' value="Info" />
<textarea id="txtout" rows="10" cols="45"></textarea>
</td> <td>
<script type="text/javascript">

var vlc = document.getElementById("vlc");
if(vlc){
document.getElementById("info").innerHTML = "Ready";
} else {
document.getElementById("info").innerHTML = "Not Ready";
}
function mute(){
vlc.audio.toggleMute();
}
function play(){
vlc.playlist.play();
intval = setInterval(uptime, 250);
}
function stop(){
clearInterval(intval);
vlc.playlist.stop();

}
function pause(){
vlc.playlist.togglePause();
}
function c_time(){
return eval(vlc.input.time / 1000);
}
function seek(value){
var vlc = document.getElementById("vlc");
//alert(value);
vlc.input.time = eval(value*1000)
//return true;
}
function backof(value){
var vlc = document.getElementById("vlc");
vlc.input.time = vlc.input.time - eval(value*1000);
//alert(vlc.input.state);
//return true;
}

function uptime(){
document.getElementById("nowt").innerHTML = eval(vlc.input.time/1000);
}
function else_r(){
oi = document.getElementById("txtout");
oi.value = '';
oi.value += vlc.versionInfo() +"\n";
oi.value += "VLC position " + vlc.input.position +"\n";
oi.value += "VLC length " + vlc.input.length +"\n";
oi.value += "VLC rate " + vlc.input.rate +"\n";
oi.value += "VLC is Playing " + vlc.playlist.isPlaying +"\n";
}
</script>
<input type="button" onclick='play();' value="Play" />
<input type="button" onclick='pause();' value="Pause" />
<input type="button" onclick='stop();' value="Stop" />
<input type="button" onclick='document.getElementById("info").innerHTML = c_time();' value="Time" />
<input type="button" onclick='mute();' value="Mute" />
<div>
<input id="seekto" type="text" size="4" value="10" />
<input type="button" class="sed1" onclick="seek(document.getElementById('seekto').value);" size='30' value="Seek (sec)" />
<input id="backof" type="text" size="4" value="5" />
<input type="button" class="sed1" onclick="backof(document.getElementById('backof').value);" size='30' value="Back of (sec)" />
</div>
<div id="nowt">
</div>
</td></tr>
</table>
</div>

Thanks so much friend. Just wanted to ask, because I am not familiar with javascript, how can I add here the function for the full screen? Only the full screen option is not implemented.

Thanks in advance

p.s. just to add that I am using firefox 5.0 and the vlc plugin 1.1.10.0

Posted: **30 Jun 2011 17:53**

Hi Vgoto
I am using your code on my web site www.ashra.weebly.com to stream live radio audio from India, and it works fantastic thanks
Rohit

Posted: **01 Jul 2011 01:11**

Yw Rohitdave. I am so happy that somewhere else also this code is working. I am quite satisfacted really.

p.s. All the credits are for our member Cromartie888, who wrote this.

Posted: **17 Aug 2011 18:49**

Hi,

tested your code and it started to work.
Looking for an example coming with all controls, options as default.

Tried examples by videolan and none worked for me.

Thanks

Posted: **26 Aug 2011 00:19**

Hi
This code is working fine by me, but I need to ask how can I change audio track on live streaming channel?
I tried some code but no luck

<script type="text/javascript">
vlc.audio.track = ("2");
</script>
<script type="text/javascript">
vlc.audio.track = (2);
</script>
<script type="text/javascript">
vlc.audio.track = 2;
</script>
Maybe some of you know working sentence.
Thanks in advance.

Posted: **12 Nov 2016 14:22**

Hello,

I re-activate the post beacuse i have some problems with vlc on web page.

I use the code proposed in a previous post, but seek and back of don't work.
I use an mp4 and not an avi then i don't understand why ??

What happen : when i click back of 5 seconds it continue to play from the last time (for example if click back of 5s at 1minute it restart form 1minute and it is the same with seek)

I don't understand really why.

Thank's for help. Have a nivce day.

The code i used.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>VLC Embed</title></head>

<body>

<h1>VLC Embed</h1>
<div align="center">
<table>
<tr>
<td>
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2"
    width="300"
    height="240"
   autoplay="no"
    id="vlc"
   target="extra/sample.avi">
</embed>
       

<div id="info"></div>
<br>
<input type="button" class="sed1" onclick="else_r();" size='30' value="Info" /><br>
<textarea id="txtout" rows="10" cols="45"></textarea>
</td>
<td>
<script type="text/javascript">

   var vlc = document.getElementById("vlc");
   if(vlc){
      document.getElementById("info").innerHTML = "Ready";
   } else {
      document.getElementById("info").innerHTML = "Not Ready";
   }
   function mute(){
      vlc.audio.toggleMute();
   }
   function play(){
      vlc.playlist.play();
      intval = setInterval(uptime, 250);
   }
   function stop(){
      clearInterval(intval);
      vlc.playlist.stop();

   }
   function pause(){   
      vlc.playlist.togglePause();
   }
   function c_time(){
      return eval(vlc.input.time / 1000);
   }
   function seek(value){
   var vlc = document.getElementById("vlc");
      //alert(value);
      vlc.input.time = eval(value*1000)
      //return true;
   }
   function backof(value){
   var vlc = document.getElementById("vlc");
      vlc.input.time = vlc.input.time - eval(value*1000);
      //alert(vlc.input.state);
      //return true;
   }

   function uptime(){
      document.getElementById("nowt").innerHTML = eval(vlc.input.time/1000);
   }
   function else_r(){
      oi = document.getElementById("txtout");
      oi.value = '';
      oi.value += vlc.versionInfo() +"\n";
      oi.value += "VLC position " + vlc.input.position +"\n";
      oi.value += "VLC length " + vlc.input.length +"\n";
      oi.value += "VLC rate " + vlc.input.rate +"\n";
      oi.value += "VLC is Playing " + vlc.playlist.isPlaying +"\n";
   }

</script>
<br />
   <input type="button" onclick='play();' value="Play" /><br>
   <input type="button" onclick='pause();' value="Pause" /><br>
   <input type="button" onclick='stop();' value="Stop" /><br>
   <input type="button" onclick='document.getElementById("info").innerHTML = c_time();' value="Time" /><br>
   
   <input type="button" onclick='mute();' value="Mute" /><br>
   
   <div>
   
   <input id="seekto" type="text" size="4" value="10" />
   <input type="button" class="sed1" onclick="seek(document.getElementById('seekto').value);" size='30' value="Seek (sec)" />
   
   <br>
   
   <input id="backof" type="text" size="4" value="5" />
   <input type="button" class="sed1" onclick="backof(document.getElementById('backof').value);" size='30' value="Back of (sec)" />
   
   
   </div>
   <br>
   
   <div id="nowt"></div>
   <br>
</td></tr>
</table>

</div>
</body>
</html>

Posted: **13 Nov 2016 12:35**

I have tested your code with VLC v2.2.4, and it works fine for me with mp4 files and avi files.

The VideoLAN Forums

Embed and control vlc in Firefox with Javascript

Embed and control vlc in Firefox with Javascript

Re: Embed and control vlc in Firefox with Javascript

Re: Embed and control vlc in Firefox with Javascript

Re: Embed and control vlc in Firefox with Javascript

Re: Embed and control vlc in Firefox with Javascript

Re: Embed and control vlc in Firefox with Javascript

Re: Embed and control vlc in Firefox with Javascript

Re: Embed and control vlc in Firefox with Javascript

Re: Embed and control vlc in Firefox with Javascript

Re: Embed and control vlc in Firefox with Javascript

Re: Embed and control vlc in Firefox with Javascript

Re: Embed and control vlc in Firefox with Javascript

Re: Embed and control vlc in Firefox with Javascript

Re: Embed and control vlc in Firefox with Javascript

Re: Embed and control vlc in Firefox with Javascript