How do I resize video in web page

SteveRicketts · Postby **SteveRicketts** » 10 Jan 2011 21:46

I'm using 1.1.5 in a web page and trying to resize the video but it's not changing. I've tried

document.getElementById('VLC').width = 640
document.getElementById('VLC').height = 480
and
document.getElementById('VLC').style.width = 640
document.getElementById('VLC').style.height = 480

but the size doesn't change. How can I change the video size using Javascript?

<object id="VLC" classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
pluginspage="http://www.videolan.org"
version="VideoLAN.VLCPlugin.2"
width="320px" height="240px" events="True">
<param name="src" value="w:\OnDemand\CADE 101_188_3.wmv"/>
<param name="ShowDisplay" value="True" />
<param name="AutoLoop" value="no"/>
<param name="AutoPlay" value="true"/>
<embed type="application/x-vlc-plugin"
autoplay="yes" loop="false"
id="VLC"
pluginspage="http://www.videolan.org" version="VideoLAN.VLCPlugin.2"
width="320" height="240"
src="w:\CADE/OnDemand\CADE 101_188_3.wmv"
target="w:\OnDemand\CADE 101_188_3.wmv"
>
</embed>
</object>

SteveRicketts · Postby **SteveRicketts** » 11 Jan 2011 16:06

Ok, I found that there was a bug reported on resizing in Linux (http://trac.videolan.org/vlc/ticket/3808) 7 months ago. I'm having the problem on both Linux and Windows. Can anyone provide an update on the status of the bug? I can't see whether it's been fixed yet or not.

meteornp · Postby **meteornp** » 20 Jan 2011 02:44

Your code works in windows if you just do not use the same ID ('VLC") for both, object and embed...
...
<object id="VLCIE" classid= ... ... ...>
<embed type="application/x-vlc-plugin" ... ... ... id="VLC" ... ... ...></embed>
</object>
...
document.getElementById('VLC').style.width ... and .style.height changes will be ok for mozilla, opera, chrome...
...
- and for IE browser supporting you need to use VLCIE object instead (extra javascript code for checking and avoiding ie bugs - not related to this post).

jack.ting · Postby **jack.ting** » 20 Jan 2011 07:09

I avoid the resize of VLC object by the javascript "document.write()"

Code: Select all

<head>
...
<script language="JavaScript">
function WriteVLC(str, xsz, ysz) {
   document.write('<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"\n');
   document.write('       codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"\n');
   document.write('             id="'+str+'" name="'+str+'" width='+xsz+' height='+ysz+' events="True">\n');
   document.write('<param name="Src" value="" />\n');
   document.write('<param name="AutoPlay" value="False" />\n');
   document.write('<param name="AutoLoop" value="True" />\n');
   document.write('<param name="Volume" value="0" />\n');
   document.write('<embed type="application/x-vlc-plugin" name="'+str+'" width="'+xsz+'" height="'+ysz+'" />\n');
   document.write('</object>\n');
}
</script>
</head>
<body>
   <script language="JavaScript">WriteVLC("vlc1", 640, 480);</script>
</body>

SteveRicketts · Postby **SteveRicketts** » 24 Jan 2011 22:59

I changed the ID's in the object and embed and am using document.getElementById('VLC').style for width and height in Firefox on openSUSE but it doesn't seem to make any difference. The video size does not change. I'm needing to do this in Javascript because the user can resize the video to interact with the desktop and then change to the full screen (not true full screen just screen.width/height). I checked the values I'm giving width and height but they remain the 800x600 as they were when the object/embed was first created. Any other thoughts?

sr

SteveRicketts · Postby **SteveRicketts** » 25 Jan 2011 15:16

Just installed 1.1.6 and no luck. Still doesn't resize. Any other workarounds to get this to change size?

612wharfavenue · Postby **612wharfavenue** » 06 Feb 2011 05:26

I hate to be this guy, but cant you use css or just change the parameters in <embed>? Or are you trying to get around the fact that vlc crashes when using transitions?

The correct syntax for referencing css in js is
document.getElementById('VLC').style.height ="480px" //u have to include the quotes and the unit if there is one

dumoulex · Postby **dumoulex** » 17 Feb 2011 10:25

Ok, I found that there was a bug reported on resizing in Linux (http://trac.videolan.org/vlc/ticket/3808) 7 months ago. I'm having the problem on both Linux and Windows. Can anyone provide an update on the status of the bug? I can't see whether it's been fixed yet or not.

I saw this ticket and as you said, there is nothing new since 7 months.. did you find something ?
I have to develop a project which use chrome or firefox to read video and I need the full screen mode...

I have to use vlc or another player because my video is in H264 so impossible to open it with <video src="">

if someone have a solution to force fullscreen or something like that it would be so cool !

thanks

dumoulex · Postby **dumoulex** » 17 Feb 2011 15:38

found something, it is not fullscreen but it's enought for what I have to do !
with javascript I recover width and height and after I load my player on the full page with these parameters.

associated with onLoad and onResize my player is always at its maximum size.

SteveRicketts · Postby **SteveRicketts** » 28 Feb 2011 19:32

Still can't get the player to resize. I'm using 1.1.7 now in openSUSE 11.3. As 612wharfavenue suggested, I'm putting:

document.getElementById('VLC').style.width ="1360px";
document.getElementById('VLC').style.height ="1023px";
alert(document.getElementById('VLC').style.width + ' ' + document.getElementById('VLC').style.height) // shows 800px 600px... the original size

To the question of putting the size in the <embed>... I need to resize multiple times during the playback between semi-full screen and a smaller (800x600) size.

Dumoulex, what parameters are you using to resize in your onLoad and onResize functions?

dumoulex · Postby **dumoulex** » 17 Mar 2011 09:35

Hi,

In my case Im using a tip to have fullscreen mode, I can launch my browser in fullscreen mode so when I run my video I use
var larg = (screen.width);
var haut = (screen.height);
like that my video is on the full screen if I remove the scrollbar.

this is my code if it can help you :

Code: Select all

	function ViewFilm(filmsrc){
			
                                filmsrc = "rtsp://" + adresseServeur + ":" + numPort + "/axis-media/media.amp?streamprofile=" + profile ;
				var larg = (screen.width);
				var haut = (screen.height);
				
				var d = document.getElementById('player');
				if(!d) return;
				$("#player").append("<embed style=\"position:absolute;top:0px;left:0px;\" width=\"" + larg + "\" height=\"" + haut + "\" type=\"application/x-vlc-plugin\" id=\"MediaPlayer\" fullscreen=true target=\""+filmsrc+"\" autostart=true>");
	}

<body onload="viewFilm()" scrolling="no" style="overflow:hidden">
<div id="player">&nbsp;</div>

Hope it will be helpfull..

The VideoLAN Forums

How do I resize video in web page

How do I resize video in web page

Re: How do I resize video in web page

Re: How do I resize video in web page

Re: How do I resize video in web page

Re: How do I resize video in web page

Re: How do I resize video in web page

Re: How do I resize video in web page

Re: How do I resize video in web page

Re: How do I resize video in web page

Re: How do I resize video in web page

Re: How do I resize video in web page

Who is online