so, i've done the ol' copy/paste from one of andersen's demo pages, works like a charm
I'll post the code i'm trying to modify below.
What this code does is pre-populate a player with an initPlayer() function, and the select box lets you switch skins. Very nice.
What i'd like to do, is switch more than just the skin when the new player is re-drawn.
So, for example, some skins have a different playlist that should load, so, if i load Skin2, i'd like to also load playlist2.
or, i might want to change the resolution of the player .. or the plug in ..
so basically, i want to create variables for
theFile
theSkin
thePlugin
theHeight
theWidth
thePlaylistSize
thePlaylistPosition
and so on ...
[andersen's example hard-codes many of these variables]
the code i'm working from is below. starting with the simplest modification: how do i change this so it loads a different playlist at the same time it loads a different skin:
<html>
<head>
<title>JW API Example 3-4-1-0 - JW FLV Media Player</title>
<style type="text/css">
#wrapper { position:absolute; left:64px; top:128px; width:320px; height:196px; background-color:#CCCC00; }
#sel1 { position:absolute; left:64px; top:106px; width:320px; }
</style>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
function deletePlayer(theWrapper, thePlaceholder, thePlayerId) {
swfobject.removeSWF(thePlayerId);
var tmp=document.getElementById(theWrapper);
if (tmp) { tmp.innerHTML = "<div id='" + thePlaceholder + "'></div>"; }
}
function createPlayer(theFile, theSkin, theAutostart) {
var flashvars = {
file:theFile,
autostart:theAutostart,
skin:theSkin
}
var params = {
allowfullscreen:"true",
allowscriptaccess:"always"
}
var attributes = {
id:"player1",
name:"player1"
}
swfobject.embedSWF("player.swf", "placeholder1", "320", "196", "9.0.115", false, flashvars, params, attributes);
}
var currentFile;
var currentSkin;
function initPlayer(theFile, theSkin, theAutostart) {
currentFile = theFile;
currentSkin = theSkin;
deletePlayer('wrapper', 'placeholder1', 'player1');
createPlayer(theFile, theSkin, theAutostart);
}
</script>
<head>
<body onload="initPlayer('http://content.bitsontherun.com/videos/3ta6fhJQ.flv', document.getElementById('sel1').value, false)">
<a href="http://www.jeroenwijering.com/?item=JW_FLV_Media_Player">JW FLV Media Player</a> Changing skin<br>
<br>
<a href="javascript:initPlayer('http://content.bitsontherun.com/videos/3ta6fhJQ.flv', currentSkin, true);">Play video</a><br>
<a href="javascript:initPlayer('http://content.bitsontherun.com/videos/qyehIiBT.flv', currentSkin, true)">Play video2</a><br>
<select id="sel1" onchange="initPlayer(currentFile, this.value, false)">
<option value="">Default</option>
<option value="Snel.swf">Snel</option>
<option value="Nacht.swf" selected>Nacht</option>
<option value="Schoon.swf">Schoon</option>
</select>
<div id="wrapper">
<div id="placeholder1"></div>
</div>
</body>
</html><!-- Nedenstående indsat af TDC for at måle trafikken samtidig med at brugeren er 100% anonym. Koden må ikke sættes ud af funktion, kopieres, eller ændres. --> <img src="http://statistik-gallup.net/V11***tdckoncern_dk/dk/ISO-8859-1//">
thanks!
ok, here's the path i'm going down.
i have managed to do this with multiple select boxes, but i'm still only able to drive one flashvar at a time.
(since the onchange command only supports one "this.value")
is there an easy way for "this.value" to be driven by multiple flashvars, as explained above?
here's the code i'm working with .. working well, but not exactly what i had intended .. input welcome:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>xtranormal render tests</title>
<style type="text/css">
body { background-color: #fff; padding: 0 25px; color:#000; font: 13px/18px Arial, sans-serif; }
td { background-color: #fff; padding: 0 25px; align: center; vertical-align: middle; color:#000; font: 12px/16px Arial, sans-serif; }
a { color: #360; }
h3 { padding-top: 50px; }
ol { margin:5px 0 15px 16px; padding:0; list-style-type:square; }
</style>
<style type="text/css">
#wrapper { position:absolute; left:340px; top:100px; width:320px; height:196px; background-color:#CCCC00; }
#customizeHeading {position:absolute; left:64px; top:60px; width:300px; font: 13px/18px Arial, sans-serif; font-weight: bold; }
#leftShading {position:absolute; left:60px; top:90px; width:270px; height:540px; background-color:#999; }
#sel1Header { position:absolute; left:64px; top:100px; width:200px; color:#FFF; font: 16px/21px Arial, sans-serif; font-weight:bold; }
#sel1 { position:absolute; left:64px; top:120px; width:200px; }
#sel2Header { position:absolute; left:64px; top:160px; width:200px; color:#FFF; font: 16px/21px Arial, sans-serif; font-weight:bold;}
#sel2 { position:absolute; left:64px; top:180px; width:200px; }
#sel3Header { position:absolute; left:64px; top:220px; width:300px; color:#FFF; font: 16px/21px Arial, sans-serif; font-weight:bold;}
#sel3 { position:absolute; left:64px; top:240px; width:200px; }
#sel4Header { position:absolute; left:64px; top:280px; width:300px; color:#FFF; font: 16px/21px Arial, sans-serif; font-weight:bold;}
#sel4 { position:absolute; left:64px; top:300px; width:200px; }
#sel5Header { position:absolute; left:64px; top:340px; width:300px; color:#FFF; font: 16px/21px Arial, sans-serif; font-weight:bold;}
#sel5 { position:absolute; left:64px; top:360px; width:200px; }
</style>
<!-- CSS TABBED MENU -->
<script type="text/javascript" src="addclasskillclass.js"></script>
<script type="text/javascript" src="attachevent.js"></script>
<script type="text/javascript" src="addcss.js"></script>
<script type="text/javascript" src="tabtastic.js"></script>
<!-- DROP DOWN MENU -->
<script type = "javascript">
function nav()
{
var w = document.myform.mylist.selectedIndex;
var url_add = document.myform.mylist.options[w].value;
window.location.href = url_add;
}
</script>
<!-- JW PLAYER -->
<script type="text/javascript" src="swfobject-21.js"></script>
<script type="text/javascript">
function deletePlayer(theWrapper, thePlaceholder, thePlayerId) {
swfobject.removeSWF(thePlayerId);
var tmp=document.getElementById(theWrapper);
if (tmp) { tmp.innerHTML = "<div id='" + thePlaceholder + "'></div>"; }
}
function createPlayer(theFile, theSkin, thePlaylistPosition, theLogo, thePlugin, theAutostart) {
var flashvars = {
file:theFile,
autostart:theAutostart,
skin:theSkin,
playlist:thePlaylistPosition,
playlistsize:"260",
stretching:"uniform",
logo:theLogo,
plugins:thePlugin
}
var params = {
allowfullscreen:"true",
allowscriptaccess:"always"
}
var attributes = {
id:"player1",
name:"player1"
}
swfobject.embedSWF("player.swf", "placeholder1", "900", "510", "9.0.115", false, flashvars, params, attributes);
}
var currentFile;
var currentSkin;
var currentPlaylistPosition;
var currentLogo;
var currentPlugin;
function initPlayer(theFile, theSkin, thePlaylistPosition, theLogo, thePlugin, theAutostart) {
currentFile = theFile;
currentSkin = theSkin;
currentPlaylistPosition = thePlaylistPosition;
currentLogo = theLogo;
currentPlugin = thePlugin;
deletePlayer('wrapper', 'placeholder1', 'player1');
createPlayer(theFile, theSkin, thePlaylistPosition, theLogo, thePlugin, theAutostart);
}
</script>
</head>
<body onload="initPlayer('bia-playlist.xml', document.getElementById('sel1').value, 'right', './images/gb3.swf', '', false)">
<h2 class="tabset_label">Table of Contents</h2>
<ul class="tabset_tabs">
<li><a href="#Overview" class="active">Overview</a></li><li><a href="#Skins">Skins</a></li>
</ul>
<div id="Overview" class="tabset_content">
<h2 class="tabset_label">Render Tests</h2>
<h3>Render Tests</h3>
<p>The following The following text will be replaced.</div>
<div id="Skins" class="tabset_content">
<h2 class="tabset_label">Select a Skin</h2>
<b>Select a skin: - Andersen Drop-down</b>
<div id="customizeHeading">Customize this Player</div>
<div id="leftShading"></div>
<div id="sel1Header"><b>Select a Skin</b></div>
<select id="sel1" onchange="initPlayer(currentFile, this.value, currentPlaylistPosition, currentLogo, currentPlugin, false)">
<option value="">Default (JW Native Skin)</option>
<option value="./skins/xtranormal-42_FINAL">Xtranormal</option>
<option value="./skins/bia.swf" selected>Brothers In Arms</option>
</select>
<div id="sel2Header"><b>Load a different Playlist</b></div>
<select id="sel2" onchange="initPlayer(this.value, currentSkin, currentPlaylistPosition, currentLogo, currentPlugin, false)">
<option value="./playlist.xml" selected>Xtranormal</option>
<option value="./bia-playlist.xml">Brothers In Arms</option>
</select>
<div id="sel3Header"><b>Change Branded Watermark</b></div>
<select id="sel3" onchange="initPlayer(currentFile, currentSkin, currentPlaylistPosition, this.value, currentPlugin, false)">
<option value="./images/XNL-alpha-SMALL.png">Xtranormal (No Animation)</option>
<option value="./images/gb3.swf" selected>Gearbox (Animated)</option>
</select>
<div id="sel4Header"><b>Change Playlist Location</b></div>
<select id="sel4" onchange="initPlayer(currentFile, currentSkin, this.value, currentLogo, currentPlugin, false)">
<option value="right" selected>Right Side</option>
<option value="over">Overlay</option>
<!-- HIDE THIS VALUE FOR NOW
<option value="bottom">Under Player</option>
-->
<option value="none">Turn Play List Off</option>
</select>
<div id="sel5Header"><b>Load Plugin</b></div>
<select id="sel5" onchange="initPlayer(currentFile, currentSkin, currentPlaylistPosition, currentLogo, this.value, false)">
<option value="" selected>No Plugin</option>
<option value="yousearch">Search</option>
<option value="viral-1">Share</option>
</select>
<div id="wrapper">
<div id="placeholder1"></div>
</div>
</body>
</html>
thanks again!