/ Published in: HTML
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> div.playercontainer1 { position: absolute; top: 100px; left: 600px; width: 320px; height: 280px; } div.playercontainer2 { position: absolute; top: 100px; left: 280px; width: 320px; height: 460px; } div.playercontainer3 { position: absolute; top: 380px; left: 600px; width: 320px; height: 180px; } </style> <script type="text/javascript"> var player1 = null; var player2 = null; var player3 = null; var playlist2Length = null; var selectFlag = true; var instrumentation = false; function playerReady(obj) { window['player' + obj.id.substr((obj.id.length -1), 1)] = gid(obj.id); if((typeof player1 == 'object') && (typeof player2 == 'object') && (typeof player3 == 'object')) { if(instrumentation) { gid('players1').innerHTML = 'Player1: ' + player1.id + '<br />Player2: ' + player2.id + '<br />Player3: ' + player3.id; } addListeners(); } }; function addListeners() { if(instrumentation) { } if((typeof player1.getPlaylist() == 'object') && (typeof player2.getPlaylist() == 'object') && (typeof player3.getPlaylist() == 'object')) { var playlist2 = player2.getPlaylist(); var playlist3 = player3.getPlaylist(); playlist2Length = playlist2.length; var playlist1 = playlist2.concat(playlist3); player1.sendEvent('LOAD', playlist1); if(instrumentation) { } player1.addControllerListener('ITEM', 'itemMonitor'); player2.addControllerListener('ITEM', 'itemMonitor'); player3.addControllerListener('ITEM', 'itemMonitor'); player1.addControllerListener('PLAYLIST', 'playlistMonitor'); player1.sendEvent('LOAD', playlist1); } else { alert('Try Again'); setTimeout("addListeners()", 100); } }; function itemMonitor(obj) { if(instrumentation) { } if(obj.id == 'player1') { if(instrumentation) { } selectFlag = false; if(obj.index < playlist2Length) { player2.sendEvent('ITEM', obj.index); player2.sendEvent('STOP'); } else { player3.sendEvent('ITEM', obj.index - playlist2Length); player3.sendEvent('STOP'); } } else if(obj.id == 'player2') { if(instrumentation) { } if(selectFlag) { player2.sendEvent('STOP'); player1.sendEvent('ITEM', obj.index); } selectFlag = true; } else if(obj.id == 'player3') { if(instrumentation) { } if(selectFlag) { player3.sendEvent('STOP'); player1.sendEvent('ITEM', obj.index + playlist2Length); } selectFlag = true; } }; function playlistMonitor(obj) { //alert('playlistMonitor'); player1.sendEvent('ITEM', 11); if(instrumentation) { var listnodes = '<br />'; for(var j in obj.playlist) { for(var k in obj.playlist[j]) { } } gid('listnodes').innerHTML = '<br />Playlist:' + listnodes; } }; function gid(name) { return document.getElementById(name); }; </script> <!-- <script type="text/javascript"> var changing = false; var dofunnyStuff = true; // cacheBuster for IE - true=enable false=disable //...this code goes in the itemMonitor(obj) function function itemMonitor(obj) { //...change the player item if(dofunnyStuff) { changing = true; funnyStuff(obj.index); } else { player1.sendEvent('ITEM', obj.index); } gid('item').innerHTML = 'Current Item: ' + currentItem + '<br />New Item : ' + newItem; }; function funnyStuff(idx) // AKA cacheBuster { var playlist = player1.getPlaylist(); /* //...don't need it! //...determine the media type since the file extension won't be available var type; switch(playlist[idx].file.substring(playlist[idx].file.length - 3)) { case 'flv': case 'mp4': type = 'video'; break; case 'mp3': type = 'sound'; break; default: type = 'undefined'; } */ //...add random number to file playlist[idx].file = playlist[idx].file.replace(/\?.*/, '') + '?' + (Math.round(1000 * Math.random())); //...don't need it! //...set a type //playlist[idx].type = type; //...just for testing //playlist[idx].title = playlist[idx].title + 'a'; //...reload playlist player1.sendEvent('LOAD', playlist); //...select item to play player1.sendEvent('ITEM', idx); //...done changing playlist changing = false; //alert('Done changing playlist index: ' + idx + '\nFile: ' + player1.getPlaylist()[idx].file); }; </script> --> <script type="text/javascript"> var playlist2 = encodeURIComponent('playlist_songs.xml'); var playlist3 = encodeURIComponent('playlist_Ruby.xml'); var flashvars = { 'streamer': 'lighttpd', 'file': playlist2, 'playlist': 'none', 'stretching': 'exactfit', 'bufferlength': '2', 'volume': '70', 'repeat': 'list', 'shuffle': 'false', 'frontcolor': 'CCCCCC', 'backcolor': '333333', 'lightcolor': '8080FF', 'screencolor': '333333', 'id': 'player1', 'autostart': 'false' }; var params = { 'allowfullscreen': 'true', 'allowscriptaccess': 'always', 'bgcolor': '#FFFFFF' }; var attributes = { 'id': 'player1', 'name': 'player1' }; swfobject.embedSWF('player-4.4.162.swf', 'player1', '320', '280', '9.0.124', false, flashvars, params, attributes); var attributes = { 'id': 'player2', 'name': 'player2' }; flashvars.file = playlist2; flashvars.controlbar = 'none'; flashvars.playlist = 'bottom'; flashvars.playlistsize = '460'; flashvars.id = 'player2'; flashvars['playlist.thumbs'] = 'false'; swfobject.embedSWF('player-4.4.162.swf', 'player2', '320', '460', '9.0.124', false, flashvars, params, attributes); var attributes = { 'id': 'player3', 'name': 'player3' }; flashvars.file = playlist3; flashvars.playlistsize = '180'; flashvars.id = 'player3'; flashvars['playlist.thumbs'] = 'true'; swfobject.embedSWF('player-4.4.162.swf', 'player3', '320', '180', '9.0.124', false, flashvars, params, attributes); </script> </head> <body> <!-- for testing --> <div id="players1" style="color:black;"> </div> <div id="players2" style="color:black;"> </div> <div id="playlists" style="color:black;"> </div> <div id="selection" style="color:black;"> </div> <div id="selection1" style="color:black;"> </div> <div id="selection2" style="color:black;"> </div> <div id="selection3" style="color:black;"> </div> <div id="item" style="color:black;"> </div> <div id="listnodes" style="color:black;"> </div> </body> </html>