Page 1 of 1

Building web page - looking for sample code

Posted: 12 Jul 2006 16:05
by Jack L
I am new to VLC and want to build a web page using javascript that will connect to an existing stream. Does anyone have some simple code for a sample.

Optionally I want to see about opening 2 video windows in a single page then be able to toggle audio on and off for each window (listen to only 1 stream at a time.)

Thanks in advance for any help.

Posted: 12 Jul 2006 16:57
by alec_robertson
Try the plugins test page:

Code: Select all

http://altair.videolan.org/~dionoea/vlc-plugin-demo

Posted: 12 Jul 2006 17:08
by Jack L
Maybe I am missing it, but that page shows how to test if you have the plugin installed and directions to connect to existing pages.

I am looking to create the page. Something like javascript that will create the activex object then let you call methods to it like start video, connect to this URL, turn audio on and off, etc.

Posted: 12 Jul 2006 17:39
by alec_robertson
Look at the html source code, it's all in there...

Code: Select all

http://altair.videolan.org/~dionoea/vlc-plugin-demo/plugin.phps
Also check out the vlc docs:

Code: Select all

http://www.videolan.org/doc/play-howto/en/ch04.html#id293936

Posted: 12 Jul 2006 19:37
by Jack L
I still don't see what I am looking for, sorry. What I want to do is have a web page that automatically opens 2 video windows using the VLC control. I will generate the page on the fly with the correct IP numbers to connect to existing multicast streams (UDP). I also want a radio control (2 buttons) that will let me switch between the 2 audios.

I must be missing where this happens in this code.

Posted: 12 Jul 2006 20:00
by alec_robertson
For firefox:

Code: Select all

<embed type="application/x-vlc-plugin" name="v1" width="720" height="352" target="http://web.mit.edu/alecr/www/cwf/trailer.mkv"/> <embed type="application/x-vlc-plugin" name="v2" width="720" height="352" target="http://web.mit.edu/www/cwf/utah.mkv"/> <br> <a href="javascript:null();" onclick='document.v1.play()'>play-1</a> <a href="javascript:null();" onclick='document.v1.mute()'>mute-1</a> <a href="javascript:null();" onclick='document.v2.play()'>play-2</a> <a href="javascript:null();" onclick='document.v2.mute()'>mute-2</a>
Try it at: web.mit.edu/alecr/www/cwf/vlc-double.html

Posted: 12 Jul 2006 20:24
by Jack L
Much closer now. I have the page with outlines for each video and a small icon at the top left. I have the activex installed (I reinstalled to make sure).

I also need to do this in IE and not Firefox (not my choice)

Here is the code I have for the html page - any ideas.

BTW - Thanks a lot for the help, I am trying to come up to speed from zero very quickly



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<BODY marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">

<embed type="application/x-vlc-plugin" name="v1" width="720" height="352" target="UDP://@239.1.1.128"/>

//This address is a streaming multicast address

<embed type="application/x-vlc-plugin" name="v2" width="720" height="352"
target="http://web.mit.edu/www/cwf/utah.mkv"/>

<br>
<a href="javascript:null();" onclick='document.v1.play()'>play-1</a>
<a href="javascript:null();" onclick='document.v1.mute()'>mute-1</a>
<a href="javascript:null();" onclick='document.v2.play()'>play-2</a>
<a href="javascript:null();" onclick='document.v2.mute()'>mute-2</a>

</BODY>
</HTML>

Posted: 12 Jul 2006 22:01
by alec_robertson
The code for IE is different. I updated the web.mit.edu/alecr/www/cwf/vlc-double.html to include an activex component.

Posted: 12 Jul 2006 23:50
by Jack L
Alec,

I did come up with the right code to show 2 videos, and I can toggle the audios.

However when I try to toggle the audio so I can listen to either one audio or the other I find the toggleMute command is global. If you toggle audio for one object (video) it toggles it for both videos.

Since this is a different question I will post it on another topic.

Thanks for the help. (BTW - look for the code on the new topic)