1 uc = uc || {}; |
|
2 uc.player = uc.player || {}; |
|
3 uc.player.classIdExpr = /media-(\S+)-(\S+)/; |
|
4 uc.player.jsLoaded = false; |
|
5 uc.player.skins = { |
|
6 universcine: { |
|
7 // display properties such as size, location and opacity |
|
8 bottom: 0, |
|
9 height: 24, |
|
10 |
|
11 // progress bar |
|
12 progressColor: '#990000', |
|
13 bufferColor: '#333333', |
|
14 SliderColor: '#333333', |
|
15 |
|
16 // buttons |
|
17 buttonColor: '#990000', |
|
18 buttonColorOver: '#999999', |
|
19 |
|
20 // styling properties (will be applied to all plugins) |
|
21 backgroundColor: '#000000', |
|
22 backgroundGradient: 'none', |
|
23 opacity: 0.8, |
|
24 |
|
25 // controlbar specific settings |
|
26 autoHide: true, |
|
27 all: false, |
|
28 play: true, |
|
29 scrubber: true, |
|
30 mute: true, |
|
31 volume: true, |
|
32 fullscreen: true, |
|
33 |
|
34 // a little more styling |
|
35 width: '99%', |
|
36 bottom: 2, |
|
37 left: '50%', |
|
38 borderRadius: 5 |
|
39 } |
|
40 } |
|
41 |
|
42 uc.player.conf = { |
|
43 video: { |
|
44 clip: { |
|
45 autoPlay: true, |
|
46 autoBuffering: true, |
|
47 scaling: 'fit' |
|
48 }, |
|
49 plugins: { |
|
50 controls: uc.player.skins.universcine |
|
51 } |
|
52 }, |
|
53 |
|
54 slideshow: { |
|
55 clip: { |
|
56 autoPlay: true, |
|
57 autoBuffering: false, |
|
58 scaling: 'fit' |
|
59 }, |
|
60 plugins: { |
|
61 controls: null |
|
62 }, |
|
63 play: { |
|
64 opacity:0 |
|
65 } |
|
66 } |
|
67 } |
|
68 |
|
69 uc.player.currentPlayer = null; |
|
70 |
|
71 uc.player.loadJS = function(callback) { |
|
72 // Preload flowplayer |
|
73 jQuery.getScript('/js/flowplayer/flowplayer-3.1.0.min.js', function () { |
|
74 jQuery.getScript('/js/flowplayer/flowplayer.playlist-3.0.5.min.js', function () { |
|
75 uc.player.jsLoaded = true; |
|
76 callback(); |
|
77 }); |
|
78 }); |
|
79 } |
|
80 |
|
81 uc.player.mediaPlayer = function(node) { |
|
82 this.jq_playlist = jQuery(node); |
|
83 |
|
84 // Extract playlist id |
|
85 var matches = this.jq_playlist.attr('id').match(uc.player.classIdExpr); |
|
86 this.playlist_id = matches[2]; |
|
87 |
|
88 // Get default playlist |
|
89 this.default_playlist = 'image'; |
|
90 |
|
91 if (jQuery('.video-playlist.default-playlist', this.jq_playlist).length == 1) this.default_playlist = 'video'; |
|
92 |
|
93 // Extract video playlist |
|
94 this.video_playlist = []; |
|
95 var self = this; |
|
96 jQuery('.video-playlist .media-item', this.jq_playlist).each(function(index) { |
|
97 var jq_this = jQuery(this); |
|
98 |
|
99 // Extract media info |
|
100 var media_item = {uri: null, thumb_uri: null}; |
|
101 var jq_uri = jQuery('.media-uri', jq_this); |
|
102 media_item.uri = jq_uri.attr('href'); |
|
103 var jq_thumb_uri = jQuery('.media-thumb-uri', jq_this); |
|
104 if (jq_thumb_uri.length == 1) media_item.thumb_uri = jq_thumb_uri.attr('href'); |
|
105 self.video_playlist[index] = media_item; |
|
106 |
|
107 // Wrap media click |
|
108 jq_uri.attr('href', 'javascript:void(0)'); |
|
109 jq_uri.click(function () { |
|
110 self.playVideo(index); |
|
111 }); |
|
112 }); |
|
113 |
|
114 // Extract image playlist |
|
115 this.image_playlist = []; |
|
116 var self = this; |
|
117 jQuery('.image-playlist .media-item', this.jq_playlist).each(function(index) { |
|
118 var jq_this = jQuery(this); |
|
119 |
|
120 // Extract media info |
|
121 var media_item = {uri: null}; |
|
122 var jq_uri = jQuery('.media-uri', jq_this); |
|
123 media_item.uri = jq_uri.attr('href'); |
|
124 self.image_playlist[index] = media_item; |
|
125 |
|
126 // Wrap media click |
|
127 jq_uri.attr('href', 'javascript:void(0)'); |
|
128 jq_uri.click(function () { |
|
129 self.playSlideShow(index); |
|
130 }); |
|
131 }); |
|
132 |
|
133 // Search the place to include the media player |
|
134 this.jq_player_wrapper = jQuery('<div class="media-player-wrapper" id="media-player-wrapper-' + this.playlist_id + '"> </div>'); |
|
135 jq_place = jQuery('.media-player-after', this.jq_playlist); |
|
136 |
|
137 if (jq_place.length == 1) { |
|
138 jq_place.after(this.jq_player_wrapper); |
|
139 } else { |
|
140 jq_place = jQuery('.media-player-before', this.jq_playlist); |
|
141 jq_place.before(this.jq_player_wrapper); |
|
142 } |
|
143 |
|
144 this.showPlayer(); |
|
145 } |
|
146 |
|
147 uc.player.mediaPlayer.prototype = { |
|
148 removePlayer: function() { |
|
149 jQuery('.media-player', this.jq_player_wrapper).unload(); |
|
150 jQuery('*', this.jq_player_wrapper).remove(); |
|
151 }, |
|
152 stopPlayer: function() { |
|
153 this.removePlayer(); |
|
154 this.showPlayer(); |
|
155 }, |
|
156 showPlayer: function() { |
|
157 var jq_play_button = jQuery('<a class="play-button">Play</a>'); |
|
158 var self = this; |
|
159 this.jq_player_wrapper.append(jq_play_button); |
|
160 |
|
161 // Get default media |
|
162 var default_media = null; |
|
163 |
|
164 if (this.default_playlist == 'video') { |
|
165 default_media = this.video_playlist[0]; |
|
166 jq_play_button.click(function() {self.playVideo(0)}); |
|
167 } else { |
|
168 default_media = this.image_playlist[0]; |
|
169 default_media.thumb_uri = default_media.uri; |
|
170 jq_play_button.click(function() {self.playSlideShow(0)}); |
|
171 } |
|
172 |
|
173 if (default_media.thumb_uri) { |
|
174 // Add background to player |
|
175 this.jq_player_wrapper.css('background-image', 'url(' + default_media.thumb_uri + ')'); |
|
176 this.jq_player_wrapper.css('background-repeat', 'no-repeat'); |
|
177 this.jq_player_wrapper.css('background-position', '50% 0%'); |
|
178 } |
|
179 }, |
|
180 createPlayer: function(media, conf) { |
|
181 // Stop current player |
|
182 var current_player = uc.player.currentPlayer; |
|
183 if (current_player && current_player.playlist_id != this.playlist_id) current_player.stopPlayer(); |
|
184 |
|
185 |
|
186 // Create new player |
|
187 this.removePlayer(); |
|
188 uc.player.currentPlayer = this; |
|
189 this.jq_player_wrapper.append('<a id="media-player-' + this.playlist_id + '" class="media-player" href="' + media.uri + '"/>'); |
|
190 return flowplayer('media-player-' + this.playlist_id, {src: '/swf/flowplayer-3.1.0.swf', wmode: 'opaque'}, conf); |
|
191 }, |
|
192 playVideo: function(index) { |
|
193 var media = this.video_playlist[index]; |
|
194 var conf = uc.player.conf.video; |
|
195 conf.playlist = []; |
|
196 conf.playlist.push({url: media.uri}); |
|
197 this.createPlayer(media, conf); |
|
198 }, |
|
199 |
|
200 playSlideShow: function(index) { |
|
201 var conf = uc.player.conf.slideshow; |
|
202 var duration = 5; |
|
203 conf.playlist = []; |
|
204 |
|
205 for (var i=index; i<this.image_playlist.length; i++) { |
|
206 conf.playlist.push({url: this.image_playlist[i].uri, duration: duration, scaling: true}); |
|
207 } |
|
208 |
|
209 for (var i=0; i<index; i++) { |
|
210 conf.playlist.push({url: this.image_playlist[i].uri, duration: duration, scaling: true}); |
|
211 } |
|
212 |
|
213 // Add loop features if there are more than one items |
|
214 if (conf.playlist.length > 1) { |
|
215 conf.playlist[conf.playlist.length - 1].onBeforeFinish = function () {return false;} |
|
216 } |
|
217 |
|
218 var media = this.image_playlist[index]; |
|
219 this.createPlayer(media, conf); |
|
220 } |
|
221 } |
|
222 |
|
223 uc.player.initPlayer = function(selector) { |
|
224 jQuery(selector).each(function($index) { |
|
225 var player = new uc.player.mediaPlayer(this); |
|
226 }); |
|
227 } |
|
228 |
|
229 uc.player.build = function (selector) { |
|
230 if (!uc.player.jsLoaded && jQuery(selector).length > 0) { |
|
231 uc.player.loadJS(function() {uc.player.initPlayer(selector);}); |
|
232 } else { |
|
233 uc.player.initPlayer(selector); |
|
234 } |
|
235 } |
|