Dynamic Video Size - auto-adjust? Created Jan 26, 2009

there are two options. either set correct width/height for the player container using CSS. also note that controlbar takes additional 24 pixels. or you can use scaling property as follows



HTML setup for the player

<!-- include latest Flowplayer javascript file -->
<script language="javascript" src="path/to/flowplayer-3.2.8.js"></script>

<!-- player container with optional splash image -->
<a href="path/to/video_file" id="playerContainer">
	<img src="path/to/splash_image" />
</a>

JavaScript coding

Following script will install Flowplayer into our player container

<script language="javascript">
// our custom configuration is given in third argument
flowplayer("playerContainer", "path/tohttp://releases.flowplayer.org/swf/flowplayer-3.2.11.swf",{
clip: {
  scaling: 'fit'
}
});
</script>

Thanks, but it looks like in your CSS you are specifying a width & height and your video is not going any larger than those dimensions. I was hoping to be able to adjust the player size based on the metadata height & width. So if my movie was 640 wide, I could adjust my player to be 640 wide, and if my movie was 320 wide, I could adjust the player to be 320 wide (not 640 wide with filler around the 320 movie).

Well. Here you go. This resizes the video based on the clip dimensions. Sometimes I get amazed how much you can do with this player!



HTML setup for the player

<!-- include latest Flowplayer javascript file -->
<script language="javascript" src="path/to/flowplayer-3.2.8.js"></script>

<!-- player container with optional splash image -->
<a href="path/to/video_file" id="playerContainer">
	<img src="path/to/splash_image" />
</a>

JavaScript coding

Following script will install Flowplayer into our player container

<script language="javascript">
// our custom configuration is given in third argument
flowplayer("playerContainer", "path/tohttp://releases.flowplayer.org/swf/flowplayer-3.2.11.swf",{
clip: {
  onStart: function(clip) {
    var wrap = jQuery(this.getParent());
    wrap.css({width: clip.width, height: clip.height});
  }
}
});
</script>

clip.width is always 320 :(,
but the Videoresolution is higher.

EDIT:

clip.metaData.width <-- has the correct value

Yes clip's metaData has the encoded width and height values. clip.width and clip.height reflect the size after the clip has been resized according to the scaling option.

This should work better:



HTML setup for the player

<!-- include latest Flowplayer javascript file -->
<script language="javascript" src="path/to/flowplayer-3.2.8.js"></script>

<!-- player container with optional splash image -->
<a href="path/to/video_file" id="playerContainer">
	<img src="path/to/splash_image" />
</a>

JavaScript coding

Following script will install Flowplayer into our player container

<script language="javascript">
// our custom configuration is given in third argument
flowplayer("playerContainer", "path/tohttp://releases.flowplayer.org/swf/flowplayer-3.2.11.swf",{
clip: { 
  onStart: function(clip) { 
    var wrap = jQuery(this.getParent()); 
    wrap.css({width: clip.metaData.width, height: clip.metaData.height}); 
  } 
}
});
</script>

Note: To be on the safe side and depending on the injected meta data (eg. width might be 320.000000) I think it's a good idea to parseInt the value:

onStart: function (clip) {
  var w = parseInt(clip.metaData.width, 10),
      h = parseInt(clip.metaData.height, 10);
  $(this.getParent()).css({width: w, height: h});
}

I actually had to add 27 px to the height to get it to display the full video at its proper height. My guess is that the 27 px is the height of the controls. Anyway to do this dynamically and not hardcode the height at 27 px?

<script type="text/javascript">

#your flowplayer code

$("#div_id_here").css('width','600px');
$("#div_id_here").css('height','450px');
</script>

I see a lot of video sites offering different sizes in the video player controller bar now (480, 640, hd). You select the size, the window re-sizes and continues playing from where you left off.

I figure I would need to use the one of the control bar plugins and some kind of event listeners, but that is getting pretty far out my league as far as coding goes.

Any thoughts on how to do this somewhat painlessly?

I hacked around this by having some links that replaced the movie and did a seek to about 10 seconds before the place you were.

Would be nice to be able to do it via the control bar though.

Did anyone ever find a solution to this? I'm looking for a very YouTube-esque video size dropdown.

The width is automatically adjusted based on the ratio. My constant height is 330px. If you distract 24px (height of the control panel) you get 306px. If you multiply it with the ratio (clip.metaData.width/clip.metaData.height), you get the desired width of the container.
May be not the most elegant way but it works. Feel free to improve it...

<div align="center">
<a href="URL" style="display:block;width:545px;height:330px" id="player"></a>
</div>

<script>
   flowplayer("player", "URL/flowplayer/flowplayer-3.1.5.swf", { clip: { autoPlay:false, scaling:'fit', onStart: function(clip) { document.getElementById('player').style.width=(306*(clip.metaData.width/clip.metaData.height)); } } });
</script> ';

What about fixed width and adjusted height? I tried on my own but this doesn't work, any ideas?

clip: {
  onStart: function(clip) {
    var wrap = jQuery(this.getParent());
    var strD = clip.metaData.height / clip.metaData.width;
    var strH = strD * 540;
    wrap.css({width: 540, height: strH});
  },
  scaling: 'fit',
  autoPlay: true,
  autoBuffering: true
}

Thank you, your code totally worked for me :)

