HD Plugin: Player window resize
Oct. 29, 2009mike L.
Hello folks,
I am testing out the HD plugin and got the implementation going quite well, but I do have a question:
Is it possible to specify two screen widths, allowing the HD switch to automatically resize to the specific size whenever SD or HD is selected? If so, how is that implemented?
Many thanks in advance!
Oct. 30, 2009hobbs
The code posted below will automatically re-size the player when the HD state is switched.
I ran into one quirk and one limitation.
The quirk: Internet Explorer won't re-size the first time unless you read the player's config object, which I had been doing during development, but normally wouldn't be done during normal use. The workaround is to read the player's config object on re-size — no downside.
The limitation: You lose the HD plugin's automatic state switching on fullscreen. If you allow automatic state switching on fullscreen, the HD plugin monitors the RESIZE event and switches back to hd.state=false when you switch to hd.state=true.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<!-- From: http://www.longtailvideo.com/support/forum/Plugins/20387/HD-Plugin-Player-window-resize -->
<head>
<title>Simple HD Re-Size - JWMP v4.6.x - swfobject v2.2</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load('swfobject', '2.2');
</script>
<script type="text/javascript">
var flashvars =
{
'file': '/video/ThingsFallApart.flv',
'skin': 'snel-2',
'frontcolor': '86C29D', // text & icons (green)
'backcolor': '003367', // playlist background (blue)
'lightcolor': 'C286BA', // selected text/track highlight (red)
'screencolor': 'FFFFFF', // screen background (black)
'plugins': 'http://willswonders.myip.org:8074/hd-1.3',
'hd.file': '/video/ThingsFallApart.mp4',
'hd.state': 'false', // supposedly not needed if hd.fullscreen=true, but doesn't work that way
'hd.fullscreen': 'false', // MUST be set to false, otherwise the hd.state gets toggled on the re-size
'id': 'playerID',
'autostart': 'true'
};
var params =
{
'allowfullscreen': 'true',
'allowscriptaccess': 'always',
'bgcolor': '#FFFFFF'
};
var attributes =
{
'id': 'playerID',
'name': 'playerID'
};
swfobject.embedSWF('player-4.6.485.swf', 'player', '500', '313', '9.0.124', false, flashvars, params, attributes);
</script>
<script type="text/javascript">
var player = null;
var playlist = null;
var stuff = null;
var morestuff = null;
function playerReady(obj)
{
player = gid(obj.id);
addListeners();
};
function addListeners()
{
playlist = player.getPlaylist();
if(playlist.length > 0)
{
player.addControllerListener('ITEM', 'itemMonitor');
}
else
{
setTimeout("addListeners();", 100);
}
};
function itemMonitor(obj)
{
if(player.getPluginConfig('hd')['state'])
{
setFlashSize(600, 370);
}
else
{
setFlashSize(500, 313);
}
/*...only for testing
stuff = '<br />Item:';
for(var j in obj)
{
stuff += '<li>' + j + ': ' + obj[j] + '</li>';
}
stuff += '<li>hd.state: ' + player.getPluginConfig('hd')['state'] + '</li>';
gid('item').innerHTML = stuff;
setTimeout("gid('item').innerHTML = '';", 5000);
*/
/*...only for testing
var plugconfig = player.getPluginConfig('hd');
morestuff = '<br />HD Plugin Config:';
for(var j in plugconfig)
{
morestuff += '<li>' + j + ': ' + plugconfig[j] + '</li>';
}
gid('plugconfig').innerHTML = morestuff;
setTimeout("gid('plugconfig').innerHTML = '';", 5000);
*/
};
function setFlashSize(newW, newH)
{
gid('playercontainer').style.width = newW + 'px';
gid('playercontainer').style.height = newH + 'px';
player.width = newW;
player.height = newH;
//...DO NOT comment out this code
//...for some unknown reason,
//...the player won't re-size the first time,
//...unless the player config object is read
//...Internet Explorer only
var config = '<br />Config:';
for(var j in player)
{
config += '<li>' + j + ': ' + player[j] + '</li>';
}
//gid('config').innerHTML = config;
};
function gid(name)
{
return document.getElementById(name);
};
</script>
<!-- Re-Size by Type
<script type="text/javascript">
var player = null;
var playlist = null;
var soundWidth = 300;
var soundHeight = 20;
var videoWidth = 300;
var videoHeight = 240;
function playerReady(obj)
{
player = gid(obj.id);
addListeners();
};
function addListeners()
{
playlist = player.getPlaylist();
if(playlist.length > 0)
{
player.addControllerListener('ITEM', 'itemMonitor');
}
else
{
setTimeout("addListeners();", 100);
}
};
function itemMonitor(obj)
{
if(playlist[obj.index]['type'] == 'sound')
{
setFlashSize(soundWidth, soundHeight);
}
else
{
setFlashSize(videoWidth, videoHeight);
}
};
function setFlashSize(newW, newH)
{
gid('playercontainer').style.width = newW + "px";
gid('playercontainer').style.height = newH + "px";
player.width = newW;
player.height = newH;
};
function gid(name)
{
return document.getElementById(name);
};
</script>
-->
</head>
<body>
<br />
<div id="playercontainer" class="playercontainer"><a id="player" class="player" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Flash Plugin to see this video.</a></div>
<!-- only for testing -->
<div id="item"></div>
<div id="plugconfig"></div>
<div id="config"></div>
<!-- only for testing -->
</body>
</html>
Nov. 19, 2009Damien
I'm pretty new to all this and I haven't got a clue how to implement this code or what needs to be changed. Does it even work if the plugin isn't your own server?
Nov. 19, 2009Damien
Nevermind, figured it out.
Nov. 19, 2009Damien
One problem I'm having is that my video is displayed in the center of the page. Whenever I click the HD button it resizes then shifts to the left. Is there any way to make it stay in the center?
Page in question is here www.d4mo.co.uk/justoffscreen/test.html
Search the Forums
Forum Categories
Support
Here are some helpful links to learn more about the JW Player™:
- Setup Wizard writes player code for you.
- Embedding Flash Tutorial shows how to embed the JW Player™ in your site.
- Forum provides access to over two million JW Player™ users.
- Developers Center (Wiki) explains everything from flashvars to skinning.
- Do you need custom Flash work? Email us.
Monetize Your Video
Earn money with ads from LongTail's AdSolution. Watch our demos and sign up now!
Why Buy a License?
If you don’t buy a commercial license, you cannot use a JW Player™ on (i) a site that has ads; (ii) a corporate site; or a (iii) CMS. Our licenses are very inexpensive, so what are you waiting for? Buy a license today.
