FLV Player 2 playlists 1 player


/ Published in: HTML
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. <head>
  6.  
  7. <title>Two Playlists plus One Media Player (3 Players) - JWMP v4.4.x - swfobject v2.2</title>
  8.  
  9. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  10.  
  11. <style type="text/css">
  12. div.playercontainer1
  13. {
  14. position: absolute;
  15. top: 100px;
  16. left: 600px;
  17. width: 320px;
  18. height: 280px;
  19. }
  20.  
  21. div.playercontainer2
  22. {
  23. position: absolute;
  24. top: 100px;
  25. left: 280px;
  26. width: 320px;
  27. height: 460px;
  28. }
  29.  
  30. div.playercontainer3
  31. {
  32. position: absolute;
  33. top: 380px;
  34. left: 600px;
  35. width: 320px;
  36. height: 180px;
  37. }
  38. </style>
  39.  
  40. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
  41.  
  42. <script type="text/javascript">
  43. var player1 = null;
  44. var player2 = null;
  45. var player3 = null;
  46. var playlist2Length = null;
  47. var selectFlag = true;
  48. var instrumentation = false;
  49.  
  50.  
  51. function playerReady(obj)
  52. {
  53. window['player' + obj.id.substr((obj.id.length -1), 1)] = gid(obj.id);
  54.  
  55. if((typeof player1 == 'object') && (typeof player2 == 'object') && (typeof player3 == 'object'))
  56. {
  57. if(instrumentation)
  58. {
  59. gid('players1').innerHTML = 'Player1: ' + player1.id + '<br />Player2: ' + player2.id + '<br />Player3: ' + player3.id;
  60. }
  61. addListeners();
  62. }
  63. };
  64.  
  65.  
  66. function addListeners()
  67. {
  68. if(instrumentation)
  69. {
  70. gid('players2').innerHTML = '<br />Player1: ' + typeof player1.getPlaylist() + '<br />Player2: ' + typeof player2.getPlaylist() + '<br />Player3: ' + typeof player3.getPlaylist();
  71. }
  72. if((typeof player1.getPlaylist() == 'object') && (typeof player2.getPlaylist() == 'object') && (typeof player3.getPlaylist() == 'object'))
  73. {
  74. var playlist2 = player2.getPlaylist();
  75. var playlist3 = player3.getPlaylist();
  76. playlist2Length = playlist2.length;
  77. var playlist1 = playlist2.concat(playlist3);
  78. player1.sendEvent('LOAD', playlist1);
  79. if(instrumentation)
  80. {
  81. gid('playlists').innerHTML = '<br />Playlist 1: ' + playlist1.length + '<br />Playlist 2: ' + playlist2.length + '<br />Playlist 3: ' + playlist3.length;
  82. }
  83. player1.addControllerListener('ITEM', 'itemMonitor');
  84. player2.addControllerListener('ITEM', 'itemMonitor');
  85. player3.addControllerListener('ITEM', 'itemMonitor');
  86. player1.addControllerListener('PLAYLIST', 'playlistMonitor');
  87.  
  88. player1.sendEvent('LOAD', playlist1);
  89. }
  90. else
  91. {
  92. alert('Try Again');
  93. setTimeout("addListeners()", 100);
  94. }
  95. };
  96.  
  97.  
  98. function itemMonitor(obj)
  99. {
  100. if(instrumentation)
  101. {
  102. gid('selection').innerHTML = '<br />Selection:<br />obj.id: ' + obj.id + '<br />index: ' + obj.index + '<br />selectFlag: ' + selectFlag;
  103. }
  104. if(obj.id == 'player1')
  105. {
  106. if(instrumentation)
  107. {
  108. gid('selection1').innerHTML = '<br />Selection1:<br />obj.id: ' + obj.id + '<br />index: ' + obj.index + '<br />selectFlag: ' + selectFlag;
  109. }
  110. selectFlag = false;
  111.  
  112. if(obj.index < playlist2Length)
  113. {
  114. player2.sendEvent('ITEM', obj.index);
  115. player2.sendEvent('STOP');
  116. }
  117. else
  118. {
  119. player3.sendEvent('ITEM', obj.index - playlist2Length);
  120. player3.sendEvent('STOP');
  121. }
  122. }
  123. else if(obj.id == 'player2')
  124. {
  125. if(instrumentation)
  126. {
  127. gid('selection2').innerHTML = '<br />Selection2:<br />obj.id: ' + obj.id + '<br />index: ' + obj.index + '<br />selectFlag: ' + selectFlag;
  128. }
  129. if(selectFlag)
  130. {
  131. player2.sendEvent('STOP');
  132. player1.sendEvent('ITEM', obj.index);
  133. }
  134. selectFlag = true;
  135. }
  136. else if(obj.id == 'player3')
  137. {
  138. if(instrumentation)
  139. {
  140. gid('selection3').innerHTML = '<br />Selection3:<br />obj.id: ' + obj.id + '<br />index: ' + obj.index + '<br />selectFlag: ' + selectFlag;
  141. }
  142. if(selectFlag)
  143. {
  144. player3.sendEvent('STOP');
  145. player1.sendEvent('ITEM', obj.index + playlist2Length);
  146. }
  147. selectFlag = true;
  148. }
  149. };
  150.  
  151.  
  152. function playlistMonitor(obj)
  153. {
  154. //alert('playlistMonitor');
  155. player1.sendEvent('ITEM', 11);
  156. if(instrumentation)
  157. {
  158. var listnodes = '<br />';
  159.  
  160. for(var j in obj.playlist)
  161. {
  162. listnodes += '<br />Track: ' + j + '<br />';
  163.  
  164. for(var k in obj.playlist[j])
  165. {
  166. listnodes += '<li>' + k + ': ' + obj.playlist[j][k] + '</li>';
  167. }
  168. }
  169. gid('listnodes').innerHTML = '<br />Playlist:' + listnodes;
  170. }
  171. };
  172.  
  173. function gid(name)
  174. {
  175. return document.getElementById(name);
  176. };
  177. </script>
  178.  
  179. <!--
  180. <script type="text/javascript">
  181. var changing = false;
  182. var dofunnyStuff = true; // cacheBuster for IE - true=enable false=disable
  183.  
  184.  
  185. //...this code goes in the itemMonitor(obj) function
  186. function itemMonitor(obj)
  187. {
  188. //...change the player item
  189. if(dofunnyStuff)
  190. {
  191. changing = true;
  192. funnyStuff(obj.index);
  193. }
  194. else
  195. {
  196. player1.sendEvent('ITEM', obj.index);
  197. }
  198. gid('item').innerHTML = 'Current Item: ' + currentItem + '<br />New Item : ' + newItem;
  199. };
  200.  
  201.  
  202. function funnyStuff(idx) // AKA cacheBuster
  203. {
  204. var playlist = player1.getPlaylist();
  205.  
  206. /*
  207. //...don't need it!
  208. //...determine the media type since the file extension won't be available
  209. var type;
  210. switch(playlist[idx].file.substring(playlist[idx].file.length - 3))
  211. {
  212. case 'flv': case 'mp4':
  213. type = 'video';
  214. break;
  215. case 'mp3':
  216. type = 'sound';
  217. break;
  218. default:
  219. type = 'undefined';
  220. }
  221. */
  222.  
  223. //...add random number to file
  224. playlist[idx].file = playlist[idx].file.replace(/\?.*/, '') + '?' + (Math.round(1000 * Math.random()));
  225.  
  226. //...don't need it!
  227. //...set a type
  228. //playlist[idx].type = type;
  229.  
  230. //...just for testing
  231. //playlist[idx].title = playlist[idx].title + 'a';
  232.  
  233. //...reload playlist
  234. player1.sendEvent('LOAD', playlist);
  235.  
  236. //...select item to play
  237. player1.sendEvent('ITEM', idx);
  238.  
  239. //...done changing playlist
  240. changing = false;
  241. //alert('Done changing playlist index: ' + idx + '\nFile: ' + player1.getPlaylist()[idx].file);
  242. };
  243. </script>
  244. -->
  245.  
  246. <script type="text/javascript">
  247. var playlist2 = encodeURIComponent('playlist_songs.xml');
  248. var playlist3 = encodeURIComponent('playlist_Ruby.xml');
  249.  
  250. var flashvars =
  251. {
  252. 'streamer': 'lighttpd',
  253. 'file': playlist2,
  254. 'playlist': 'none',
  255. 'stretching': 'exactfit',
  256. 'bufferlength': '2',
  257. 'volume': '70',
  258. 'repeat': 'list',
  259. 'shuffle': 'false',
  260. 'frontcolor': 'CCCCCC',
  261. 'backcolor': '333333',
  262. 'lightcolor': '8080FF',
  263. 'screencolor': '333333',
  264. 'id': 'player1',
  265. 'autostart': 'false'
  266. };
  267.  
  268. var params =
  269. {
  270. 'allowfullscreen': 'true',
  271. 'allowscriptaccess': 'always',
  272. 'bgcolor': '#FFFFFF'
  273. };
  274.  
  275. var attributes =
  276. {
  277. 'id': 'player1',
  278. 'name': 'player1'
  279. };
  280.  
  281. swfobject.embedSWF('player-4.4.162.swf', 'player1', '320', '280', '9.0.124', false, flashvars, params, attributes);
  282.  
  283. var attributes =
  284. {
  285. 'id': 'player2',
  286. 'name': 'player2'
  287. };
  288.  
  289. flashvars.file = playlist2;
  290. flashvars.controlbar = 'none';
  291. flashvars.playlist = 'bottom';
  292. flashvars.playlistsize = '460';
  293. flashvars.id = 'player2';
  294. flashvars['playlist.thumbs'] = 'false';
  295.  
  296. swfobject.embedSWF('player-4.4.162.swf', 'player2', '320', '460', '9.0.124', false, flashvars, params, attributes);
  297.  
  298. var attributes =
  299. {
  300. 'id': 'player3',
  301. 'name': 'player3'
  302. };
  303.  
  304. flashvars.file = playlist3;
  305. flashvars.playlistsize = '180';
  306. flashvars.id = 'player3';
  307. flashvars['playlist.thumbs'] = 'true';
  308.  
  309. swfobject.embedSWF('player-4.4.162.swf', 'player3', '320', '180', '9.0.124', false, flashvars, params, attributes);
  310. </script>
  311.  
  312. </head>
  313.  
  314. <body>
  315.  
  316. <div id="playercontainer1" class="playercontainer1"><a id="player1" class="player1" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Flash Player to see this Media Player.</a></div>
  317. <div id="playercontainer2" class="playercontainer2"><a id="player2" class="player2" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Flash Player to see this Media Player.</a></div>
  318. <div id="playercontainer3" class="playercontainer3"><a id="player3" class="player3" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Flash Player to see this Media Player.</a></div>
  319.  
  320. <!-- for testing -->
  321. <div id="players1" style="color:black;">
  322. </div>
  323. <div id="players2" style="color:black;">
  324. </div>
  325. <div id="playlists" style="color:black;">
  326. </div>
  327. <div id="selection" style="color:black;">
  328. </div>
  329. <div id="selection1" style="color:black;">
  330. </div>
  331. <div id="selection2" style="color:black;">
  332. </div>
  333. <div id="selection3" style="color:black;">
  334. </div>
  335. <div id="item" style="color:black;">
  336. </div>
  337. <div id="listnodes" style="color:black;">
  338. </div>
  339.  
  340. </body>
  341.  
  342. </html>

URL: http://www.longtailvideo.com/support/forum/Setup-Problems/16080/First-playlist-on-right-and-second-on-the-left-#msg109396

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.