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!
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?
Nevermind, figured it out.
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
Please? I know this is probably a trivial problem for someone who knows a thing or two about coding. But I would be most grateful.
I had so many problems understanding the jw player until I found a great example download.
It demonstrates how to do most everything you would want to do with the jw player including, on-demand streaming from multiple servers, resizing, sendevent, and dynamically setting the start position. It also works with all browsers, so there are no compatibility issues, and it does not need to use the swfobject.
Details: http://www.promatrixinc.com/Video.Explorer.Express/
Also, check out the full version of the Video Explorer here:
http://www.promatrixinc.com/Video.Explorer/?directory=voiceover_speech_sequencer_streamhoster
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>