Page 1 of 1

make seek slider in html embed video

Posted: 03 Mar 2008 03:29
by r1weedee
hi, i want to make html page that embed video using vlc plugin, how can i add it with seek slider like flash player ? :

Image

thanks a lot

Re: make seek slider in html embed video

Posted: 03 Mar 2008 18:16
by VLC_help
http://wiki.videolan.org/Documentation: ... d_above.29
I haven't seen anything like that but you could in theory do something like that with vlc.input.position and some GUI element that knows clicking position (or multiple GUI elements each with own position).

Re: make seek slider in html embed video

Posted: 03 Mar 2008 20:18
by revolunet
you need to create your slider and control it with javascript

my lib provides a ready to use one : http://code.revolunet.com/VLCcontrols/EN

Re: make seek slider in html embed video

Posted: 11 Mar 2008 03:35
by r1weedee
you need to create your slider and control it with javascript

my lib provides a ready to use one : http://code.revolunet.com/VLCcontrols/EN
i'm confuse, at first i used to make my own VOD with script like this :

begin script

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Multiple VOD.html</title>

<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
</head>

<body>

<p align="center">&nbsp;</p>
<div align="center">
<table width="320" border="1" bgcolor="#000000">
<tr>
<td colspan="4"><div align="center" class="style1">Rythem - Mikazuki.mpg</div></td>
</tr>
<tr>
<td colspan="4"><embed width="360" height="270" hspace="0" vspace="0" loop="yes" align="absmiddle" type="application/x-vlc-plugin"
name="mikazuki" autoplay="no"
target="http://127.0.0.1/VOD/mikazuki.mpg" /></td>
</tr>
<tr>
<td><div align="center">
<p><a href="javascript:;" onclick='document.mikazuki.play()'><img src="smooth/play.bmp"></a></p>
</div></td>
<td><div align="center"><a href="javascript:;" onclick='document.mikazuki.pause()'><img src="smooth/pause.bmp"></a></div></td>
<td><div align="center"><a href="javascript:;" onclick='document.mikazuki.stop()'><img src="smooth/stop.bmp"></a></div></td>
<td><div align="center"><a href="javascript:;" onclick='document.mikazuki.fullscreen()'><img src="smooth/fullscreen.bmp"></a></div></td>
</tr>
</table>
</div>
<p align="center">&nbsp;</p>

<div align="center">
<table width="320" border="1" bgcolor="#000000">
<tr>
<td colspan="4"><div align="center" class="style1">Rythem - Negai.mpg</div></td>
</tr>
<tr>
<td colspan="4"><embed width="360" height="270" hspace="0" vspace="0" loop="yes" align="absmiddle" type="application/x-vlc-plugin"
name="negai" autoplay="no"
target="http://127.0.0.1/VOD/negai.mpg" /></td>
</tr>
<tr>
<td><div align="center">
<p><a href="javascript:;" onclick='document.negai.play()'><img src="smooth/play.bmp"></a></p>
</div></td>
<td><div align="center"><a href="javascript:;" onclick='document.negai.pause()'><img src="smooth/pause.bmp"></a></div></td>
<td><div align="center"><a href="javascript:;" onclick='document.negai.stop()'><img src="smooth/stop.bmp"></a></div></td>
<td><div align="center"><a href="javascript:;" onclick='document.negai.fullscreen()'><img src="smooth/fullscreen.bmp"></a></div></td>
</tr>
</table>
</div>
<p align="center">&nbsp;</p>

<div align="center">
<table width="320" border="1" bgcolor="#000000">
<tr>
<td colspan="4"><div align="center" class="style1">Aerosmith - Jaded.mpg </div></td>
</tr>
<tr>
<td colspan="4"><embed width="360" height="270" hspace="0" vspace="0" loop="yes" align="absmiddle" type="application/x-vlc-plugin"
name="jaded" autoplay="no"
target="http://127.0.0.1/VOD/jaded.mpg" /></td>
</tr>
<tr>
<td><div align="center">
<p><a href="javascript:;" onclick='document.jaded.play()'><img src="smooth/play.bmp"></a></p>
</div></td>
<td><div align="center"><a href="javascript:;" onclick='document.jaded.pause()'><img src="smooth/pause.bmp"></a></div></td>
<td><div align="center"><a href="javascript:;" onclick='document.jaded.stop()'><img src="smooth/stop.bmp"></a></div></td>
<td><div align="center"><a href="javascript:;" onclick='document.jaded.fullscreen()'><img src="smooth/fullscreen.bmp"></a></div></td>
</tr>
</table>
</div>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
</body>
</html>

end of script

that script is contain 3 embedded video that transcoded/saved with vlc format in localhost before, how can i add it with u'r SimpleSlider.js?

Re: make seek slider in html embed video

Posted: 11 Mar 2008 09:27
by revolunet
hi

SimpleSlider is just a generic javascript slider that has nothing to do with VLC.

to use it with the VLC plugin, you have to bind it to vlc.input.position with something like a setInterval... thats why my VLCcontrols library comes in, it justs abstract all this stuff.

this said, its not a good idea to use multiple VLC plugins in one page as it is not stable at all