Posted By

vagrantradio on 03/04/11


Tagged

video


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

maltem
chipper1522


jQuery videoGallery plugin for use with JW Player


 / Published in: jQuery
 

URL: http://www.longtailvideo.com/players/jw-flv-player/

This is a plugin for creating a dynamic video gallery. Call videos by rel tag, including title.

  1. //--------------------------------------------------------------------------------------------
  2. Style
  3. -------------------------------------------------------------------------------------------- //
  4. .holder {
  5. padding:20px 30px;
  6. margin:0 0 30px 0;
  7. clear:both;
  8. background:#ccc;
  9. border: 1px dotted #666;
  10. overflow:auto;
  11. }
  12. #video-holder {
  13. width:720px;
  14. height:445px;
  15. display:block;
  16. float:left;
  17. background: none repeat scroll 0 0 #111111;
  18. border-bottom: 1px solid #000000;
  19. margin: 0 auto 20px;
  20. }
  21. ul#links {
  22. float:right;
  23. margin:0;
  24. padding:0;
  25. height:450px;
  26. width:150px;
  27. overflow:auto;
  28. }
  29. #links li {
  30. list-style-type:none;
  31. padding:4px;
  32. cursor:pointer;
  33. }
  34.  
  35. //--------------------------------------------------------------------------------------------
  36. Markup
  37. -------------------------------------------------------------------------------------------- //
  38. <div class="holder">
  39. <h3 id="video-title"></h3>
  40. <div id="video-holder" rel="people_intro" title="Intro"></div>
  41.  
  42. <ul id="links">
  43. <li rel="people_intro" title="Intro">Intro</li>
  44. <li rel="a_wisnewski" title="Aaron Wisnewski">Aaron Wisnewski</li>
  45. <li rel="Bill_Bryan" title="Bill Bryan">Bill Bryan</li>
  46. <li rel="Boscobel" title="Boscobel">Boscobel</li>
  47. <li rel="Chad_Passon" title="Chad Passon">Chad Passon</li>
  48. <li rel="DeKalb" title="DeKalb">DeKalb</li>
  49. <li rel="Elgin" title="Elgin">Elgin</li>
  50. <li rel="Fremont" title="Fremont">Fremont</li>
  51. <li rel="Graham_Morgan" title="Graham Morgan">Graham Morgan</li>
  52. <li rel="Harrison" title="Harrison">Harrison</li>
  53. <li rel="Harrison_SOTY" title="Harrison">Harrison</li>
  54. <li rel="Holland_South" title="Holland South">Holland South</li>
  55. <li rel="Jerry_Higgins" title="Jerry Higgins">Jerry Higgins</li>
  56. <li rel="Kalkaska" title="Kalkaska">Kalkaska</li>
  57. <li rel="Lakeview" title="Lakeview">Lakeview</li>
  58. <li rel="Manistique" title="Manistique">Manistique</li>
  59. <li rel="New_London" title="New_London">New London</li>
  60. <li rel="Pontiac" title="Pontiac">Pontiac</li>
  61. <li rel="Remus" title="Remus">Remus</li>
  62. </ul>
  63. </div>
  64.  
  65. //--------------------------------------------------------------------------------------------
  66. Usage
  67. -------------------------------------------------------------------------------------------- //
  68. jQuery('li').videoGallery({w:720, h:450, dir:'path/to/video/'});
  69.  
  70. //--------------------------------------------------------------------------------------------
  71. Plugin
  72. -------------------------------------------------------------------------------------------- //
  73.  
  74. /*
  75.  * Copyright (c) 2011 Jason Pant (http://www.vagrantradio.com)
  76.  * This is licensed under GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
  77.  *
  78.  * This program is free software: you can redistribute it and/or modify
  79.  * it under the terms of the GNU General Public License as published by
  80.  * the Free Software Foundation, either version 3 of the License, or
  81.  * (at your option) any later version.
  82.  *
  83.  * This program is distributed in the hope that it will be useful,
  84.  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  85.  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  86.  * GNU General Public License for more details.
  87.  *
  88.  * For a copy of the GNU General Public License, see <http://www.gnu.org/licenses/>.
  89.  *
  90. */
  91.  
  92. (function($){
  93. $.fn.videoGallery = function(options){
  94.  
  95. var defaults = {
  96. w: 320,
  97. h: 240,
  98. dir: 'path/to/video/',
  99. holderDiv: '#video-holder',
  100. src: 'rel',
  101. showTitle: true,
  102. title: 'title',
  103. titleLoc: '#video-title'
  104. };
  105.  
  106. var options = $.extend(defaults, options);
  107.  
  108. var element = this;
  109.  
  110. return this.each(function(){
  111. src = $(options.holderDiv).attr(options.src);
  112. title = $(options.holderDiv).attr(options.title);
  113.  
  114. if (options.showTitle === true){
  115. $(options.titleLoc)
  116. .text(title);
  117. }
  118.  
  119. $(options.holderDiv)
  120. .html('<object width="'+options.w+'" height="'+options.h+'" id="single1" name="single1"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="player.swf" /><param name="flashvars" value="image=default.jpg&file='+src+'&skin=glow.zip&frontcolor=000000&lightcolor=000000&screencolor=000000&stretching=fill&&provider=rtmp&streamer=rtmp&#58;//your.streamer.com/'+options.dir+'"><embed src="player.swf" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" wmode="transparent" width="'+options.w+'" height="'+options.h+'" flashvars="image=default.jpg&file='+src+'&skin=glow.zip&frontcolor=000000&lightcolor=000000&screencolor=000000&stretching=fill&provider=rtmp&streamer=rtmp&#58;//your.streamer.com/'+options.dir+'" /></object>');
  121.  
  122.  
  123. $(this).
  124. click(
  125. function(){
  126. src = $(this).attr(options.src);
  127. title = $(this).attr(options.title);
  128.  
  129. $(options.holderDiv)
  130. .html('<object width="'+options.w+'" height="'+options.h+'" id="single1" name="single1"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="player.swf" /><param name="flashvars" value="image=default.jpg&file='+src+'&skin=glow.zip&frontcolor=000000&lightcolor=000000&screencolor=000000&stretching=fill&&provider=rtmp&streamer=rtmp&#58;//fms.autowares.com/'+options.dir+'"><embed src="player.swf" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" wmode="transparent" width="'+options.w+'" height="'+options.h+'" flashvars="image=default.jpg&file='+src+'&skin=glow.zip&frontcolor=000000&lightcolor=000000&screencolor=000000&stretching=fill&provider=rtmp&streamer=rtmp&#58;//your.streamer.com/'+options.dir+'" /></object>');
  131.  
  132. if (options.showTitle === true){
  133. $(options.titleLoc)
  134. .text(title);
  135. }
  136. }
  137. )
  138. }); // end this.each
  139.  
  140. }; // end fn.videoGallery
  141.  
  142. })(jQuery);

Report this snippet  

You need to login to post a comment.