Automatic Resize of embebbed VLC...

All you've ever wanted to know about the ActiveX, Mozilla plugins, the web interface and various PHP extensions
ABNormal
New Cone
New Cone
Posts: 9
Joined: 12 Jul 2007 16:53

Automatic Resize of embebbed VLC...

Postby ABNormal » 05 Feb 2008 19:32

is there any parameter to obtain that when you resize your browser, an embedded vlc player (with heigth and width=100%) could automatically resize itself too, such as lot of other embedded players already do?

sanjayb
New Cone
New Cone
Posts: 3
Joined: 27 Jan 2008 13:53

Re: Automatic Resize of embebbed VLC...

Postby sanjayb » 13 Feb 2008 14:11

I have tested resizing the embed object and it seems to work - so you could add a function to window.onresize and change the width and height of the embed player accordingly. best of luck.
(i think the params you'd need are window.innerHeight and window.innerWidth , but you might need to look it up)

PhatBob
New Cone
New Cone
Posts: 9
Joined: 03 Jan 2008 12:22

Re: Automatic Resize of embebbed VLC...

Postby PhatBob » 18 Feb 2008 17:04

I've not had any success with this as vlc.video.width and vlc.video.height are read only
The only way that I've been able to get anything to change is to use the VLCobject script in the following way:

Create using:

Code: Select all

myvlc = new VLCObject("mymovie", "400", "200", "0.8.6"); myvlc.addParam("MRL","http://code.revolunet.com/VLCjs/rambo.mpg"); myvlc.write("vlccontent");
Then in your resize handler:

Code: Select all

myvlc.setAttribute("width", "1280"); myvlc.setAttribute("height", "768"); myvlc.write("vlccontent");
The trouble is that the video restarts and I've been wasting time trying to grab the current position, resizing using the above, and then resetting it to the position it was at before the resize took place. But thats messy and not at all good.

Rob

PhatBob
New Cone
New Cone
Posts: 9
Joined: 03 Jan 2008 12:22

Re: Automatic Resize of embebbed VLC...

Postby PhatBob » 19 Feb 2008 17:01

And it turns out that the solution was far more simple than I imagined, use the style attribute of the vlc object.
This script below uses the up and down arrows to change the size of the video that is playing (we're developing a system that uses an Apple IR remote mapped to keyboard codes for video and menu control).
The only issue with this is that the keyboard events get routed to the vlc player if the mouse falls inside the vlc player. This may be due to the cursor policy we have on ubuntu, or the vlc player, currently we're not sure.
To resize the embedded vlc you'll need to look at the geometry and set the styles accordingly.

Code: Select all

<html> <head> <script src="VLCobject.js" type="text/javascript"></script> <script type="text/javascript"> videoEventKey = { VOLUME_UP: 38, VOLUME_DOWN: 40 }; vlcPlayer = { myvlc: null, vlc_device: null, container: null, loadDefaultVideo:function() { this.myvlc = new VLCObject("mymovie", "640", "480", "0.8.6"); this.myvlc.addParam("MRL","/usr/local/media/circuit_high_120.wmv"); this.myvlc.write("vlccontent"); this.vlc_device = document.getElementById(this.myvlc.getAttribute('id')); this.container = document.getElementById("container"); this.container.focus(); }, maximiseVideo:function() { if (this.myvlc != null) { this.vlc_device.style.width = "1280px"; this.vlc_device.style.height = "768px"; this.container.focus(); } }, minimiseVideo:function() { if (this.myvlc != null) { this.vlc_device.style.width = "640px"; this.vlc_device.style.height = "480px"; this.container.focus(); } }, eventHandler:function(ev) { switch (ev.type) { case 'keydown': switch (ev.keyCode) { case videoEventKey.VOLUME_UP: this.maximiseVideo(); break; case videoEventKey.VOLUME_DOWN: this.minimiseVideo(); break; } break; } ev.cancelBubble = true; } } </script> <style> .vlccontent { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .container { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #000; } </style> </head> <body onload="vlcPlayer.loadDefaultVideo()" onKeyDown="vlcPlayer.eventHandler(event)"> <div id="container" class="container"> <div id="vlccontent">This text is replaced by the VLC player.</div> </div> </body> </html>

greenb
New Cone
New Cone
Posts: 2
Joined: 21 Feb 2009 00:06

Re: Automatic Resize of embebbed VLC...

Postby greenb » 23 Feb 2009 18:18

Thanks for posting your solution I'll give it a try.

Do you know how to get the size from the video (in my case it's a transport stream) and then set the plugin to the native size of the video?
I'd like the player to open at the resolution of the video which I don't know ahead of time.
Thanks.

cctvcam
Blank Cone
Blank Cone
Posts: 29
Joined: 20 Jul 2010 15:29

Re: Automatic Resize of embebbed VLC...

Postby cctvcam » 01 Sep 2010 12:37

And it turns out that the solution was far more simple than I imagined, use the style attribute of the vlc object.
Did you actually get this to work once the video had started. I have found that if the video has started although the player resizes the video is still the same size and is stuck in the position on the screen even if the browser window is moved around. what I am trying to achieve is a video window that can be resized by the user by adjusting the browser window, while the video is playing.

Has anyone done this and can point me in the right direction please?

TiagoDias
New Cone
New Cone
Posts: 5
Joined: 01 Sep 2010 22:54

Re: Automatic Resize of embebbed VLC...

Postby TiagoDias » 01 Sep 2010 23:35

The easiest solution I found was:

vlc.width=70;vlc.style.width=70;vlc.height=57;vlc.style.height=57;vlc.playlist.play();

It's pretty good, the player resizes and the stream doesn't stop for a bit.

rmhartman
Blank Cone
Blank Cone
Posts: 16
Joined: 02 Nov 2010 19:39

Re: Automatic Resize of embebbed VLC...

Postby rmhartman » 28 Dec 2010 00:56

Which browser are you using, and which operating system?
I have no problems resizing the plugin under IE, or even under Firefox-for-Windows, however when I am using Firefox-for-linux (Ubuntu) resize does not work. The window will resize, but the playing video will remain the original size. That is, if I start out at 640x480, then resize to 320x240 I will be looking at the upper-left corner of the original video. Adding the vlc.playlist.play(); does not help -- it actually restarts the video from the beginning.
Any other ideas?
(vlc plugin for firefox for linux is v1.1.4)


Return to “Web and scripting”

Who is online

Users browsing this forum: No registered users and 9 guests