Embed and control vlc in Firefox with Javascript

All you've ever wanted to know about the ActiveX, Mozilla plugins, the web interface and various PHP extensions
Cromartie888
New Cone
New Cone
Posts: 5
Joined: 05 Feb 2009 14:11

Embed and control vlc in Firefox with Javascript

Postby Cromartie888 » 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
:shock: ..is not a function? And then what the heck is it?
Why ???
( :cry: )

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>

revolunet
Big Cone-huna
Big Cone-huna
Posts: 515
Joined: 17 Oct 2007 13:16
VLC version: 0.9.8
Operating System: Vista
Location: Paris, France
Contact:

Re: Embed and control vlc in Firefox with Javascript

Postby revolunet » 05 Feb 2009 18:51

you should use the new api as described here :

http://wiki.videolan.org/Documentation: ... d_above.29
VLC & web IT consulting - http://www.revolunet.com
Github : http://github.com/revolunet

Cromartie888
New Cone
New Cone
Posts: 5
Joined: 05 Feb 2009 14:11

Re: Embed and control vlc in Firefox with Javascript

Postby Cromartie888 » 05 Feb 2009 19:13

Thank you very much!

Cromartie888
New Cone
New Cone
Posts: 5
Joined: 05 Feb 2009 14:11

Re: Embed and control vlc in Firefox with Javascript

Postby Cromartie888 » 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.

revolunet
Big Cone-huna
Big Cone-huna
Posts: 515
Joined: 17 Oct 2007 13:16
VLC version: 0.9.8
Operating System: Vista
Location: Paris, France
Contact:

Re: Embed and control vlc in Firefox with Javascript

Postby revolunet » 09 Feb 2009 20:01

VLC cannot seek avi over http.... this is a known, annoying, persistent bug....
VLC & web IT consulting - http://www.revolunet.com
Github : http://github.com/revolunet

Cromartie888
New Cone
New Cone
Posts: 5
Joined: 05 Feb 2009 14:11

Re: Embed and control vlc in Firefox with Javascript

Postby Cromartie888 » 09 Feb 2009 20:59

...d'oh! :shock: 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.

revolunet
Big Cone-huna
Big Cone-huna
Posts: 515
Joined: 17 Oct 2007 13:16
VLC version: 0.9.8
Operating System: Vista
Location: Paris, France
Contact:

Re: Embed and control vlc in Firefox with Javascript

Postby revolunet » 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
VLC & web IT consulting - http://www.revolunet.com
Github : http://github.com/revolunet

Cromartie888
New Cone
New Cone
Posts: 5
Joined: 05 Feb 2009 14:11

Re: Embed and control vlc in Firefox with Javascript

Postby Cromartie888 » 10 Feb 2009 00:40

:shock: 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!

Vgoto
New Cone
New Cone
Posts: 6
Joined: 20 Jun 2011 07:48

Re: Embed and control vlc in Firefox with Javascript

Postby Vgoto » 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 :wink:

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

Rohitdave
New Cone
New Cone
Posts: 1
Joined: 30 Jun 2011 17:09

Re: Embed and control vlc in Firefox with Javascript

Postby Rohitdave » 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

Vgoto
New Cone
New Cone
Posts: 6
Joined: 20 Jun 2011 07:48

Re: Embed and control vlc in Firefox with Javascript

Postby Vgoto » 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. :D

darius
Blank Cone
Blank Cone
Posts: 28
Joined: 14 Jul 2010 00:58

Re: Embed and control vlc in Firefox with Javascript

Postby darius » 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

tracker
New Cone
New Cone
Posts: 1
Joined: 25 Aug 2011 23:43

Re: Embed and control vlc in Firefox with Javascript

Postby tracker » 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.

BOB Void
New Cone
New Cone
Posts: 2
Joined: 12 Nov 2016 14:13

Re: Embed and control vlc in Firefox with Javascript

Postby BOB Void » 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>

da2424
Cone that earned his stripes
Cone that earned his stripes
Posts: 310
Joined: 16 Apr 2013 16:57

Re: Embed and control vlc in Firefox with Javascript

Postby da2424 » 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.


Return to “Web and scripting”

Who is online

Users browsing this forum: No registered users and 12 guests