How stream video with vlc plugin in your website?

Now I will try to tell how we can stream video in website. We can do it by vlc plugin “WebPlugin”. To view video on your pages, you can build custom pages that will use the advanced features of this plugin. With Javascript functions you can easy control video player.


I tried to create player and add some new channels to playlist for example

vlc.playlist.add("udp://@238.255.0.1:10001");

. This line will add new channel to your playlist. Now how can we get to this channel? Again we can use javascript function. Create link or button, which with onclick event will call javascript function.
For example

<a href="#"  onclick="iptv.load('1'); return false;"><img src="img/ico.png" alt="TV channel name" /></a>

The function load(1) will load first channel from your playlist.
My example will be:

<embed
    id="tv"
    name="tv"
    type="application/x-vlc-plugin"
    pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2"
    width=640 height=480
    autoplay="yes"
    enablejavascript="true"
    target="udp://@238.25.0.1:10001"
    align=center />
<script type="text/javascript">
 var vlc = document.getElementById("tv");
	 vlc.playlist.add("udp://@238.255.0.1:10001");
 	 vlc.playlist.add("udp://@238.255.0.2:10001");
	 vlc.playlist.add("udp://@238.255.0.3:10001");
	 vlc.playlist.add("udp://@238.255.0.4:10001");
</script>
<div class="controls">
<a href="javascript:;" onclick='vlc.playlist.play();'>Show</a>
<a href="javascript:;" onclick='vlc.playlist.stop();'>Stop</a>
<a href="javascript:;" onclick='vlc.playlist.pause();'>Pause</a>
</div>
<div class="channels">
<a href="#"  onclick="iptv.load('1'); return false;"><img src="img/ico1.png" alt="TV channel name1" /></a>
<a href="#"  onclick="iptv.load('2'); return false;"><img src="img/ico2.png" alt="TV channel name2" /></a>
<a href="#"  onclick="iptv.load('3'); return false;"><img src="img/ico3.png" alt="TV channel name3" /></a>
<a href="#"  onclick="iptv.load('4'); return false;"><img src="img/ico4.png" alt="TV channel name4" /></a>
</div>

As you see in this example, I add four channels to my playlist. In container “channels” there are four links, which load my channels. And of course three links to play, stop and pause your streaming video.
What should we know if we want to use this? We need to install vlc plugin for your browser. I didn’t find opportunity how to install this plugin directly to browser. But there is a posibility to download vlc media player and during instalation check checkbox to install plugin for your web browser.

For more information about video streaming and vlc plugin for web browsers you can find in http://wiki.videolan.org/Documentation:WebPlugin.

3 comments

  1. Thanks to taking this post about track WebPlugins on projects.. very important points to gather in the post some of these very helpful for one of my career projects.

Leave a Reply

Your email address will not be published. Required fields are marked *