Can this trick work for mp4 videos? My problem is that I have videos with different width and heights, and I don't want to manually key these values.

If Flowplayer could automatically detect these values it would be great. Html5 <video> tag can do it.

I have faced the same requirement with a current site where most videos are mp4 format. Not using Flowplayer (yet), but the current method I use with another "lightbox" type thingy and another player is to pass the video resolution in the filename. So if the filename ends with 640x360 then that is the resolution I parse out to set the size in script.

e.g. myvideofile320x180.mp4 or myvideofile640x360.mp4

I have yet to try make this work with Flowplayer, but I cant see why it would be an issue. It is easy enough for me to make sure filenames are ended this way. At least is is in data of the content item. So the code is 100% reusable.

PS. I also rewrite the href to go via a CDN, so I have to parse the href in any case. This way the video will stream from a location different from the basic URL where a content editor associated the link. So I can control protocol, location and resolution without coding, or editors bothering with anything except the filename including the resolution. Works for me. Maybe it could help give others a few ideas.

I use the php-ffmpeg module to do this for me. Once you get the module install, you should be able to do this.

I put this at the top of the page, $file being your FLV file.

$movie = new ffmpeg_movie($file);
$height = $movie->getFrameHeight();
$width = $movie->getFrameWidth();

Then on your player code, you should do it up like this:

<a
    href="<?php printf('%s%s/%s%s', $uri_prefix, $m, $t_hex, $f, $f); ?>"
    style="display:block;width:<?php echo $width;?>px;height:<code class="php"><?php echo $height;?>px;"
    id="player">
</a>

<script language="JavaScript">
flowplayer("player", "/flowplayer/flowplayer-3.1.5.swf");
</script>

Notice the embeded PHP on the style width and height tags.

For complete source path you can just seehttp://code.google.com/p/flowplayer-plugins/source/browse/flash/bitrates/trunk/example/index.html.tmpl?r=1287 ,Hope some changes on it may solve your problem.impresoras cd

I'm using the flowplayer for one of my projects. Is there any possibility to access the clip metadata onLoad or onBeforeLoad and not only onStart?!

In general i need to get the height and width of the clip in order to set the exactly clip size and to set the height of a menu that is besides the clip.

thank you

on(Before)Load is a player event (load the player, not the clip), but you need to gain access to the metadata of the clip, therefore you need a clip event. In theory this should work with onMetadata, but with the current version you still have to use onStart - the difference would be unnoticeable anyway.

And the on(Before)Begin Event? Is this possible?
I'm a bit confused. Is there no possibility to set up the player with the original size of the clip?

I just want to have the player in the size of the clip automaticly...

Usecase: User upload a clip in the backend of his website. The user doesnt know the size. for the frontend, where the clip should play i use the flowplayer. but without setting the height and width the player disapear.

Yes, there is, using the onStart event. See Ansii's answer in this very thread:
http://flowplayer.org/forum/2/14168#post-19025

Plus my slightly more secure version:

clip: {
  onStart: function (clip) {
    var w = parseInt(clip.metaData.width, 10),
        h = parseInt(clip.metaData.height, 10);
    $(this.getParent()).css({width: w, height: h});
  }
}

At an earlier stage this is not possible because the Flash player has not access to the clip's metadata before it starts buffering the clip, it is not clairvoyant ;-) If you want to know the clip's dimensions before, you have to script this on the server side as outlined in this post:
http://flowplayer.org/forum/2/14168#post-52906

Yes, i know this solution, but onStart the player "jumps" to this size. i dont want that the users could see this.

thank you very much...

maybe ffmpeg-php is a solution?

Anything that grabs the metadata on the server-side before the page loads - so chances are that it is php in conjunction with a program which can quickly retrieve video metadata and ffmpeg is one of them.

Flash and JavaScript work on the client side, and are too late for your purpose.