Changeset 950
- Timestamp:
- 04/26/10 00:22:37 (3 years ago)
- Location:
- trunk/html5
- Files:
-
- 11 edited
-
index.html (modified) (5 diffs)
-
jquery.jwplayer.js (modified) (61 diffs)
-
src/jquery.jwplayerControlbar.js (modified) (14 diffs)
-
src/jquery.jwplayerController.js (modified) (11 diffs)
-
src/jquery.jwplayerCore.js (modified) (3 diffs)
-
src/jquery.jwplayerMediaFlash.js (modified) (9 diffs)
-
src/jquery.jwplayerMediaVideo.js (modified) (12 diffs)
-
src/jquery.jwplayerModel.js (modified) (1 diff)
-
src/jquery.jwplayerParse.js (modified) (2 diffs)
-
src/jquery.jwplayerSkinner.js (modified) (7 diffs)
-
src/jquery.jwplayerView.js (modified) (2 diffs)
Legend:
- Unmodified
- Added
- Removed
-
trunk/html5/index.html
r944 r950 26 26 id="player1" 27 27 class="jwplayer" 28 poster="http://localhost/ files/bunny.jpg"29 src="http:// developer.longtailvideo.com/player/testing/files/bunny.mp4"28 poster="http://localhost/html5/test/files/bunny.jpg" 29 src="http://localhost/html5/test/files/bunny.mp4" 30 30 width="480" 31 31 > … … 36 36 height="270" 37 37 id="player2" 38 poster="http://localhost/ files/bunny.jpg"39 src="http://localhost/ files/bunny.mp4"38 poster="http://localhost/html5/test/files/bunny.jpg" 39 src="http://localhost/html5/test/files/bunny.mp4" 40 40 width="480" 41 41 > … … 54 54 width="480" 55 55 height="270" 56 poster="http://localhost/ files/bunny.jpg"56 poster="http://localhost/html5/test/files/bunny.jpg" 57 57 > 58 <source src='http://localhost/ files/bunny.ogv' type='video/ogg; codecs="theora, vorbis"'>58 <source src='http://localhost/html5/test/files/bunny.ogv' type='video/ogg; codecs="theora, vorbis"'> 59 59 </video> 60 60 … … 66 66 width="480" 67 67 height="270" 68 poster="http://localhost/ files/bunny.jpg"68 poster="http://localhost/html5/test/files/bunny.jpg" 69 69 > 70 <source src='http://localhost/ files/bunny.ogv' type='video/ogg; codecs="theora, vorbis"'>71 <source src='http://localhost/ files/bunny.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>70 <source src='http://localhost/html5/test/files/bunny.ogv' type='video/ogg; codecs="theora, vorbis"'> 71 <source src='http://localhost/html5/test/files/bunny.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 72 72 </video> 73 73 … … 78 78 width="480" 79 79 height="270" 80 poster="http://localhost/ files/bunny.jpg"80 poster="http://localhost/html5/test/files/bunny.jpg" 81 81 > 82 <source src='http:// developer.longtailvideo.com/player/testing/files/bunny.ogv' type='video/ogg; codecs="theora, vorbis"'>83 <source src='http:// developer.longtailvideo.com/player/testing/files/bunny.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>82 <source src='http://localhost/html5/test/files/bunny.ogv' type='video/ogg; codecs="theora, vorbis"'> 83 <source src='http://localhost/html5/test/files/bunny.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 84 84 </video> 85 85 -
trunk/html5/jquery.jwplayer.js
r949 r950 11 11 12 12 /** Hooking the jwplayerControlbar up to jQuery. **/ 13 $.fn.jwplayerControlbar = function(ops) { 14 return this.each(function() { 15 var id = $(this)[0].id; 16 var div = $('#' + id).parents()[0].id; 17 //$($('#' + id).parents()[0]).append('<div id="' + div + '">'); 18 var player = document.getElementById(id); 19 var options = $.extend({}, $.fn.jwplayerControlbar.defaults, ops); 20 $.extend(options, $('#' + id).data("model")); 21 // Add positioning options and change the player css, so we can full-browser-screen it. 22 $.extend(options, { 23 id: id, 24 div: div, 25 left: 0, 26 top: 0 27 }); 28 // Save the variables globally and start loading the skin. 29 config = { 30 player: player, 31 options: options, 32 images: $(player).data("skin").controlbar.elements 33 }; 34 $.fn.jwplayerControlbar.bars[id] = config; 35 buildElements(config); 36 buildHandlers(config); 37 }); 38 }; 39 40 41 /** Map with all jwplayerControlbars. **/ 42 $.fn.jwplayerControlbar.bars = {}; 43 44 13 $.fn.jwplayerControlbar = function(player) { 14 player.controlbar = $.extend({}, $.fn.jwplayerControlbar.defaults, player.controlbar); 15 buildElements(player); 16 buildHandlers(player); 17 }; 18 19 45 20 /** Map with config for the jwplayerControlbar plugin. **/ 46 21 $.fn.jwplayerControlbar.defaults = { 47 buffer: 0,48 div: 'container',49 duration: 0,50 elapsed: 0,51 22 fontsize: 10, 52 23 fontcolor: '000000', 53 fullscreen: false,54 id: 'player',55 images: 0,56 24 position: 'bottom', 57 skin: 'assets/five/five.xml',58 width: 400,59 height: 300,60 left: 0,61 25 leftmargin: 0, 62 top: 0,63 26 rightmargin: 0, 64 scrubber: 'none', 65 state: 'idle', 66 volume: 100 27 scrubber: 'none' 67 28 }; 68 29 69 30 70 31 /** Callbacks called by Flash players to update stats. **/ 71 $.fn.jwplayerControlbar.bufferHandler = function( event, obj) {32 $.fn.jwplayerControlbar.bufferHandler = function(obj) { 72 33 bufferHandler({ 73 34 id: obj.id, … … 75 36 }); 76 37 }; 77 $.fn.jwplayerControlbar.muteHandler = function(event, obj) { 38 39 $.fn.jwplayerControlbar.muteHandler = function(obj) { 78 40 muteHandler({ 79 41 id: obj.id, … … 81 43 }); 82 44 }; 83 $.fn.jwplayerControlbar.stateHandler = function(event, obj) { 45 46 $.fn.jwplayerControlbar.stateHandler = function(obj) { 84 47 stateHandler({ 85 48 id: obj.id, … … 87 50 }); 88 51 }; 89 $.fn.jwplayerControlbar.timeHandler = function(event, obj) { 52 53 $.fn.jwplayerControlbar.timeHandler = function(obj) { 90 54 timeHandler({ 91 55 id: obj.id, 92 elapsed: obj.position,56 position: obj.position, 93 57 duration: obj.duration 94 58 }); 95 59 }; 60 96 61 $.fn.jwplayerControlbar.volumeHandler = function(obj) { 97 62 volumeHandler({ … … 103 68 104 69 /** Draw the jwplayerControlbar elements. **/ 105 function buildElements( config) {70 function buildElements(player) { 106 71 // Draw the background. 107 $('#' + config.options.div).append('<div id="' + config.options.id + '_jwplayerControlbar"></div>');108 $( '#' + config.options.id + '_jwplayerControlbar').css('position', 'relative');109 $( '#' + config.options.id + '_jwplayerControlbar').css('height', config.images.background.height);110 $( '#' + config.options.id + '_jwplayerControlbar').css('background', 'url(' + config.images.background.src + ') repeat-x center left');72 player.model.domelement.parents(":first").append('<div id="' +player.id + '_jwplayerControlbar"></div>'); 73 $("#"+player.id + '_jwplayerControlbar').css('position', 'relative'); 74 $("#"+player.id + '_jwplayerControlbar').css('height', player.skin.controlbar.elements.background.height); 75 $("#"+player.id + '_jwplayerControlbar').css('background', 'url(' + player.skin.controlbar.elements.background.src + ') repeat-x center left'); 111 76 // Draw all elements on top of the bar. 112 buildElement('capLeft', 'left', true, config);113 buildElement('playButton', 'left', false, config);114 buildElement('pauseButton', 'left', true, config);115 buildElement('divider1', 'left', true, config);116 buildElement('elapsedText', 'left', true, config);117 buildElement('timeSliderRail', 'left', false, config);118 buildElement('timeSliderBuffer', 'left', false, config);119 buildElement('timeSliderProgress', 'left', false, config);120 buildElement('timeSliderThumb', 'left', false, config);121 buildElement('capRight', 'right', true, config);122 buildElement('fullscreenButton', 'right', false, config);123 buildElement('normalscreenButton', 'right', true, config);124 buildElement('divider2', 'right', true, config);125 buildElement('volumeSliderRail', 'right', false, config);126 buildElement('volumeSliderProgress', 'right', true, config);127 buildElement('muteButton', 'right', false, config);128 buildElement('unmuteButton', 'right', true, config);129 buildElement('divider3', 'right', true, config);130 buildElement('durationText', 'right', true, config);77 buildElement('capLeft', 'left', true, player); 78 buildElement('playButton', 'left', false, player); 79 buildElement('pauseButton', 'left', true, player); 80 buildElement('divider1', 'left', true, player); 81 buildElement('elapsedText', 'left', true, player); 82 buildElement('timeSliderRail', 'left', false, player); 83 buildElement('timeSliderBuffer', 'left', false, player); 84 buildElement('timeSliderProgress', 'left', false, player); 85 buildElement('timeSliderThumb', 'left', false, player); 86 buildElement('capRight', 'right', true, player); 87 buildElement('fullscreenButton', 'right', false, player); 88 buildElement('normalscreenButton', 'right', true, player); 89 buildElement('divider2', 'right', true, player); 90 buildElement('volumeSliderRail', 'right', false, player); 91 buildElement('volumeSliderProgress', 'right', true, player); 92 buildElement('muteButton', 'right', false, player); 93 buildElement('unmuteButton', 'right', true, player); 94 buildElement('divider3', 'right', true, player); 95 buildElement('durationText', 'right', true, player); 131 96 } 132 97 133 98 134 99 /** Draw a single element into the jwplayerControlbar. **/ 135 function buildElement(element, align, offset, config) {136 var nam = config.options.id + '_' + element;137 $('#' + config.options.id + '_jwplayerControlbar').append('<div id="' + nam + '"></div>');100 function buildElement(element, align, offset, player) { 101 var nam =player.id + '_' + element; 102 $('#' +player.id + '_jwplayerControlbar').append('<div id="' + nam + '"></div>'); 138 103 $('#' + nam).css('position', 'absolute'); 139 104 $('#' + nam).css('top', 0); 140 105 if (element.indexOf('Text') > 0) { 141 106 $('#' + nam).html('00:00'); 142 $('#' + nam).css('font', config.options.fontsize + 'px/' + (config.images.background.height + 1) + 'px Arial,sans-serif');107 $('#' + nam).css('font', player.controlbar.fontsize + 'px/' + (player.skin.controlbar.elements.background.height + 1) + 'px Arial,sans-serif'); 143 108 $('#' + nam).css('text-align', 'center'); 144 109 $('#' + nam).css('font-weight', 'bold'); 145 110 $('#' + nam).css('cursor', 'default'); 146 var wid = 14 + 3 * config.options.fontsize;147 $('#' + nam).css('color', '#' + config.options.fontcolor.substr(-6));111 var wid = 14 + 3 * player.controlbar.fontsize; 112 $('#' + nam).css('color', '#' + player.controlbar.fontcolor.substr(-6)); 148 113 } else if (element.indexOf('divider') === 0) { 149 $('#' + nam).css('background', 'url(' + config.images.divider.src + ') repeat-x center left');150 var wid = config.images.divider.width;114 $('#' + nam).css('background', 'url(' + player.skin.controlbar.elements.divider.src + ') repeat-x center left'); 115 var wid = player.skin.controlbar.elements.divider.width; 151 116 } else { 152 $('#' + nam).css('background', 'url(' + config.images[element].src + ') repeat-x center left');153 var wid = config.images[element].width;117 $('#' + nam).css('background', 'url(' + player.skin.controlbar.elements[element].src + ') repeat-x center left'); 118 var wid = player.skin.controlbar.elements[element].width; 154 119 } 155 120 if (align == 'left') { 156 $('#' + nam).css(align, config.options.leftmargin);121 $('#' + nam).css(align, player.controlbar.leftmargin); 157 122 if (offset) { 158 config.options.leftmargin += wid;123 player.controlbar.leftmargin += wid; 159 124 } 160 125 } else if (align == 'right') { 161 $('#' + nam).css(align, config.options.rightmargin);126 $('#' + nam).css(align, player.controlbar.rightmargin); 162 127 if (offset) { 163 config.options.rightmargin += wid;128 player.controlbar.rightmargin += wid; 164 129 } 165 130 } 166 131 $('#' + nam).css('width', wid); 167 $('#' + nam).css('height', config.images.background.height);132 $('#' + nam).css('height', player.skin.controlbar.elements.background.height); 168 133 } 169 134 170 135 171 136 /** Add interactivity to the jwplayerControlbar elements. **/ 172 function buildHandlers( config) {137 function buildHandlers(player) { 173 138 // Register events with the buttons. 174 buildHandler('playButton', 'play', config.player, config.options);175 buildHandler('pauseButton', 'pause', config.player, config.options);176 buildHandler('muteButton', 'mute', config.player, config.options);177 buildHandler('unmuteButton', 'mute', config.player, config.options);178 buildHandler('fullscreenButton', 'fullscreen', config.player, config.options);179 buildHandler('normalscreenButton', 'fullscreen', config.player, config.options);180 /*181 addSliders(options);182 */ 139 buildHandler('playButton', 'play', player); 140 buildHandler('pauseButton', 'pause', player); 141 buildHandler('muteButton', 'mute', player); 142 buildHandler('unmuteButton', 'mute', player); 143 buildHandler('fullscreenButton', 'fullscreen', player); 144 buildHandler('normalscreenButton', 'fullscreen', player); 145 146 addSliders(player); 147 183 148 // Register events with the player. 184 $.jwplayer("#" + config.player.id).buffer($.fn.jwplayerControlbar.bufferHandler);185 $.jwplayer("#" + config.player.id).state($.fn.jwplayerControlbar.stateHandler);186 $.jwplayer("#" + config.player.id).time($.fn.jwplayerControlbar.timeHandler);187 $.jwplayer("#" + config.player.id).mute($.fn.jwplayerControlbar.muteHandler);188 $.jwplayer("#" + config.player.id).volume($.fn.jwplayerControlbar.volumeHandler);149 player.buffer($.fn.jwplayerControlbar.bufferHandler); 150 player.state($.fn.jwplayerControlbar.stateHandler); 151 player.time($.fn.jwplayerControlbar.timeHandler); 152 player.mute($.fn.jwplayerControlbar.muteHandler); 153 player.volume($.fn.jwplayerControlbar.volumeHandler); 189 154 // Trigger a few events so the bar looks good on startup. 190 fullscreenHandler( config.options);191 muteHandler( config.options);192 stateHandler( config.options);193 volumeHandler( config.options);155 fullscreenHandler(player); 156 muteHandler(player); 157 stateHandler(player); 158 volumeHandler(player); 194 159 } 195 160 196 161 197 162 /** Set a single button handler. **/ 198 function buildHandler(element, handler, player , options) {199 var nam = options.id + '_' + element;163 function buildHandler(element, handler, player) { 164 var nam = player.id + '_' + element; 200 165 $('#' + nam).css('cursor', 'pointer'); 201 166 if (handler == 'fullscreen') { 202 167 $('#' + nam).mouseup(function(evt) { 203 168 evt.stopPropagation(); 204 options.fullscreen = !options.fullscreen;205 fullscreenHandler( options);169 player.fullscreen() = !player.fullscreen(); 170 fullscreenHandler(player); 206 171 }); 207 172 } else { … … 215 180 216 181 /** Set the volume drag handler. **/ 217 function addSliders( ) {218 var bar = '#' + config.id + '_jwplayerControlbar';219 var trl = '#' + config.id + '_timeSliderRail';220 var vrl = '#' + config.id + '_volumeSliderRail';182 function addSliders(player) { 183 var bar = '#' +player.id + '_jwplayerControlbar'; 184 var trl = '#' +player.id + '_timeSliderRail'; 185 var vrl = '#' +player.id + '_volumeSliderRail'; 221 186 $(bar).css('cursor', 'hand'); 222 187 $(bar).mousedown(function(evt) { 223 188 var xps = evt.pageX - $(bar).position().left; 224 189 if (xps > $(trl).position().left && xps < $(trl).position().left + $(trl).width()) { 225 config.scrubber = 'time';190 player.controlbar.scrubber = 'time'; 226 191 } else if (xps > $(vrl).position().left && xps < $(vrl).position().left + $(vrl).width()) { 227 config.scrubber = 'volume';192 player.controlbar.scrubber = 'volume'; 228 193 } 229 194 }); 230 195 $(bar).mouseup(function(evt) { 231 196 evt.stopPropagation(); 232 sliderUp(evt.pageX );197 sliderUp(evt.pageX, player); 233 198 }); 234 199 $(bar).mouseleave(function(evt) { 235 sliderUp(evt.pageX );200 sliderUp(evt.pageX, player); 236 201 evt.stopPropagation(); 237 202 }); 238 203 $(bar).mousemove(function(evt) { 239 if ( config.scrubber == 'time') {204 if (player.controlbar.scrubber == 'time') { 240 205 var xps = evt.pageX - $(bar).position().left; 241 $('#' + config.id + '_timeSliderThumb').css('left', xps);206 $('#' +player.id + '_timeSliderThumb').css('left', xps); 242 207 } 243 208 }); … … 246 211 247 212 /** The slider has been moved up. **/ 248 function sliderUp(msx ) {249 if ( config.scrubber == 'time') {250 var xps = msx - $('#' + config.id + '_timeSliderRail').position().left;251 var wid = $('#' + config.id + '_timeSliderRail').width();252 var pos = xps / wid * config.duration;213 function sliderUp(msx, player) { 214 if (player.controlbar.scrubber == 'time') { 215 var xps = msx - $('#' +player.id + '_timeSliderRail').position().left; 216 var wid = $('#' +player.id + '_timeSliderRail').width(); 217 var pos = xps / wid * player.duration(); 253 218 if (pos < 0) { 254 219 pos = 0; 255 } else if (pos > config.duration) {256 pos = config.duration - 3;220 } else if (pos > player.controlbar.duration) { 221 pos = player.controlbar.duration - 3; 257 222 } 258 223 player.seek(pos); 259 } else if ( config.scrubber == 'volume') {260 var bar = $('#' + config.id + '_jwplayerControlbar').width();261 var brx = $('#' + config.id + '_jwplayerControlbar').position().left;262 var rig = $('#' + config.id + '_volumeSliderRail').css('right').substr(0, 2);263 var wid = config.images.volumeSliderRail.width;224 } else if (player.controlbar.scrubber == 'volume') { 225 var bar = $('#' +player.id + '_jwplayerControlbar').width(); 226 var brx = $('#' +player.id + '_jwplayerControlbar').position().left; 227 var rig = $('#' +player.id + '_volumeSliderRail').css('right').substr(0, 2); 228 var wid = player.skin.controlbar.elements.volumeSliderRail.width; 264 229 var pct = Math.round((msx - bar - brx + 1 * rig + wid) / wid * 100); 265 230 if (pct < 0) { … … 270 235 player.volume(pct); 271 236 } 272 config.scrubber = 'none'; 273 } 274 275 237 player.controlbar.scrubber = 'none'; 238 } 276 239 277 240 278 241 /** Update the buffer percentage. **/ 279 function bufferHandler(options) { 280 if (options.bufferPercent === 0) { 281 $('#' + options.id + '_timeSliderBuffer').css('display', 'none'); 242 function bufferHandler(event) { 243 var player = $.jwplayer(event.id); 244 if (event.bufferPercent === 0) { 245 $('#' +player.id + '_timeSliderBuffer').css('display', 'none'); 282 246 } else { 283 $('#' + options.id + '_timeSliderBuffer').css('display', 'block');284 var wid = $('#' + options.id + '_timeSliderRail').width();285 $('#' + options.id + '_timeSliderBuffer').css('width', Math.round(wid * options.bufferPercent / 100));247 $('#' +player.id + '_timeSliderBuffer').css('display', 'block'); 248 var wid = $('#' +player.id + '_timeSliderRail').width(); 249 $('#' +player.id + '_timeSliderBuffer').css('width', Math.round(wid * event.bufferPercent / 100)); 286 250 } 287 251 } … … 289 253 290 254 /** Update the mute state. **/ 291 function muteHandler(options) { 292 if (options.mute) { 293 $('#' + options.id + '_muteButton').css('display', 'none'); 294 $('#' + options.id + '_unmuteButton').css('display', 'block'); 295 $('#' + options.id + '_volumeSliderProgress').css('display', 'none'); 255 function muteHandler(event) { 256 var player = $.jwplayer(event.id); 257 if (event.mute) { 258 $('#' +player.id + '_muteButton').css('display', 'none'); 259 $('#' +player.id + '_unmuteButton').css('display', 'block'); 260 $('#' +player.id + '_volumeSliderProgress').css('display', 'none'); 296 261 } else { 297 $('#' + options.id + '_muteButton').css('display', 'block');298 $('#' + options.id + '_unmuteButton').css('display', 'none');299 $('#' + options.id + '_volumeSliderProgress').css('display', 'block');262 $('#' +player.id + '_muteButton').css('display', 'block'); 263 $('#' +player.id + '_unmuteButton').css('display', 'none'); 264 $('#' +player.id + '_volumeSliderProgress').css('display', 'block'); 300 265 } 301 266 } … … 303 268 304 269 /** Update the playback state. **/ 305 function stateHandler(options) { 306 if (options.state == 'buffering' || options.state == 'playing') { 307 $('#' + options.id + '_pauseButton').css('display', 'block'); 308 $('#' + options.id + '_playButton').css('display', 'none'); 270 function stateHandler(event) { 271 var player = $.jwplayer(event.id); 272 if (event.state == $.fn.jwplayer.states.BUFFERING || player.state() == $.fn.jwplayer.states.PLAYING) { 273 $('#' +player.id + '_pauseButton').css('display', 'block'); 274 $('#' +player.id + '_playButton').css('display', 'none'); 309 275 } else { 310 $('#' + options.id + '_pauseButton').css('display', 'none'); 311 $('#' + options.id + '_playButton').css('display', 'block'); 312 } 313 if (options.state == 'idle') { 314 options.elapsed = 0; 315 timeHandler(options); 276 $('#' +player.id + '_pauseButton').css('display', 'none'); 277 $('#' +player.id + '_playButton').css('display', 'block'); 278 } 279 if (player.state() == $.fn.jwplayer.states.IDLE) { 280 timeHandler({ 281 id: player.id, 282 position: 0 283 }); 316 284 } 317 285 } … … 319 287 320 288 /** Update the playback time. **/ 321 function timeHandler(options) { 322 var wid = $('#' + options.id + '_timeSliderRail').width(); 323 var thb = $('#' + options.id + '_timeSliderThumb').width(); 324 var lft = $('#' + options.id + '_timeSliderRail').position().left; 325 if (options.elapsed === 0) { 326 $('#' + options.id + '_timeSliderProgress').css('display', 'none'); 327 $('#' + options.id + '_timeSliderThumb').css('display', 'none'); 289 function timeHandler(event) { 290 var player = $.jwplayer(event.id); 291 var wid = $('#' +player.id + '_timeSliderRail').width(); 292 var thb = $('#' +player.id + '_timeSliderThumb').width(); 293 var lft = $('#' +player.id + '_timeSliderRail').position().left; 294 if (event.position === 0) { 295 $('#' +player.id + '_timeSliderProgress').css('display', 'none'); 296 $('#' +player.id + '_timeSliderThumb').css('display', 'none'); 328 297 } else { 329 $('#' + options.id + '_timeSliderProgress').css('display', 'block');330 $('#' + options.id + '_timeSliderProgress').css('width', Math.round(wid * options.elapsed / options.duration));331 $('#' + options.id + '_timeSliderThumb').css('display', 'block');332 $('#' + options.id + '_timeSliderThumb').css('left', lft +333 Math.round((wid - thb) * options.elapsed / options.duration));334 $('#' + options.id + '_durationText').html(timeFormat(options.duration));335 } 336 $('#' + options.id + '_elapsedText').html(timeFormat(options.elapsed));298 $('#' +player.id + '_timeSliderProgress').css('display', 'block'); 299 $('#' +player.id + '_timeSliderProgress').css('width', Math.round(wid * event.position / event.duration)); 300 $('#' +player.id + '_timeSliderThumb').css('display', 'block'); 301 $('#' +player.id + '_timeSliderThumb').css('left', lft + 302 Math.round((wid - thb) * event.position / event.duration)); 303 $('#' +player.id + '_durationText').html(timeFormat(event.duration)); 304 } 305 $('#' +player.id + '_elapsedText').html(timeFormat(event.position)); 337 306 } 338 307 … … 350 319 351 320 /** Flip the player size to/from full-browser-screen. **/ 352 function fullscreenHandler(options) { 353 if (options.fullscreen) { 321 function fullscreenHandler(event) { 322 var player = $.jwplayer(event.id); 323 if (event.fullscreen) { 354 324 //$('#' + options.div).css('position', 'absolute'); 355 325 //$('#' + options.div).css('left', 0); … … 357 327 //$('#' + options.div).css('height', '100%'); 358 328 //$('#' + options.div).css('width', '100%'); 359 $('#' + options.id + '_normalscreenButton').css('display', 'block');360 $('#' + options.id + '_fullscreenButton').css('display', 'none');329 $('#' +player.id + '_normalscreenButton').css('display', 'block'); 330 $('#' +player.id + '_fullscreenButton').css('display', 'none'); 361 331 $(window).resize(function() { 362 resizeBar( options);332 resizeBar(player); 363 333 }); 364 334 } else { … … 368 338 //$('#' + options.div).css('height', options.height); 369 339 //$('#' + options.div).css('width', options.width); 370 $('#' + options.id + '_normalscreenButton').css('display', 'none');371 $('#' + options.id + '_fullscreenButton').css('display', 'block');340 $('#' +player.id + '_normalscreenButton').css('display', 'none'); 341 $('#' +player.id + '_fullscreenButton').css('display', 'block'); 372 342 $(window).resize(null); 373 343 } 374 resizeBar( options);375 timeHandler( options);376 bufferHandler( options);344 resizeBar(player); 345 timeHandler(player); 346 bufferHandler(player); 377 347 } 378 348 379 349 380 350 /** Resize the jwplayerControlbar. **/ 381 function resizeBar( options) {382 var lft = options.left;383 var top = options.top;384 var wid = options.width;385 var hei = $('#' + options.id + '_jwplayerControlbar').height();386 if ( options.position == 'over') {387 lft += 1 * options.margin;388 top -= 1 * options.margin + hei;389 wid -= 2 * options.margin;390 } 391 if ( options.fullscreen) {392 lft = options.margin;393 top = $(window).height() - options.margin - hei;394 wid = $(window).width() - 2 * options.margin;395 $('#' + options.id + '_jwplayerControlbar').css('z-index', 99);351 function resizeBar(player) { 352 var lft = player.controlbar.left; 353 var top = player.controlbar.top; 354 var wid = player.model.config.width; 355 var hei = $('#' +player.id + '_jwplayerControlbar').height(); 356 if (player.controlbar.position == 'over') { 357 lft += 1 * player.controlbar.margin; 358 top -= 1 * player.controlbar.margin + hei; 359 wid -= 2 * player.controlbar.margin; 360 } 361 if (player.fullscreen()) { 362 lft = player.controlbar.margin; 363 top = $(window).height() - player.controlbar.margin - hei; 364 wid = $(window).width() - 2 * player.controlbar.margin; 365 $('#' +player.id + '_jwplayerControlbar').css('z-index', 99); 396 366 } else { 397 $('#' + options.id + '_jwplayerControlbar').css('z-index', 97);398 } 399 $('#' + options.id + '_jwplayerControlbar').css('left', lft);400 $('#' + options.id + '_jwplayerControlbar').css('top', top);401 $('#' + options.id + '_jwplayerControlbar').css('width', wid);402 $('#' + options.id + '_timeSliderRail').css('width', wid - options.leftmargin - options.rightmargin);367 $('#' +player.id + '_jwplayerControlbar').css('z-index', 97); 368 } 369 $('#' +player.id + '_jwplayerControlbar').css('left', lft); 370 $('#' +player.id + '_jwplayerControlbar').css('top', top); 371 $('#' +player.id + '_jwplayerControlbar').css('width', wid); 372 $('#' +player.id + '_timeSliderRail').css('width', wid - player.controlbar.leftmargin - player.controlbar.rightmargin); 403 373 } 404 374 405 375 406 376 /** Update the volume level. **/ 407 function volumeHandler(options) { 408 var rwd = $('#' + options.id + '_volumeSliderRail').width(); 409 var wid = Math.round(options.volume / 100 * rwd); 410 var rig = $('#' + options.id + '_volumeSliderRail').css('right').substr(0, 2); 411 $('#' + options.id + '_volumeSliderProgress').css('width', wid); 412 $('#' + options.id + '_volumeSliderProgress').css('right', 1 * rig + rwd - wid); 377 function volumeHandler(event) { 378 var player = $.jwplayer(event.id); 379 var rwd = $('#' +player.id + '_volumeSliderRail').width(); 380 var wid = Math.round(event.volume / 100 * rwd); 381 var rig = $('#' +player.id + '_volumeSliderRail').css('right').substr(0, 2); 382 $('#' +player.id + '_volumeSliderProgress').css('width', wid); 383 $('#' +player.id + '_volumeSliderProgress').css('right', 1 * rig + rwd - wid); 413 384 } 414 385 … … 424 395 (function($) { 425 396 397 var mediaParams ={ 398 volume: 100, 399 fullscreen: false, 400 mute: false, 401 width: 480, 402 height: 320, 403 duration: 0, 404 source: 0, 405 buffer: 0, 406 state: 'IDLE' 407 }; 408 426 409 $.fn.jwplayerController = function() { 427 410 return this.each(function() { … … 432 415 $.fn.jwplayerController.play = function(player) { 433 416 try { 434 player. data("media").play();417 player.media.play(); 435 418 return true; 436 419 } catch (err) { … … 443 426 $.fn.jwplayerController.pause = function(player) { 444 427 try { 445 player. data("media").pause();428 player.media.pause(); 446 429 return true; 447 430 } catch (err) { … … 455 438 $.fn.jwplayerController.seek = function(player, position) { 456 439 try { 457 player. data("media").seek(position);440 player.media.seek(position); 458 441 return true; 459 442 } catch (err) { … … 468 451 $.fn.jwplayerController.stop = function(player) { 469 452 try { 470 player. data("media").stop();453 player.media.stop(); 471 454 return true; 472 455 } catch (err) { … … 482 465 try { 483 466 if (position === undefined) { 484 return $(player).data("model").volume;467 return player.model.volume; 485 468 } else { 486 player. data("media").volume(position);487 $(player).data("model").volume = position;469 player.media.volume(position); 470 player.model.volume = position; 488 471 return true; 489 472 } … … 498 481 try { 499 482 if (state === undefined) { 500 return $(player).data("model").mute;483 return player.model.mute; 501 484 } else { 502 player. data("media").mute(state);485 player.media.mute(state); 503 486 return true; 504 487 } … … 514 497 $.fn.jwplayerController.fullscreen = function(player, state) { 515 498 try { 516 if ( position=== undefined) {517 return $(player).data("model").fullscreen;499 if (state === undefined) { 500 return player.model.fullscreen; 518 501 } else { 519 player. data("media").fullscreen(state);502 player.media.fullscreen(state); 520 503 return true; 521 504 } … … 529 512 $.fn.jwplayerController.resize = function(player, width, height) { 530 513 try { 531 player. data("media").resize(width, height);514 player.media.resize(width, height); 532 515 return true; 533 516 } catch (err) { … … 540 523 $.fn.jwplayerController.mediaInfo = function(player) { 541 524 try { 542 player.data("media").mediaInfo(); 543 return true; 525 var result = {}; 526 for (var mediaParam in mediaParams){ 527 result[mediaParam] = player.model[mediaParam]; 528 } 529 return result; 544 530 } catch (err) { 545 531 $.fn.jwplayerUtils.log("error", err); … … 551 537 $.fn.jwplayerController.load = function(player, path) { 552 538 try { 553 player. data("media").load(path);539 player.media.load(path); 554 540 return true; 555 541 } catch (err) { … … 569 555 */ 570 556 (function($) { 571 557 /** Hooking the controlbar up to jQuery. **/ 558 $.fn.jwplayer = function(options) { 559 return this.each(function() { 560 $.fn.jwplayerUtils.log("setup", this); 561 var model = $.fn.jwplayerModel($(this), options); 562 var player = { 563 model: model 564 }; 565 players[model.config.id] = player; 566 player = $.extend(player, api(player)); 567 $.fn.jwplayerView(player); 568 $.fn.jwplayerModel.setActiveMediaProvider(player); 569 $.fn.jwplayerSkinner(player, function() { 570 finishSetup(player); 571 }); 572 }); 573 }; 574 575 function finishSetup(player) { 576 $.fn.jwplayerControlbar(player); 577 player.sendEvent("JWPLAYER_READY"); 578 } 579 580 581 /** Map with all players on the page. **/ 582 var players = {}; 583 584 585 /** Map with config for the controlbar plugin. **/ 586 $.fn.jwplayer.defaults = { 587 autostart: false, 588 file: undefined, 589 height: 300, 590 image: undefined, 591 skin: 'assets/five/five.xml', 592 volume: 100, 593 width: 400, 594 flashplayer: 'assets/player.swf' 595 }; 596 597 598 /** Start playback or resume. **/ 599 function play(player) { 600 return function() { 601 $.fn.jwplayerController.play(player); 602 return jwplayer(player); 603 }; 604 } 605 606 /** Switch the pause state of the player. **/ 607 function pause(player) { 608 return function() { 609 $.fn.jwplayerController.pause(player); 610 return jwplayer(player); 611 }; 612 } 613 614 615 /** Seek to a position in the video. **/ 616 function seek(player) { 617 return function(arg) { 618 $.fn.jwplayerController.seek(player, arg); 619 return jwplayer(player); 620 }; 621 } 622 623 624 /** Stop playback and loading of the video. **/ 625 function stop(player) { 626 return function() { 627 $.fn.jwplayerController.stop(player); 628 return jwplayer(player); 629 }; 630 } 631 632 633 /** Change the video's volume level. **/ 634 function volume(player) { 635 return function(arg) { 636 switch ($.fn.jwplayerUtils.typeOf(arg)) { 637 case "function": 638 addEventListener(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_VOLUME, arg); 639 break; 640 case "number": 641 $.fn.jwplayerController.volume(player, arg); 642 break; 643 case "string": 644 $.fn.jwplayerController.volume(player, parseInt(arg, 10)); 645 break; 646 default: 647 return $.fn.jwplayerController.volume(player); 648 } 649 return jwplayer(player); 650 }; 651 } 652 653 /** Switch the mute state of the player. **/ 654 function mute(player, state) { 655 return function(arg) { 656 switch ($.fn.jwplayerUtils.typeOf(arg)) { 657 case "function": 658 addEventListener(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_MUTE, arg); 659 break; 660 case "boolean": 661 $.fn.jwplayerController.mute(player, arg); 662 break; 663 default: 664 $.fn.jwplayerController.mute(player); 665 break; 666 } 667 return jwplayer(player); 668 }; 669 } 670 671 /** Resizing the player **/ 672 function resize(player, state) { 673 return function(arg1, arg2) { 674 switch ($.fn.jwplayerUtils.typeOf(arg)) { 675 case "function": 676 addEventListener(player, $.fn.jwplayer.events.JWPLAYER_RESIZE, arg); 677 break; 678 case "number": 679 $.fn.jwplayerController.resize(player, arg1, arg2); 680 break; 681 default: 682 break; 683 } 684 return jwplayer(player); 685 }; 686 } 687 688 /** Fullscreen the player **/ 689 function fullscreen(player, state) { 690 return function(arg) { 691 switch ($.fn.jwplayerUtils.typeOf(arg)) { 692 case "function": 693 addEventListener(player, $.fn.jwplayer.events.JWPLAYER_FULLSCREEN, arg); 694 break; 695 case "boolean": 696 $.fn.jwplayerController.fullscreen(player, arg); 697 break; 698 default: 699 return $.fn.jwplayerController.fullscreen(player); 700 } 701 return jwplayer(player); 702 }; 703 } 704 705 /** Adds a state listener **/ 706 function state(player) { 707 return function(arg) { 708 switch ($.fn.jwplayerUtils.typeOf(arg)) { 709 case "function": 710 addEventListener(player, $.fn.jwplayer.events.JWPLAYER_PLAYER_STATE, arg); 711 break; 712 default: 713 $.fn.jwplayerUtils.log("mediainfo", $.fn.jwplayerController.mediaInfo(player)); 714 return $.fn.jwplayerController.mediaInfo(player).state; 715 } 716 return jwplayer(player); 717 }; 718 } 719 720 /** Adds a buffer listener **/ 721 function buffer(player) { 722 return function(arg) { 723 switch ($.fn.jwplayerUtils.typeOf(arg)) { 724 case "function": 725 addEventListener(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_BUFFER, arg); 726 break; 727 default: 728 return $.fn.jwplayerController.mediaInfo(player).buffer; 729 } 730 return jwplayer(player); 731 }; 732 } 733 734 /** Returns the current time **/ 735 function time(player) { 736 return function(arg) { 737 switch ($.fn.jwplayerUtils.typeOf(arg)) { 738 case "function": 739 addEventListener(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_TIME, arg); 740 break; 741 default: 742 return $.fn.jwplayerController.mediaInfo(player).time; 743 } 744 return jwplayer(player); 745 }; 746 } 747 748 /** Loads a new video into the player **/ 749 function load(player) { 750 return function(arg) { 751 switch ($.fn.jwplayerUtils.typeOf(arg)) { 752 case "function": 753 addEventListener(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_LOADED, arg); 754 break; 755 default: 756 $.fn.jwplayerController.load(player, arg); 757 } 758 return jwplayer(player); 759 }; 760 } 761 762 /** Adds a listener for video completion **/ 763 function complete(player) { 764 return function(arg) { 765 addEventListener(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_COMPLETE, arg); 766 return jwplayer(player); 767 }; 768 } 769 770 /** Returns the duration **/ 771 function duration(player) { 772 return function() { 773 return $.fn.jwplayerController.mediaInfo(player).duration; 774 }; 775 } 776 777 /** Adds a listener for media errors. **/ 778 function error(player) { 779 return function(arg) { 780 addEventListener(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_ERROR, arg); 781 return jwplayer(player); 782 }; 783 } 784 785 786 /** Returns the width **/ 787 function width(player) { 788 return function() { 789 return $.fn.jwplayerController.mediaInfo(player).width; 790 }; 791 } 792 793 794 /** Returns the height **/ 795 function height(player) { 796 return function() { 797 return $.fn.jwplayerController.mediaInfo(player).height; 798 }; 799 } 800 801 /** Returns the available meta-data **/ 802 function meta(player) { 803 return function() { 804 switch ($.fn.jwplayerUtils.typeOf(arg)) { 805 case "function": 806 addEventListener(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_META, arg); 807 break; 808 default: 809 return $.fn.jwplayerController.mediaInfo(player); 810 } 811 return jwplayer(player); 812 }; 813 } 814 815 /** Returns the API method for adding an event listener.**/ 816 function apiAddEventListener(player) { 817 return function(type, listener) { 818 addEventListener(player, type, listener); 819 }; 820 } 821 822 /** Returns the API method for adding an event listener.**/ 823 function apiRemoveEventListener(player) { 824 return function(type, listener) { 825 removeEventListener(player, type, listener); 826 }; 827 } 828 829 /** Add an event listener. **/ 830 function addEventListener(player, type, listener) { 831 if (player.model.listeners[type] === undefined) { 832 player.model.listeners[type] = []; 833 } 834 player.model.listeners[type].push(listener); 835 } 836 837 838 /** Remove an event listener. **/ 839 function removeEventListener(player, type, listener) { 840 for (var lisenterIndex in player.model.listeners[type]) { 841 if (player.model.listeners[type][lisenterIndex] == listener) { 842 player.model.listeners[type].slice(lisenterIndex, lisenterIndex + 1); 843 break; 844 } 845 } 846 } 847 848 /** Send an event **/ 849 function sendEvent(player) { 850 return function(type, data) { 851 for (var listener in player.model.listeners[type]) { 852 player.model.listeners[type][listener](data); 853 } 854 }; 855 } 856 857 function api(player) { 858 return { 859 id: player.model.config.id, 860 buffer: buffer(player), 861 duration: duration(player), 862 complete: complete(player), 863 fullscreen: fullscreen(player), 864 height: buffer(player), 865 load: load(player), 866 meta: meta(player), 867 mute: mute(player), 868 pause: pause(player), 869 play: play(player), 870 resize: resize(player), 871 seek: seek(player), 872 state: state(player), 873 stop: stop(player), 874 time: time(player), 875 volume: volume(player), 876 width: width(player), 877 addEventListener: apiAddEventListener(player), 878 removeEventListener: apiRemoveEventListener(player), 879 sendEvent: sendEvent(player), 880 version: '0.1-alpha' 881 }; 882 } 883 572 884 function jwplayer(selector) { 573 885 if (selector === undefined) { 574 selector = ".jwplayer:first"; 575 } 576 if ($.fn.jwplayerUtils.typeOf(selector) == "string") { 577 selector = $(selector); 578 } 579 return { 580 buffer: buffer(selector), 581 duration: duration(selector), 582 complete: complete(selector), 583 fullscreen: fullscreen(selector), 584 height: buffer(selector), 585 load: load(selector), 586 meta: meta(selector), 587 mute: mute(selector), 588 pause: pause(selector), 589 play: play(selector), 590 resize: resize(selector), 591 seek: seek(selector), 592 state: state(selector), 593 stop: stop(selector), 594 time: time(selector), 595 volume: volume(selector), 596 width: width(selector), 597 addEventListener: apiAddEventListener(selector), 598 removeEventListener: apiRemoveEventListener(selector), 599 events: events 600 }; 601 } 602 603 var events = { 886 for (var player in players) { 887 return players[player]; 888 } 889 } else { 890 return players[selector]; 891 } 892 return null; 893 } 894 895 $.fn.jwplayer.states = { 896 IDLE: 'IDLE', 897 BUFFERING: 'BUFFERING', 898 PLAYING: 'PLAYING', 899 PAUSED: 'PAUSED' 900 }; 901 902 $.fn.jwplayer.events = { 604 903 JWPLAYER_READY: 'jwplayerReady', 605 904 JWPLAYER_FULLSCREEN: 'jwplayerFullscreen', … … 607 906 //JWPLAYER_LOCKED: 'jwplayerLocked', 608 907 //JWPLAYER_UNLOCKED: 'jwplayerLocked', 609 //JWPLAYER_ERROR: 'jwplayerError',908 JWPLAYER_ERROR: 'jwplayerError', 610 909 JWPLAYER_MEDIA_BUFFER: 'jwplayerMediaBuffer', 611 910 //JWPLAYER_MEDIA_BUFFER_FULL: 'jwplayerMediaBufferFull', … … 624 923 'jwplayer': jwplayer 625 924 }); 626 627 /** Hooking the controlbar up to jQuery. **/628 $.fn.jwplayer = function(options) {629 return this.each(function() {630 var player = $(this);631 player.jwplayerModel(options);632 player.jwplayerView();633 $.fn.jwplayerModel.setActiveMediaProvider(player);634 $("#"+player[0].id).jwplayerSkinner(function() {635 finishSetup(player);636 });637 });638 };639 640 function finishSetup(player) {641 player.jwplayerControlbar();642 player.trigger("JWPLAYER_READY", {643 id: player[0].id644 });645 }646 647 648 /** Map with all players on the page. **/649 $.fn.jwplayer.players = {};650 651 652 /** Map with config for the controlbar plugin. **/653 $.fn.jwplayer.defaults = {654 autostart: false,655 duration: 0,656 file: undefined,657 height: 300,658 image: undefined,659 skin: 'assets/five/five.xml',660 volume: 100,661 width: 400,662 source: 0,663 flashplayer: 'assets/player.swf'664 };665 666 667 /** Start playback or resume. **/668 function play(player) {669 return function() {670 $.fn.jwplayerController.play(player);671 return jwplayer(player);672 };673 }674 675 /** Switch the pause state of the player. **/676 function pause(player) {677 return function() {678 $.fn.jwplayerController.pause(player);679 return jwplayer(player);680 };681 }682 683 684 /** Seek to a position in the video. **/685 function seek(player) {686 return function(arg) {687 $.fn.jwplayerController.seek(player, arg);688 return jwplayer(player);689 };690 }691 692 693 /** Stop playback and loading of the video. **/694 function stop(player) {695 return function() {696 $.fn.jwplayerController.stop(player);697 return jwplayer(player);698 };699 }700 701 702 /** Change the video's volume level. **/703 function volume(player) {704 return function(arg) {705 switch ($.fn.jwplayerUtils.typeOf(arg)) {706 case "function":707 addEventListener(player, $.jwplayer().events.JWPLAYER_MEDIA_VOLUME, arg);708 break;709 case "number":710 $.fn.jwplayerController.volume(player, arg);711 break;712 case "string":713 $.fn.jwplayerController.volume(player, parseInt(arg, 10));714 break;715 default:716 return $.fn.jwplayerController.volume(player);717 }718 return jwplayer(player);719 };720 }721 722 /** Switch the mute state of the player. **/723 function mute(player, state) {724 return function(arg) {725 switch ($.fn.jwplayerUtils.typeOf(arg)) {726 case "function":727 addEventListener(player, $.jwplayer().events.JWPLAYER_MEDIA_MUTE, arg);728 break;729 case "boolean":730 $.fn.jwplayerController.mute(player, arg);731 break;732 default:733 $.fn.jwplayerController.mute(player);734 break;735 }736 return jwplayer(player);737 };738 }739 740 /** Resizing the player **/741 function resize(player, state) {742 return function(arg1, arg2) {743 switch ($.fn.jwplayerUtils.typeOf(arg)) {744 case "function":745 addEventListener(player, $.jwplayer().events.JWPLAYER_RESIZE, arg);746 break;747 case "number":748 $.fn.jwplayerController.resize(player, arg1, arg2);749 break;750 default:751 break;752 }753 return jwplayer(player);754 };755 }756 757 /** Fullscreen the player **/758 function fullscreen(player, state) {759 return function(arg) {760 switch ($.fn.jwplayerUtils.typeOf(arg)) {761 case "function":762 addEventListener(player, $.jwplayer().events.JWPLAYER_FULLSCREEN, arg);763 break;764 case "boolean":765 $.fn.jwplayerController.fullscreen(player, arg);766 break;767 default:768 return $.fn.jwplayerController.fullscreen(player);769 }770 return jwplayer(player);771 };772 }773 774 /** Adds a state listener **/775 function state(player) {776 return function(arg) {777 switch ($.fn.jwplayerUtils.typeOf(arg)) {778 case "function":779 addEventListener(player, $.jwplayer().events.JWPLAYER_PLAYER_STATE, arg);780 break;781 default:782 return $.fn.jwplayerController.mediaInfo(player).state;783 }784 return jwplayer(player);785 };786 }787 788 /** Adds a buffer listener **/789 function buffer(player) {790 return function(arg) {791 switch ($.fn.jwplayerUtils.typeOf(arg)) {792 case "function":793 addEventListener(player, $.jwplayer().events.JWPLAYER_MEDIA_BUFFER, arg);794 break;795 default:796 return $.fn.jwplayerController.mediaInfo(player).buffer;797 }798 return jwplayer(player);799 };800 }801 802 /** Returns the current time **/803 function time(player) {804 return function(arg) {805 switch ($.fn.jwplayerUtils.typeOf(arg)) {806 case "function":807 addEventListener(player, $.jwplayer().events.JWPLAYER_MEDIA_TIME, arg);808 break;809 default:810 return $.fn.jwplayerController.mediaInfo(player).time;811 }812 return jwplayer(player);813 };814 }815 816 /** Loads a new video into the player **/817 function load(player) {818 return function(arg) {819 switch ($.fn.jwplayerUtils.typeOf(arg)) {820 case "function":821 addEventListener(player, $.jwplayer().events.JWPLAYER_MEDIA_LOADED, arg);822 break;823 default:824 $.fn.jwplayerController.load(player, arg);825 }826 return jwplayer(player);827 };828 }829 830 /** Adds a listener for video completion **/831 function complete(player) {832 return function(arg) {833 addEventListener(player, $.jwplayer().events.JWPLAYER_MEDIA_COMPLETE, arg);834 return jwplayer(player);835 };836 }837 838 /** Returns the duration **/839 function duration(player) {840 return function() {841 return $.fn.jwplayerController.mediaInfo(player).duration;842 };843 }844 845 /** Adds a listener for media errors. **/846 function error(player) {847 return function(arg) {848 addEventListener(player, $.jwplayer().events.JWPLAYER_MEDIA_ERROR, arg);849 return jwplayer(player);850 };851 }852 853 854 /** Returns the width **/855 function width(player) {856 return function() {857 return $.fn.jwplayerController.mediaInfo(player).width;858 };859 }860 861 862 /** Returns the height **/863 function height(player) {864 return function() {865 return $.fn.jwplayerController.mediaInfo(player).height;866 };867 }868 869 /** Returns the available meta-data **/870 function meta(player) {871 return function() {872 switch ($.fn.jwplayerUtils.typeOf(arg)) {873 case "function":874 addEventListener(player, $.jwplayer().events.JWPLAYER_MEDIA_META, arg);875 break;876 default:877 return $.fn.jwplayerController.mediaInfo(player);878 }879 return jwplayer(player);880 };881 }882 883 /** Returns the API method for adding an event listener.**/884 function apiAddEventListener(player) {885 return function(event, listener) {886 addEventListener(player, event, listener);887 };888 }889 890 /** Returns the API method for adding an event listener.**/891 function apiRemoveEventListener(player) {892 return function(event, listener) {893 removeEventListener(player, event, listener);894 };895 }896 897 /** Add an event listener. **/898 function addEventListener(player, event, listener) {899 $(player).bind(event, listener);900 }901 902 903 /** Remove an event listener. **/904 function removeEventListener(player, event, listener) {905 $(player).unbind(event, listener);906 }907 925 908 926 /** Automatically initializes the player for all <video> tags with the JWPlayer class. **/ … … 922 940 923 941 var controllerEvents = { 924 ERROR: "ERROR",942 ERROR: $.fn.jwplayer.events.JWPLAYER_ERROR, 925 943 ITEM: "ITEM", 926 MUTE: "MUTE",944 MUTE: $.fn.jwplayer.events.JWPLAYER_MEDIA_MUTE, 927 945 PLAY: "PLAY", 928 946 PLAYLIST: "PLAYLIST", 929 RESIZE: "RESIZE",947 RESIZE: $.fn.jwplayer.events.JWPLAYER_RESIZE, 930 948 SEEK: "SEEK", 931 949 STOP: "STOP", 932 VOLUME: "VOLUME"950 VOLUME: $.fn.jwplayer.events.JWPLAYER_MEDIA_VOLUME 933 951 }; 934 952 935 953 var modelEvents = { 936 BUFFER: "BUFFER",937 ERROR: "ERROR",938 LOADED: "LOADED",939 META: "META",940 STATE: stateHandler,941 TIME: "TIME"954 BUFFER: $.fn.jwplayer.events.JWPLAYER_MEDIA_BUFFER, 955 ERROR: $.fn.jwplayer.events.JWPLAYER_MEDIA_ERROR, 956 LOADED: $.fn.jwplayer.events.JWPLAYER_MEDIA_LOADED, 957 META: $.fn.jwplayer.events.JWPLAYER_MEDIA_META, 958 STATE: $.fn.jwplayer.events.JWPLAYER_PLAYER_STATE, 959 TIME: $.fn.jwplayer.events.JWPLAYER_MEDIA_TIME 942 960 }; 943 961 … … 957 975 VOLUME: "VOLUME" 958 976 }; 959 960 $.fn.jwplayerMediaFlash = function(options) { 961 return this.each(function() { 962 var model = $(this).data("model"); 963 //model.autostart = true; 964 model.controlbar = 'none'; 965 model.icons = false; 966 $.fn.jwplayerView.embedFlash($(this), model); 967 var media = { 968 play: play($(this)), 969 pause: pause($(this)), 970 seek: seek($(this)), 971 volume: volume($(this)), 972 mute: mute($(this)), 973 fullscreen: fullscreen($(this)), 974 state: "idle" 975 }; 976 $(this).data("media", media); 977 addEventListeners($(this)); 978 }); 979 }; 980 981 function stateHandler(event) { 982 $(event.id).data("media").state = event.newState; 983 sendEvent($(event.id), $.jwplayer().events.JWPLAYER_PLAYER_STATE, { 977 978 979 $.fn.jwplayerMediaFlash = function(player) { 980 var options = {}; 981 //options.autostart = true; 982 options.controlbar = 'none'; 983 options.icons = false; 984 $.fn.jwplayerView.embedFlash(player, options); 985 var media = { 986 play: play(player), 987 pause: pause(player), 988 seek: seek(player), 989 volume: volume(player), 990 mute: mute(player), 991 fullscreen: fullscreen(player), 992 load: load(player), 993 resize: resize(player), 994 mediaInfo: mediaInfo(player), 995 state: $.fn.jwplayer.states.IDLE 996 }; 997 player.media = media; 998 addEventListeners(player); 999 }; 1000 1001 function stateHandler(event, player) { 1002 player.model.state = event.newstate; 1003 player.sendEvent($.fn.jwplayer.events.JWPLAYER_PLAYER_STATE, { 984 1004 oldstate: event.oldstate, 985 newstate: event.newState 986 }); 987 } 1005 newstate: event.newstate 1006 }); 1007 } 1008 988 1009 989 1010 function addEventListeners(player) { 990 var event; 991 if ($("#" + player[0].id)[0].addControllerListener === undefined) { 1011 if (player.model.domelement[0].addControllerListener === undefined) { 992 1012 setTimeout(function() { 993 1013 addEventListeners(player); … … 995 1015 return; 996 1016 } 997 for (event in controllerEvents) { 998 $("#" + player[0].id)[0].addControllerListener(event, "$.fn.jwplayerMediaFlash.forward"); 999 } 1000 for (event in modelEvents) { 1001 $("#" + player[0].id)[0].addModelListener(event, "$.fn.jwplayerMediaFlash.forward"); 1002 } 1003 } 1004 1005 $.fn.jwplayerMediaFlash.forward = function(event) { 1006 $(event.id).trigger(event.type, event); 1007 }; 1017 var video = player.model.domelement; 1018 for (var controllerEvent in controllerEvents) { 1019 $.fn.jwplayerMediaFlash.forwarders[controllerEvents[controllerEvent]] = forwardFactory(controllerEvents[controllerEvent], player); 1020 video[0].addControllerListener(controllerEvent, "$.fn.jwplayerMediaFlash.forwarders."+controllerEvents[controllerEvent]); 1021 } 1022 for (var modelEvent in modelEvents) { 1023 $.fn.jwplayerMediaFlash.forwarders[modelEvents[modelEvent]] = forwardFactory(modelEvents[modelEvent], player); 1024 video[0].addModelListener(modelEvent, "$.fn.jwplayerMediaFlash.forwarders."+modelEvents[modelEvent]); 1025 } 1026 } 1027 1028 function forwardFactory(type, player){ 1029 return function(event){ 1030 forward(event, type, player); 1031 }; 1032 } 1033 1034 $.fn.jwplayerMediaFlash.forwarders = {}; 1035 1036 function forward(event, type, player) { 1037 $.fn.jwplayerUtils.log(type, event); 1038 switch (type) { 1039 case $.fn.jwplayer.events.JWPLAYER_PLAYER_STATE: 1040 stateHandler(event, player); 1041 break; 1042 case $.fn.jwplayer.events.JWPLAYER_MEDIA_BUFFER: 1043 event.bufferPercent = event.percentage; 1044 player.sendEvent(type, event); 1045 break; 1046 default: 1047 player.sendEvent(type, event); 1048 break; 1049 } 1050 } 1008 1051 1009 1052 function play(player) { 1010 1053 return function() { 1011 $("#" + player[0].id)[0].sendEvent("PLAY"); 1054 try { 1055 player.model.domelement[0].sendEvent("PLAY"); 1056 } catch (err){ 1057 $.fn.jwplayerUtils.log("There was an error", err); 1058 } 1012 1059 }; 1013 1060 } … … 1016 1063 function pause(player) { 1017 1064 return function() { 1018 $("#" + player[0].id)[0].sendEvent("PAUSE");1065 player.model.domelement[0].sendEvent("PAUSE"); 1019 1066 }; 1020 1067 } … … 1024 1071 function seek(player) { 1025 1072 return function(position) { 1026 $("#" + player[0].id)[0].sendEvent("SEEK", position);1073 player.model.domelement[0].sendEvent("SEEK", position); 1027 1074 }; 1028 1075 } … … 1032 1079 function stop(player) { 1033 1080 return function() { 1034 $("#" + player[0].id)[0].sendEvent("STOP");1081 player.model.domelement[0].sendEvent("STOP"); 1035 1082 }; 1036 1083 } … … 1040 1087 function volume(player) { 1041 1088 return function(position) { 1042 $("#" + player[0].id)[0].sendEvent("VOLUME", position);1089 player.model.domelement[0].sendEvent("VOLUME", position); 1043 1090 }; 1044 1091 } … … 1047 1094 function mute(player) { 1048 1095 return function(state) { 1049 $("#" + player[0].id)[0].sendEvent("MUTE");1096 player.model.domelement[0].sendEvent("MUTE"); 1050 1097 }; 1051 1098 } … … 1055 1102 return function(state) { 1056 1103 //player.fullscreen = state; 1104 }; 1105 } 1106 /** Load a new video into the player. **/ 1107 function load(player) { 1108 return function(path) { 1109 //TODO 1110 }; 1111 } 1112 1113 /** Resizes the video **/ 1114 function resize(player) { 1115 return function(width, height) { 1116 //TODO 1117 }; 1118 } 1119 1120 1121 /** Returns the media info **/ 1122 function mediaInfo(player) { 1123 return function(){ 1124 return { 1125 width: player.model.width, 1126 player: player.model.height, 1127 state: player.model.state 1128 }; 1057 1129 }; 1058 1130 } … … 1068 1140 (function($) { 1069 1141 var states = { 1070 " buffering": "buffering",1071 " ended": "idle",1072 "p laying": "playing",1073 " pause": "paused"1142 "ended": $.fn.jwplayer.states.IDLE, 1143 "playing": $.fn.jwplayer.states.PLAYING, 1144 "pause": $.fn.jwplayer.states.PAUSED, 1145 "buffering": $.fn.jwplayer.states.BUFFERING 1074 1146 }; 1075 1147 … … 1094 1166 'stalled': stateHandler, 1095 1167 'suspend': stateHandler, 1096 'timeupdate': generalHandler,1168 'timeupdate': positionHandler, 1097 1169 'volumechange': generalHandler, 1098 1170 'waiting': stateHandler, … … 1105 1177 1106 1178 1107 $.fn.jwplayerMediaVideo = function(options) { 1108 return this.each(function() { 1109 var video = $(this); 1110 var media = { 1111 play: play(video), 1112 pause: pause(video), 1113 seek: seek(video), 1114 stop: stop(video), 1115 volume: volume(video), 1116 mute: mute(video), 1117 fullscreen: fullscreen(video), 1118 load: load(video), 1119 state: "idle", 1120 interval: null 1121 }; 1122 video.data("media", media); 1123 $.each(events, function(event, handler) { 1124 video[0].addEventListener(event, handler, true); 1179 $.fn.jwplayerMediaVideo = function(player) { 1180 var media = { 1181 play: play(player), 1182 pause: pause(player), 1183 seek: seek(player), 1184 stop: stop(player), 1185 volume: volume(player), 1186 mute: mute(player), 1187 fullscreen: fullscreen(player), 1188 load: load(player), 1189 resize: resize(player), 1190 mediaInfo: mediaInfo(player), 1191 state: $.fn.jwplayer.states.IDLE, 1192 interval: null 1193 }; 1194 player.media = media; 1195 $.each(events, function(event, handler) { 1196 player.model.domelement[0].addEventListener(event, function(event) { 1197 handler(event, player); 1198 }, true); 1199 }); 1200 }; 1201 1202 function generalHandler(event, player) { 1203 //$.fn.jwplayerUtils.log("general:" + event.type); 1204 } 1205 1206 function stateHandler(event, player) { 1207 if (states[event.type]) { 1208 setState(player, states[event.type]); 1209 } 1210 } 1211 1212 function setState(player, newstate) { 1213 if (player.model.state != newstate) { 1214 var oldstate = player.model.state; 1215 player.model.state = newstate; 1216 sendEvent(player, $.fn.jwplayer.events.JWPLAYER_PLAYER_STATE, { 1217 oldstate: oldstate, 1218 newstate: newstate 1125 1219 }); 1126 }); 1127 }; 1128 1129 function generalHandler(event) { 1130 //$.fn.jwplayerUtils.log("general:" + event.type); 1131 } 1132 1133 function stateHandler(event) { 1134 if (states[event.type]) { 1135 setState(event.target, states[event.type]); 1136 } 1137 } 1138 1139 function setState(player, newState) { 1140 if ($(player).data("media").state != newState) { 1141 var oldState = $(player).data("media").state; 1142 $(player).data("media").state = newState; 1143 sendEvent($(player), $.jwplayer().events.JWPLAYER_PLAYER_STATE, { 1144 oldstate: oldState, 1145 newstate: newState 1146 }); 1147 } 1148 if (newState == 'idle') { 1149 clearInterval($(player).data("media").interval); 1150 $(player).data("media").interval = null; 1151 } 1152 } 1153 1154 function metaHandler(event) { 1155 sendEvent($(event.target), $.jwplayer().events.JWPLAYER_MEDIA_META, { 1156 videoHeight: event.target.videoHeight, 1157 videoWidth: event.target.videoWidth, 1220 } 1221 if (newstate == $.fn.jwplayer.states.IDLE) { 1222 clearInterval(player.media.interval); 1223 player.media.interval = null; 1224 } 1225 } 1226 1227 function metaHandler(event, player) { 1228 var meta = { 1229 height: event.target.videoHeight, 1230 width: event.target.videoWidth, 1158 1231 duration: event.target.duration 1159 }); 1160 } 1161 1162 function positionHandler(event) { 1163 if ($(event.target).data("media").interval === null) { 1164 $(event.target).data("media").interval = window.setInterval(function() { 1165 positionHandler(event); 1232 }; 1233 player.model = $.extend(player.model, meta); 1234 sendEvent(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_META, meta); 1235 } 1236 1237 function positionHandler(event, player) { 1238 if (player.media.interval === null) { 1239 player.media.interval = window.setInterval(function() { 1240 positionHandler(event, player); 1166 1241 }, 100); 1167 1242 } 1168 sendEvent( $(event.target), $.jwplayer().events.JWPLAYER_MEDIA_TIME, {1243 sendEvent(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_TIME, { 1169 1244 position: event.target.currentTime, 1170 1245 duration: event.target.duration … … 1172 1247 } 1173 1248 1174 function progressHandler(event ) {1249 function progressHandler(event, player) { 1175 1250 var buffer; 1176 1251 if (!isNaN(event.loaded / event.total)) { 1177 1252 buffer = event.loaded / event.total * 100; 1178 } else if ( event.target.buffered !== undefined) {1179 buffer = event.target.buffered.end(0) / event.target.duration * 100;1180 } 1181 sendEvent( $(event.target), $.jwplayer().events.JWPLAYER_MEDIA_BUFFER, {1253 } else if (player.model.domelement.buffered !== undefined) { 1254 buffer = player.model.domelement.buffered.end(0) / player.model.domelement.duration * 100; 1255 } 1256 sendEvent(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_BUFFER, { 1182 1257 'bufferPercent': buffer 1183 1258 }); 1184 1259 } 1185 1260 1186 function errorHandler(event ) {1187 sendEvent( $(event.target), $.jwplayer().events.JWPLAYER_ERROR, {});1261 function errorHandler(event, player) { 1262 sendEvent(player, $.fn.jwplayer.events.JWPLAYER_ERROR, {}); 1188 1263 } 1189 1264 1190 1265 function play(player) { 1191 1266 return function() { 1192 player [0].play();1267 player.model.domelement[0].play(); 1193 1268 }; 1194 1269 } … … 1197 1272 function pause(player) { 1198 1273 return function() { 1199 player [0].pause();1274 player.model.domelement[0].pause(); 1200 1275 }; 1201 1276 } … … 1205 1280 function seek(player) { 1206 1281 return function(position) { 1207 player [0].currentTime = position;1282 player.model.domelement[0].currentTime = position; 1208 1283 }; 1209 1284 } … … 1213 1288 function stop(player) { 1214 1289 return function() { 1215 player [0].pause();1216 player [0].currentTime = 0;1217 clearInterval( $(player).data("media").interval);1218 $(player).data("media").interval = null;1219 setState(player, 'idle');1290 player.model.domelement[0].pause(); 1291 player.model.domelement[0].currentTime = 0; 1292 clearInterval(player.media.interval); 1293 player.media.interval = null; 1294 setState(player, $.fn.jwplayer.states.IDLE); 1220 1295 }; 1221 1296 } … … 1225 1300 function volume(player) { 1226 1301 return function(position) { 1227 player [0].volume = position / 100;1228 sendEvent(player, $. jwplayer().events.JWPLAYER_MEDIA_VOLUME, {1229 volume: player [0].volume1302 player.model.domelement[0].volume = position / 100; 1303 sendEvent(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_VOLUME, { 1304 volume: player.model.domelement[0].volume 1230 1305 }); 1231 1306 }; … … 1235 1310 function mute(player) { 1236 1311 return function(state) { 1237 player [0].muted = state;1238 sendEvent(player, $. jwplayer().events.JWPLAYER_MEDIA_MUTE, {1239 mute: player [0].muted1312 player.model.domelement[0].muted = state; 1313 sendEvent(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_MUTE, { 1314 mute: player.model.domelement[0].muted 1240 1315 }); 1241 1316 }; … … 1247 1322 player.css("width", width); 1248 1323 player.css("height", height); 1249 sendEvent(player, $. jwplayer().events.JWPLAYER_MEDIA_RESIZE, {1324 sendEvent(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_RESIZE, { 1250 1325 width: width, 1251 1326 hieght: height … … 1260 1335 player.css("width", window.width); 1261 1336 player.css("height", window.height); 1262 sendEvent(player, $. jwplayer().events.JWPLAYER_MEDIA_RESIZE, {1337 sendEvent(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_RESIZE, { 1263 1338 width: width, 1264 1339 hieght: height … … 1277 1352 } 1278 1353 1354 /** Returns the media info **/ 1355 function mediaInfo(player) { 1356 return function(){ 1357 return { 1358 width: player.model.width, 1359 player: player.model.height, 1360 state: player.model.state 1361 }; 1362 }; 1363 } 1364 1279 1365 function sendEvent(player, type, data) { 1280 player. trigger(type, $.extend({1281 id: player [0].id,1282 version: $.jwplayer(player).version1366 player.sendEvent(type, $.extend({ 1367 id: player.model.config.id, 1368 version: player.version 1283 1369 }, data)); 1284 1370 } … … 1294 1380 */ 1295 1381 (function($) { 1382 var jwplayerid = 1; 1383 1384 var modelParams ={ 1385 volume: 100, 1386 fullscreen: false, 1387 mute: false, 1388 width: 480, 1389 height: 320, 1390 duration: 0 1391 }; 1392 1393 function createModel(){ 1394 return { 1395 config: {}, 1396 sources: {}, 1397 listeners: {}, 1398 state: $.fn.jwplayer.states.IDLE, 1399 source: 0, 1400 buffer: 0 1401 }; 1402 } 1296 1403 1297 $.fn.jwplayerModel = function(options) { 1298 return this.each(function() { 1299 $(this).jwplayerParse(options); 1300 }); 1404 1405 $.fn.jwplayerModel = function(domElement, options) { 1406 var model = createModel(); 1407 model.config = $.fn.jwplayerParse(domElement[0], options); 1408 if (model.config.id === undefined) { 1409 model.config.id = "jwplayer_"+jwplayerid++; 1410 } 1411 model.sources = model.config.sources; 1412 delete model.config.sources; 1413 model.domelement = domElement; 1414 for (var modelParam in modelParams) { 1415 if (model.config[modelParam] !== undefined) { 1416 model[modelParam] = model.config[modelParam]; 1417 } else { 1418 model[modelParam] = modelParams[modelParam]; 1419 } 1420 } 1421 return model; 1301 1422 }; 1302 1423 1303 1424 $.fn.jwplayerModel.setActiveMediaProvider = function(player) { 1304 1425 var source, sourceIndex; 1305 var model = player.data("model"); 1306 for (sourceIndex in model.sources) { 1307 source = model.sources[sourceIndex]; 1426 for (sourceIndex in player.model.sources) { 1427 source = player.model.sources[sourceIndex]; 1308 1428 if (source.type === undefined) { 1309 1429 source.type = 'video/' + $.fn.jwplayerUtils.extension(source.file) + ';'; 1310 1430 } 1311 1431 if ($.fn.jwplayerUtils.supportsType(source.type)) { 1312 model.source = sourceIndex;1313 player.jwplayerMediaVideo();1432 player.model.source = sourceIndex 1433 $.fn.jwplayerMediaVideo(player); 1314 1434 return true; 1315 1435 } 1316 1436 } 1317 if ($.fn.jwplayerUtils.supportsFlash && model.state != 'playing') {1318 for (sourceIndex in model.sources) {1319 source = model.sources[sourceIndex];1437 if ($.fn.jwplayerUtils.supportsFlash && player.state != $.fn.jwplayer.states.PLAYING) { 1438 for (sourceIndex in player.model.sources) { 1439 source = player.model.sources[sourceIndex]; 1320 1440 if ($.fn.jwplayerUtils.flashCanPlay(source.file)) { 1321 model.source = sourceIndex;1322 player.jwplayerMediaFlash();1441 player.model.source = sourceIndex; 1442 $.fn.jwplayerMediaFlash(player); 1323 1443 return true; 1324 1444 } … … 1365 1485 var parsers = {}; 1366 1486 1367 $.fn.jwplayerParse = function(options) { 1368 return this.each(function() { 1369 $(this).data("model", $.extend(true, {}, $.fn.jwplayer.defaults, options, parseElement(this))); 1370 }); 1487 $.fn.jwplayerParse = function(player, options) { 1488 return $.extend(true, {}, $.fn.jwplayer.defaults, options, parseElement(player)); 1371 1489 }; 1372 1490 … … 1394 1512 } 1395 1513 } 1396 configuration.screencolor = $(domElement).css("background-color");1514 configuration.screencolor = ($(domElement).css("background-color") == "transparent") ? "#ffffff" : $(domElement).css("background-color"); 1397 1515 return configuration; 1398 1516 } … … 1443 1561 1444 1562 /** Constructor **/ 1445 $.fn.jwplayerSkinner = function(completeHandler) { 1446 return this.each(function() { 1447 load($(this), completeHandler); 1448 }); 1563 $.fn.jwplayerSkinner = function(player, completeHandler) { 1564 load(player, completeHandler); 1449 1565 }; 1450 1566 1451 1567 /** Load the skin **/ 1452 1568 load = function (player, completeHandler){ 1453 $.get(player. data("model").skin, {}, function(xml) {1569 $.get(player.model.config.skin, {}, function(xml) { 1454 1570 var skin = { 1455 1571 properties:{}, … … 1474 1590 skin[componentName] = component; 1475 1591 } 1476 player. data("skin", skin);1592 player.skin = skin; 1477 1593 }); 1478 1594 }; … … 1483 1599 var elementName = $(element).attr('name'); 1484 1600 var elementSource = $(element).attr('src'); 1485 var skinUrl = player. data("model").skin.substr(0, player.data("model").skin.lastIndexOf('/'));1601 var skinUrl = player.model.config.skin.substr(0, player.model.config.skin.lastIndexOf('/')); 1486 1602 $(img).error(function() { 1487 player. data("skin").incompleteElements--;1603 player.skin.incompleteElements--; 1488 1604 }); 1489 1605 $(img).load(function() { 1490 player. data("skin")[component].elements[elementName] = {1606 player.skin[component].elements[elementName] = { 1491 1607 height: this.height, 1492 1608 width: this.width, 1493 1609 src: this.src 1494 1610 }; 1495 player. data("skin").incompleteElements--;1496 if (player. data("skin").incompleteElements === 0) {1611 player.skin.incompleteElements--; 1612 if (player.skin.incompleteElements === 0) { 1497 1613 completeHandler(); 1498 1614 } … … 1502 1618 1503 1619 $.fn.jwplayerSkinner.hasComponent = function (player, component){ 1504 return (player. data("skin")[component] !== null);1620 return (player.skin[component] !== null); 1505 1621 }; 1506 1622 … … 1508 1624 $.fn.jwplayerSkinner.getSkinElement = function (player, component, element){ 1509 1625 try { 1510 return player. data("skin")[component].elements[element];1626 return player.skin[component].elements[element]; 1511 1627 } catch (err) { 1512 1628 $.fn.jwplayerUtils.log("No such skin component / element: ", [player, component, element]); … … 1518 1634 $.fn.jwplayerSkinner.addSkinElement = function (player, component, name, element){ 1519 1635 try { 1520 player. data("skin")[component][name] = element;1636 player.skin[component][name] = element; 1521 1637 } catch (err){ 1522 1638 $.fn.jwplayerUtils.log("No such skin component ", [player, component]); … … 1525 1641 1526 1642 $.fn.jwplayerSkinner.getSkinProperties = function (player){ 1527 return player. data("skin").properties;1643 return player.skin.properties; 1528 1644 }; 1529 1645 … … 1723 1839 }; 1724 1840 1725 $.fn.jwplayerView = function() { 1726 return this.each(function() { 1727 var video = $(this); 1728 if ($(this).attr("src") !== "") { 1729 $(this).attr("preload", "metadata"); 1730 $(this).append('<source src="' + $(this).attr("src") + '" >'); 1731 $(this).removeAttr("src"); 1732 } 1733 $(this).wrap("<div id='" + $(this)[0].id + "_jwplayer' />"); 1734 $(this).parent().css("position", "relative"); 1735 //$(this).css("display", "none"); 1736 $(this).css("position", "absolute"); 1737 $(this).css("left", "0px"); 1738 $(this).css("top", "0px"); 1739 $(this).css("z-index", "0"); 1740 $(this).before("<a href='" + $(this).data("model").sources[$(this).data("model").source].file + "' style='display:block; background:#ffffff url(" + $(this).data("model").image + ") no-repeat center center;width:" + $(this).data("model").width + "px;height:" + $(this).data("model").height + "px;position:relative;'><img src='http://content.bitsontherun.com/staticfiles/play.png' alt='Click to play video' style='position:absolute; top:" + ($(this).data("model").height - 60) / 2 + "px; left:" + ($(this).data("model").width - 60) / 2 + "px; border:0;' /></a>"); 1741 $(this).prev("a").css("position", "relative"); 1742 $(this).prev("a").css("z-index", "100"); 1743 $(this).prev("a").click(function(evt) { 1744 if (typeof evt.preventDefault != 'undefined') { 1745 evt.preventDefault(); // W3C 1746 } else { 1747 evt.returnValue = false; // IE 1748 } 1749 $.jwplayer(video).play(); 1750 }); 1751 $.jwplayer(video).state(imageHandler); 1752 }); 1753 }; 1754 1755 function imageHandler(event, parameters) { 1756 $.fn.jwplayerUtils(event.target); 1757 switch (parameters.newstate) { 1758 case 'idle': 1759 $(event.target).css("z-index", "0"); 1760 $(event.target).prev("a").css("z-index", "100"); 1841 $.fn.jwplayerView = function(player) { 1842 /*if (!(($(this).attr("src") === undefined) || ($(this).attr("src") === ""))) { 1843 $(this).attr("preload", "metadata"); 1844 $(this).append('<source src="' + $(this).attr("src") + '" >'); 1845 $(this).removeAttr("src"); 1846 }*/ 1847 player.model.domelement.wrap("<div id='" + player.model.config.id + "_jwplayer' />"); 1848 player.model.domelement.parent().css("position", "relative"); 1849 //$(this).css("display", "none"); 1850 player.model.domelement.css("position", "absolute"); 1851 player.model.domelement.css("left", "0px"); 1852 player.model.domelement.css("top", "0px"); 1853 player.model.domelement.css("z-index", "0"); 1854 player.model.domelement.before("<a href='" + player.model.sources[player.model.source].file + "' style='display:block; background:#ffffff url(" + player.model.config.image + ") no-repeat center center;width:" + player.model.width + "px;height:" + player.model.height + "px;position:relative;'><img src='http://content.bitsontherun.com/staticfiles/play.png' alt='Click to play video' style='position:absolute; top:" + (player.model.height - 60) / 2 + "px; left:" + (player.model.width - 60) / 2 + "px; border:0;' /></a>"); 1855 player.model.domelement.prev("a").css("position", "relative"); 1856 player.model.domelement.prev("a").css("z-index", "100"); 1857 player.model.domelement.prev("a").click(function(evt) { 1858 if (typeof evt.preventDefault != 'undefined') { 1859 evt.preventDefault(); // W3C 1860 } else { 1861 evt.returnValue = false; // IE 1862 } 1863 if (player.state() !== $.fn.jwplayer.states.PLAYING){ 1864 player.play(); 1865 } else { 1866 player.pause(); 1867 } 1868 1869 }); 1870 $.jwplayer(player.model.config.id).state(function(obj) { 1871 imageHandler(obj, player); 1872 }); 1873 }; 1874 1875 function imageHandler(obj, player) { 1876 switch (obj.newstate) { 1877 case $.fn.jwplayer.states.IDLE: 1878 player.model.domelement.css("z-index", "0"); 1879 player.model.domelement.prev("a").css("z-index", "100"); 1761 1880 break; 1762 case 'playing':1763 $(event.target).prev("a").css("z-index", "0");1764 $(event.target).css("z-index", "100");1881 case $.fn.jwplayer.states.PLAYING: 1882 player.model.domelement.prev("a").css("z-index", "0"); 1883 player.model.domelement.css("z-index", "100"); 1765 1884 break; 1766 1885 } 1767 1886 } 1768 1887 1888 $.fn.jwplayerView.switchMediaProvider = function(){ 1889 1890 }; 1891 1769 1892 /** Embeds a Flash Player at the specified location in the DOM. **/ 1770 $.fn.jwplayerView.embedFlash = function( domElement, model) {1771 if ( model.flashplayer !== false) {1893 $.fn.jwplayerView.embedFlash = function(player, options) { 1894 if (player.model.config.flashplayer !== false) { 1772 1895 var htmlString, elementvarString = "", flashvarString = ""; 1773 1896 if (navigator.plugins && navigator.mimeTypes && navigator.mimeTypes.length) { … … 1777 1900 } 1778 1901 for (var elementvar in elementvars) { 1779 if (!(( model[elementvar] === undefined) || (model[elementvar] === "") || (model[elementvar] === null))) {1780 elementvarString += elementvar + "='" + model[elementvar] + "'";1902 if (!((player.model.config[elementvar] === undefined) || (player.model.config[elementvar] === "") || (player.model.config[elementvar] === null))) { 1903 elementvarString += elementvar + "='" + player.model.config[elementvar] + "'"; 1781 1904 } 1782 1905 } 1783 for (var flashvar in model) { 1784 if (!((model[flashvar] === undefined) || (model[flashvar] === "") || (model[flashvar] === null))) { 1785 if (flashvar == "sources") { 1786 flashvarString += "file=" + model.sources[model.source].file + "&"; 1787 } else { 1788 flashvarString += flashvar + "=" + model[flashvar] + "&"; 1789 } 1906 flashvarString += "file=" + player.model.sources[player.model.source].file + "&"; 1907 var config = $.extend(true, {}, player.model.config, options); 1908 for (var flashvar in config) { 1909 if (!((config[flashvar] === undefined) || (config[flashvar] === "") || (config[flashvar] === null))) { 1910 flashvarString += flashvar + "=" + config[flashvar] + "&"; 1790 1911 } 1791 1912 } 1792 1913 htmlString = htmlString.replace("%elementvars%", elementvarString); 1793 1914 htmlString = htmlString.replace("%flashvars%", flashvarString); 1794 htmlString = htmlString.replace("%flashplayer%", model.flashplayer);1915 htmlString = htmlString.replace("%flashplayer%", player.model.config.flashplayer); 1795 1916 htmlString = htmlString.replace("%style%", styleString); 1796 $(domElement).before(htmlString);1797 var result = $(domElement).prev();1798 $(domElement).remove();1799 return result;1917 player.model.domelement.before(htmlString); 1918 var oldDOMElement = player.model.domelement; 1919 player.model.domelement = player.model.domelement.prev(); 1920 oldDOMElement.remove(); 1800 1921 } 1801 1922 }; -
trunk/html5/src/jquery.jwplayerControlbar.js
r949 r950 11 11 12 12 /** Hooking the jwplayerControlbar up to jQuery. **/ 13 $.fn.jwplayerControlbar = function(ops) { 14 return this.each(function() { 15 var id = $(this)[0].id; 16 var div = $('#' + id).parents()[0].id; 17 //$($('#' + id).parents()[0]).append('<div id="' + div + '">'); 18 var player = document.getElementById(id); 19 var options = $.extend({}, $.fn.jwplayerControlbar.defaults, ops); 20 $.extend(options, $('#' + id).data("model")); 21 // Add positioning options and change the player css, so we can full-browser-screen it. 22 $.extend(options, { 23 id: id, 24 div: div, 25 left: 0, 26 top: 0 27 }); 28 // Save the variables globally and start loading the skin. 29 config = { 30 player: player, 31 options: options, 32 images: $(player).data("skin").controlbar.elements 33 }; 34 $.fn.jwplayerControlbar.bars[id] = config; 35 buildElements(config); 36 buildHandlers(config); 37 }); 38 }; 39 40 41 /** Map with all jwplayerControlbars. **/ 42 $.fn.jwplayerControlbar.bars = {}; 43 44 13 $.fn.jwplayerControlbar = function(player) { 14 player.controlbar = $.extend({}, $.fn.jwplayerControlbar.defaults, player.controlbar); 15 buildElements(player); 16 buildHandlers(player); 17 }; 18 19 45 20 /** Map with config for the jwplayerControlbar plugin. **/ 46 21 $.fn.jwplayerControlbar.defaults = { 47 buffer: 0,48 div: 'container',49 duration: 0,50 elapsed: 0,51 22 fontsize: 10, 52 23 fontcolor: '000000', 53 fullscreen: false,54 id: 'player',55 images: 0,56 24 position: 'bottom', 57 skin: 'assets/five/five.xml',58 width: 400,59 height: 300,60 left: 0,61 25 leftmargin: 0, 62 top: 0,63 26 rightmargin: 0, 64 scrubber: 'none', 65 state: 'idle', 66 volume: 100 27 scrubber: 'none' 67 28 }; 68 29 69 30 70 31 /** Callbacks called by Flash players to update stats. **/ 71 $.fn.jwplayerControlbar.bufferHandler = function( event, obj) {32 $.fn.jwplayerControlbar.bufferHandler = function(obj) { 72 33 bufferHandler({ 73 34 id: obj.id, … … 75 36 }); 76 37 }; 77 $.fn.jwplayerControlbar.muteHandler = function(event, obj) { 38 39 $.fn.jwplayerControlbar.muteHandler = function(obj) { 78 40 muteHandler({ 79 41 id: obj.id, … … 81 43 }); 82 44 }; 83 $.fn.jwplayerControlbar.stateHandler = function(event, obj) { 45 46 $.fn.jwplayerControlbar.stateHandler = function(obj) { 84 47 stateHandler({ 85 48 id: obj.id, … … 87 50 }); 88 51 }; 89 $.fn.jwplayerControlbar.timeHandler = function(event, obj) { 52 53 $.fn.jwplayerControlbar.timeHandler = function(obj) { 90 54 timeHandler({ 91 55 id: obj.id, 92 elapsed: obj.position,56 position: obj.position, 93 57 duration: obj.duration 94 58 }); 95 59 }; 60 96 61 $.fn.jwplayerControlbar.volumeHandler = function(obj) { 97 62 volumeHandler({ … … 103 68 104 69 /** Draw the jwplayerControlbar elements. **/ 105 function buildElements( config) {70 function buildElements(player) { 106 71 // Draw the background. 107 $('#' + config.options.div).append('<div id="' + config.options.id + '_jwplayerControlbar"></div>');108 $( '#' + config.options.id + '_jwplayerControlbar').css('position', 'relative');109 $( '#' + config.options.id + '_jwplayerControlbar').css('height', config.images.background.height);110 $( '#' + config.options.id + '_jwplayerControlbar').css('background', 'url(' + config.images.background.src + ') repeat-x center left');72 player.model.domelement.parents(":first").append('<div id="' +player.id + '_jwplayerControlbar"></div>'); 73 $("#"+player.id + '_jwplayerControlbar').css('position', 'relative'); 74 $("#"+player.id + '_jwplayerControlbar').css('height', player.skin.controlbar.elements.background.height); 75 $("#"+player.id + '_jwplayerControlbar').css('background', 'url(' + player.skin.controlbar.elements.background.src + ') repeat-x center left'); 111 76 // Draw all elements on top of the bar. 112 buildElement('capLeft', 'left', true, config);113 buildElement('playButton', 'left', false, config);114 buildElement('pauseButton', 'left', true, config);115 buildElement('divider1', 'left', true, config);116 buildElement('elapsedText', 'left', true, config);117 buildElement('timeSliderRail', 'left', false, config);118 buildElement('timeSliderBuffer', 'left', false, config);119 buildElement('timeSliderProgress', 'left', false, config);120 buildElement('timeSliderThumb', 'left', false, config);121 buildElement('capRight', 'right', true, config);122 buildElement('fullscreenButton', 'right', false, config);123 buildElement('normalscreenButton', 'right', true, config);124 buildElement('divider2', 'right', true, config);125 buildElement('volumeSliderRail', 'right', false, config);126 buildElement('volumeSliderProgress', 'right', true, config);127 buildElement('muteButton', 'right', false, config);128 buildElement('unmuteButton', 'right', true, config);129 buildElement('divider3', 'right', true, config);130 buildElement('durationText', 'right', true, config);77 buildElement('capLeft', 'left', true, player); 78 buildElement('playButton', 'left', false, player); 79 buildElement('pauseButton', 'left', true, player); 80 buildElement('divider1', 'left', true, player); 81 buildElement('elapsedText', 'left', true, player); 82 buildElement('timeSliderRail', 'left', false, player); 83 buildElement('timeSliderBuffer', 'left', false, player); 84 buildElement('timeSliderProgress', 'left', false, player); 85 buildElement('timeSliderThumb', 'left', false, player); 86 buildElement('capRight', 'right', true, player); 87 buildElement('fullscreenButton', 'right', false, player); 88 buildElement('normalscreenButton', 'right', true, player); 89 buildElement('divider2', 'right', true, player); 90 buildElement('volumeSliderRail', 'right', false, player); 91 buildElement('volumeSliderProgress', 'right', true, player); 92 buildElement('muteButton', 'right', false, player); 93 buildElement('unmuteButton', 'right', true, player); 94 buildElement('divider3', 'right', true, player); 95 buildElement('durationText', 'right', true, player); 131 96 } 132 97 133 98 134 99 /** Draw a single element into the jwplayerControlbar. **/ 135 function buildElement(element, align, offset, config) {136 var nam = config.options.id + '_' + element;137 $('#' + config.options.id + '_jwplayerControlbar').append('<div id="' + nam + '"></div>');100 function buildElement(element, align, offset, player) { 101 var nam =player.id + '_' + element; 102 $('#' +player.id + '_jwplayerControlbar').append('<div id="' + nam + '"></div>'); 138 103 $('#' + nam).css('position', 'absolute'); 139 104 $('#' + nam).css('top', 0); 140 105 if (element.indexOf('Text') > 0) { 141 106 $('#' + nam).html('00:00'); 142 $('#' + nam).css('font', config.options.fontsize + 'px/' + (config.images.background.height + 1) + 'px Arial,sans-serif');107 $('#' + nam).css('font', player.controlbar.fontsize + 'px/' + (player.skin.controlbar.elements.background.height + 1) + 'px Arial,sans-serif'); 143 108 $('#' + nam).css('text-align', 'center'); 144 109 $('#' + nam).css('font-weight', 'bold'); 145 110 $('#' + nam).css('cursor', 'default'); 146 var wid = 14 + 3 * config.options.fontsize;147 $('#' + nam).css('color', '#' + config.options.fontcolor.substr(-6));111 var wid = 14 + 3 * player.controlbar.fontsize; 112 $('#' + nam).css('color', '#' + player.controlbar.fontcolor.substr(-6)); 148 113 } else if (element.indexOf('divider') === 0) { 149 $('#' + nam).css('background', 'url(' + config.images.divider.src + ') repeat-x center left');150 var wid = config.images.divider.width;151 } else { 152 $('#' + nam).css('background', 'url(' + config.images[element].src + ') repeat-x center left');153 var wid = config.images[element].width;114 $('#' + nam).css('background', 'url(' + player.skin.controlbar.elements.divider.src + ') repeat-x center left'); 115 var wid = player.skin.controlbar.elements.divider.width; 116 } else { 117 $('#' + nam).css('background', 'url(' + player.skin.controlbar.elements[element].src + ') repeat-x center left'); 118 var wid = player.skin.controlbar.elements[element].width; 154 119 } 155 120 if (align == 'left') { 156 $('#' + nam).css(align, config.options.leftmargin);121 $('#' + nam).css(align, player.controlbar.leftmargin); 157 122 if (offset) { 158 config.options.leftmargin += wid;123 player.controlbar.leftmargin += wid; 159 124 } 160 125 } else if (align == 'right') { 161 $('#' + nam).css(align, config.options.rightmargin);126 $('#' + nam).css(align, player.controlbar.rightmargin); 162 127 if (offset) { 163 config.options.rightmargin += wid;128 player.controlbar.rightmargin += wid; 164 129 } 165 130 } 166 131 $('#' + nam).css('width', wid); 167 $('#' + nam).css('height', config.images.background.height);132 $('#' + nam).css('height', player.skin.controlbar.elements.background.height); 168 133 } 169 134 170 135 171 136 /** Add interactivity to the jwplayerControlbar elements. **/ 172 function buildHandlers( config) {137 function buildHandlers(player) { 173 138 // Register events with the buttons. 174 buildHandler('playButton', 'play', config.player, config.options);175 buildHandler('pauseButton', 'pause', config.player, config.options);176 buildHandler('muteButton', 'mute', config.player, config.options);177 buildHandler('unmuteButton', 'mute', config.player, config.options);178 buildHandler('fullscreenButton', 'fullscreen', config.player, config.options);179 buildHandler('normalscreenButton', 'fullscreen', config.player, config.options);180 /*181 addSliders(options);182 */ 139 buildHandler('playButton', 'play', player); 140 buildHandler('pauseButton', 'pause', player); 141 buildHandler('muteButton', 'mute', player); 142 buildHandler('unmuteButton', 'mute', player); 143 buildHandler('fullscreenButton', 'fullscreen', player); 144 buildHandler('normalscreenButton', 'fullscreen', player); 145 146 addSliders(player); 147 183 148 // Register events with the player. 184 $.jwplayer("#" + config.player.id).buffer($.fn.jwplayerControlbar.bufferHandler);185 $.jwplayer("#" + config.player.id).state($.fn.jwplayerControlbar.stateHandler);186 $.jwplayer("#" + config.player.id).time($.fn.jwplayerControlbar.timeHandler);187 $.jwplayer("#" + config.player.id).mute($.fn.jwplayerControlbar.muteHandler);188 $.jwplayer("#" + config.player.id).volume($.fn.jwplayerControlbar.volumeHandler);149 player.buffer($.fn.jwplayerControlbar.bufferHandler); 150 player.state($.fn.jwplayerControlbar.stateHandler); 151 player.time($.fn.jwplayerControlbar.timeHandler); 152 player.mute($.fn.jwplayerControlbar.muteHandler); 153 player.volume($.fn.jwplayerControlbar.volumeHandler); 189 154 // Trigger a few events so the bar looks good on startup. 190 fullscreenHandler( config.options);191 muteHandler( config.options);192 stateHandler( config.options);193 volumeHandler( config.options);155 fullscreenHandler(player); 156 muteHandler(player); 157 stateHandler(player); 158 volumeHandler(player); 194 159 } 195 160 196 161 197 162 /** Set a single button handler. **/ 198 function buildHandler(element, handler, player , options) {199 var nam = options.id + '_' + element;163 function buildHandler(element, handler, player) { 164 var nam = player.id + '_' + element; 200 165 $('#' + nam).css('cursor', 'pointer'); 201 166 if (handler == 'fullscreen') { 202 167 $('#' + nam).mouseup(function(evt) { 203 168 evt.stopPropagation(); 204 options.fullscreen = !options.fullscreen;205 fullscreenHandler( options);169 player.fullscreen() = !player.fullscreen(); 170 fullscreenHandler(player); 206 171 }); 207 172 } else { … … 215 180 216 181 /** Set the volume drag handler. **/ 217 function addSliders( ) {218 var bar = '#' + config.id + '_jwplayerControlbar';219 var trl = '#' + config.id + '_timeSliderRail';220 var vrl = '#' + config.id + '_volumeSliderRail';182 function addSliders(player) { 183 var bar = '#' +player.id + '_jwplayerControlbar'; 184 var trl = '#' +player.id + '_timeSliderRail'; 185 var vrl = '#' +player.id + '_volumeSliderRail'; 221 186 $(bar).css('cursor', 'hand'); 222 187 $(bar).mousedown(function(evt) { 223 188 var xps = evt.pageX - $(bar).position().left; 224 189 if (xps > $(trl).position().left && xps < $(trl).position().left + $(trl).width()) { 225 config.scrubber = 'time';190 player.controlbar.scrubber = 'time'; 226 191 } else if (xps > $(vrl).position().left && xps < $(vrl).position().left + $(vrl).width()) { 227 config.scrubber = 'volume';192 player.controlbar.scrubber = 'volume'; 228 193 } 229 194 }); 230 195 $(bar).mouseup(function(evt) { 231 196 evt.stopPropagation(); 232 sliderUp(evt.pageX );197 sliderUp(evt.pageX, player); 233 198 }); 234 199 $(bar).mouseleave(function(evt) { 235 sliderUp(evt.pageX );200 sliderUp(evt.pageX, player); 236 201 evt.stopPropagation(); 237 202 }); 238 203 $(bar).mousemove(function(evt) { 239 if ( config.scrubber == 'time') {204 if (player.controlbar.scrubber == 'time') { 240 205 var xps = evt.pageX - $(bar).position().left; 241 $('#' + config.id + '_timeSliderThumb').css('left', xps);206 $('#' +player.id + '_timeSliderThumb').css('left', xps); 242 207 } 243 208 }); … … 246 211 247 212 /** The slider has been moved up. **/ 248 function sliderUp(msx ) {249 if ( config.scrubber == 'time') {250 var xps = msx - $('#' + config.id + '_timeSliderRail').position().left;251 var wid = $('#' + config.id + '_timeSliderRail').width();252 var pos = xps / wid * config.duration;213 function sliderUp(msx, player) { 214 if (player.controlbar.scrubber == 'time') { 215 var xps = msx - $('#' +player.id + '_timeSliderRail').position().left; 216 var wid = $('#' +player.id + '_timeSliderRail').width(); 217 var pos = xps / wid * player.duration(); 253 218 if (pos < 0) { 254 219 pos = 0; 255 } else if (pos > config.duration) {256 pos = config.duration - 3;220 } else if (pos > player.controlbar.duration) { 221 pos = player.controlbar.duration - 3; 257 222 } 258 223 player.seek(pos); 259 } else if ( config.scrubber == 'volume') {260 var bar = $('#' + config.id + '_jwplayerControlbar').width();261 var brx = $('#' + config.id + '_jwplayerControlbar').position().left;262 var rig = $('#' + config.id + '_volumeSliderRail').css('right').substr(0, 2);263 var wid = config.images.volumeSliderRail.width;224 } else if (player.controlbar.scrubber == 'volume') { 225 var bar = $('#' +player.id + '_jwplayerControlbar').width(); 226 var brx = $('#' +player.id + '_jwplayerControlbar').position().left; 227 var rig = $('#' +player.id + '_volumeSliderRail').css('right').substr(0, 2); 228 var wid = player.skin.controlbar.elements.volumeSliderRail.width; 264 229 var pct = Math.round((msx - bar - brx + 1 * rig + wid) / wid * 100); 265 230 if (pct < 0) { … … 270 235 player.volume(pct); 271 236 } 272 config.scrubber = 'none'; 273 } 274 275 237 player.controlbar.scrubber = 'none'; 238 } 276 239 277 240 278 241 /** Update the buffer percentage. **/ 279 function bufferHandler(options) { 280 if (options.bufferPercent === 0) { 281 $('#' + options.id + '_timeSliderBuffer').css('display', 'none'); 282 } else { 283 $('#' + options.id + '_timeSliderBuffer').css('display', 'block'); 284 var wid = $('#' + options.id + '_timeSliderRail').width(); 285 $('#' + options.id + '_timeSliderBuffer').css('width', Math.round(wid * options.bufferPercent / 100)); 242 function bufferHandler(event) { 243 var player = $.jwplayer(event.id); 244 if (event.bufferPercent === 0) { 245 $('#' +player.id + '_timeSliderBuffer').css('display', 'none'); 246 } else { 247 $('#' +player.id + '_timeSliderBuffer').css('display', 'block'); 248 var wid = $('#' +player.id + '_timeSliderRail').width(); 249 $('#' +player.id + '_timeSliderBuffer').css('width', Math.round(wid * event.bufferPercent / 100)); 286 250 } 287 251 } … … 289 253 290 254 /** Update the mute state. **/ 291 function muteHandler(options) { 292 if (options.mute) { 293 $('#' + options.id + '_muteButton').css('display', 'none'); 294 $('#' + options.id + '_unmuteButton').css('display', 'block'); 295 $('#' + options.id + '_volumeSliderProgress').css('display', 'none'); 296 } else { 297 $('#' + options.id + '_muteButton').css('display', 'block'); 298 $('#' + options.id + '_unmuteButton').css('display', 'none'); 299 $('#' + options.id + '_volumeSliderProgress').css('display', 'block'); 255 function muteHandler(event) { 256 var player = $.jwplayer(event.id); 257 if (event.mute) { 258 $('#' +player.id + '_muteButton').css('display', 'none'); 259 $('#' +player.id + '_unmuteButton').css('display', 'block'); 260 $('#' +player.id + '_volumeSliderProgress').css('display', 'none'); 261 } else { 262 $('#' +player.id + '_muteButton').css('display', 'block'); 263 $('#' +player.id + '_unmuteButton').css('display', 'none'); 264 $('#' +player.id + '_volumeSliderProgress').css('display', 'block'); 300 265 } 301 266 } … … 303 268 304 269 /** Update the playback state. **/ 305 function stateHandler(options) { 306 if (options.state == 'buffering' || options.state == 'playing') { 307 $('#' + options.id + '_pauseButton').css('display', 'block'); 308 $('#' + options.id + '_playButton').css('display', 'none'); 309 } else { 310 $('#' + options.id + '_pauseButton').css('display', 'none'); 311 $('#' + options.id + '_playButton').css('display', 'block'); 312 } 313 if (options.state == 'idle') { 314 options.elapsed = 0; 315 timeHandler(options); 270 function stateHandler(event) { 271 var player = $.jwplayer(event.id); 272 if (event.state == $.fn.jwplayer.states.BUFFERING || player.state() == $.fn.jwplayer.states.PLAYING) { 273 $('#' +player.id + '_pauseButton').css('display', 'block'); 274 $('#' +player.id + '_playButton').css('display', 'none'); 275 } else { 276 $('#' +player.id + '_pauseButton').css('display', 'none'); 277 $('#' +player.id + '_playButton').css('display', 'block'); 278 } 279 if (player.state() == $.fn.jwplayer.states.IDLE) { 280 timeHandler({ 281 id: player.id, 282 position: 0 283 }); 316 284 } 317 285 } … … 319 287 320 288 /** Update the playback time. **/ 321 function timeHandler(options) { 322 var wid = $('#' + options.id + '_timeSliderRail').width(); 323 var thb = $('#' + options.id + '_timeSliderThumb').width(); 324 var lft = $('#' + options.id + '_timeSliderRail').position().left; 325 if (options.elapsed === 0) { 326 $('#' + options.id + '_timeSliderProgress').css('display', 'none'); 327 $('#' + options.id + '_timeSliderThumb').css('display', 'none'); 328 } else { 329 $('#' + options.id + '_timeSliderProgress').css('display', 'block'); 330 $('#' + options.id + '_timeSliderProgress').css('width', Math.round(wid * options.elapsed / options.duration)); 331 $('#' + options.id + '_timeSliderThumb').css('display', 'block'); 332 $('#' + options.id + '_timeSliderThumb').css('left', lft + 333 Math.round((wid - thb) * options.elapsed / options.duration)); 334 $('#' + options.id + '_durationText').html(timeFormat(options.duration)); 335 } 336 $('#' + options.id + '_elapsedText').html(timeFormat(options.elapsed)); 289 function timeHandler(event) { 290 var player = $.jwplayer(event.id); 291 var wid = $('#' +player.id + '_timeSliderRail').width(); 292 var thb = $('#' +player.id + '_timeSliderThumb').width(); 293 var lft = $('#' +player.id + '_timeSliderRail').position().left; 294 if (event.position === 0) { 295 $('#' +player.id + '_timeSliderProgress').css('display', 'none'); 296 $('#' +player.id + '_timeSliderThumb').css('display', 'none'); 297 } else { 298 $('#' +player.id + '_timeSliderProgress').css('display', 'block'); 299 $('#' +player.id + '_timeSliderProgress').css('width', Math.round(wid * event.position / event.duration)); 300 $('#' +player.id + '_timeSliderThumb').css('display', 'block'); 301 $('#' +player.id + '_timeSliderThumb').css('left', lft + 302 Math.round((wid - thb) * event.position / event.duration)); 303 $('#' +player.id + '_durationText').html(timeFormat(event.duration)); 304 } 305 $('#' +player.id + '_elapsedText').html(timeFormat(event.position)); 337 306 } 338 307 … … 350 319 351 320 /** Flip the player size to/from full-browser-screen. **/ 352 function fullscreenHandler(options) { 353 if (options.fullscreen) { 321 function fullscreenHandler(event) { 322 var player = $.jwplayer(event.id); 323 if (event.fullscreen) { 354 324 //$('#' + options.div).css('position', 'absolute'); 355 325 //$('#' + options.div).css('left', 0); … … 357 327 //$('#' + options.div).css('height', '100%'); 358 328 //$('#' + options.div).css('width', '100%'); 359 $('#' + options.id + '_normalscreenButton').css('display', 'block');360 $('#' + options.id + '_fullscreenButton').css('display', 'none');329 $('#' +player.id + '_normalscreenButton').css('display', 'block'); 330 $('#' +player.id + '_fullscreenButton').css('display', 'none'); 361 331 $(window).resize(function() { 362 resizeBar( options);332 resizeBar(player); 363 333 }); 364 334 } else { … … 368 338 //$('#' + options.div).css('height', options.height); 369 339 //$('#' + options.div).css('width', options.width); 370 $('#' + options.id + '_normalscreenButton').css('display', 'none');371 $('#' + options.id + '_fullscreenButton').css('display', 'block');340 $('#' +player.id + '_normalscreenButton').css('display', 'none'); 341 $('#' +player.id + '_fullscreenButton').css('display', 'block'); 372 342 $(window).resize(null); 373 343 } 374 resizeBar( options);375 timeHandler( options);376 bufferHandler( options);344 resizeBar(player); 345 timeHandler(player); 346 bufferHandler(player); 377 347 } 378 348 379 349 380 350 /** Resize the jwplayerControlbar. **/ 381 function resizeBar( options) {382 var lft = options.left;383 var top = options.top;384 var wid = options.width;385 var hei = $('#' + options.id + '_jwplayerControlbar').height();386 if ( options.position == 'over') {387 lft += 1 * options.margin;388 top -= 1 * options.margin + hei;389 wid -= 2 * options.margin;390 } 391 if ( options.fullscreen) {392 lft = options.margin;393 top = $(window).height() - options.margin - hei;394 wid = $(window).width() - 2 * options.margin;395 $('#' + options.id + '_jwplayerControlbar').css('z-index', 99);396 } else { 397 $('#' + options.id + '_jwplayerControlbar').css('z-index', 97);398 } 399 $('#' + options.id + '_jwplayerControlbar').css('left', lft);400 $('#' + options.id + '_jwplayerControlbar').css('top', top);401 $('#' + options.id + '_jwplayerControlbar').css('width', wid);402 $('#' + options.id + '_timeSliderRail').css('width', wid - options.leftmargin - options.rightmargin);351 function resizeBar(player) { 352 var lft = player.controlbar.left; 353 var top = player.controlbar.top; 354 var wid = player.model.config.width; 355 var hei = $('#' +player.id + '_jwplayerControlbar').height(); 356 if (player.controlbar.position == 'over') { 357 lft += 1 * player.controlbar.margin; 358 top -= 1 * player.controlbar.margin + hei; 359 wid -= 2 * player.controlbar.margin; 360 } 361 if (player.fullscreen()) { 362 lft = player.controlbar.margin; 363 top = $(window).height() - player.controlbar.margin - hei; 364 wid = $(window).width() - 2 * player.controlbar.margin; 365 $('#' +player.id + '_jwplayerControlbar').css('z-index', 99); 366 } else { 367 $('#' +player.id + '_jwplayerControlbar').css('z-index', 97); 368 } 369 $('#' +player.id + '_jwplayerControlbar').css('left', lft); 370 $('#' +player.id + '_jwplayerControlbar').css('top', top); 371 $('#' +player.id + '_jwplayerControlbar').css('width', wid); 372 $('#' +player.id + '_timeSliderRail').css('width', wid - player.controlbar.leftmargin - player.controlbar.rightmargin); 403 373 } 404 374 405 375 406 376 /** Update the volume level. **/ 407 function volumeHandler(options) { 408 var rwd = $('#' + options.id + '_volumeSliderRail').width(); 409 var wid = Math.round(options.volume / 100 * rwd); 410 var rig = $('#' + options.id + '_volumeSliderRail').css('right').substr(0, 2); 411 $('#' + options.id + '_volumeSliderProgress').css('width', wid); 412 $('#' + options.id + '_volumeSliderProgress').css('right', 1 * rig + rwd - wid); 377 function volumeHandler(event) { 378 var player = $.jwplayer(event.id); 379 var rwd = $('#' +player.id + '_volumeSliderRail').width(); 380 var wid = Math.round(event.volume / 100 * rwd); 381 var rig = $('#' +player.id + '_volumeSliderRail').css('right').substr(0, 2); 382 $('#' +player.id + '_volumeSliderProgress').css('width', wid); 383 $('#' +player.id + '_volumeSliderProgress').css('right', 1 * rig + rwd - wid); 413 384 } 414 385 -
trunk/html5/src/jquery.jwplayerController.js
r936 r950 8 8 (function($) { 9 9 10 var mediaParams ={ 11 volume: 100, 12 fullscreen: false, 13 mute: false, 14 width: 480, 15 height: 320, 16 duration: 0, 17 source: 0, 18 buffer: 0, 19 state: 'IDLE' 20 }; 21 10 22 $.fn.jwplayerController = function() { 11 23 return this.each(function() { … … 16 28 $.fn.jwplayerController.play = function(player) { 17 29 try { 18 player. data("media").play();30 player.media.play(); 19 31 return true; 20 32 } catch (err) { … … 27 39 $.fn.jwplayerController.pause = function(player) { 28 40 try { 29 player. data("media").pause();41 player.media.pause(); 30 42 return true; 31 43 } catch (err) { … … 39 51 $.fn.jwplayerController.seek = function(player, position) { 40 52 try { 41 player. data("media").seek(position);53 player.media.seek(position); 42 54 return true; 43 55 } catch (err) { … … 52 64 $.fn.jwplayerController.stop = function(player) { 53 65 try { 54 player. data("media").stop();66 player.media.stop(); 55 67 return true; 56 68 } catch (err) { … … 66 78 try { 67 79 if (position === undefined) { 68 return $(player).data("model").volume;80 return player.model.volume; 69 81 } else { 70 player. data("media").volume(position);71 $(player).data("model").volume = position;82 player.media.volume(position); 83 player.model.volume = position; 72 84 return true; 73 85 } … … 82 94 try { 83 95 if (state === undefined) { 84 return $(player).data("model").mute;96 return player.model.mute; 85 97 } else { 86 player. data("media").mute(state);98 player.media.mute(state); 87 99 return true; 88 100 } … … 98 110 $.fn.jwplayerController.fullscreen = function(player, state) { 99 111 try { 100 if ( position=== undefined) {101 return $(player).data("model").fullscreen;112 if (state === undefined) { 113 return player.model.fullscreen; 102 114 } else { 103 player. data("media").fullscreen(state);115 player.media.fullscreen(state); 104 116 return true; 105 117 } … … 113 125 $.fn.jwplayerController.resize = function(player, width, height) { 114 126 try { 115 player. data("media").resize(width, height);127 player.media.resize(width, height); 116 128 return true; 117 129 } catch (err) { … … 124 136 $.fn.jwplayerController.mediaInfo = function(player) { 125 137 try { 126 player.data("media").mediaInfo(); 127 return true; 138 var result = {}; 139 for (var mediaParam in mediaParams){ 140 result[mediaParam] = player.model[mediaParam]; 141 } 142 return result; 128 143 } catch (err) { 129 144 $.fn.jwplayerUtils.log("error", err); … … 135 150 $.fn.jwplayerController.load = function(player, path) { 136 151 try { 137 player. data("media").load(path);152 player.media.load(path); 138 153 return true; 139 154 } catch (err) { -
trunk/html5/src/jquery.jwplayerCore.js
r948 r950 8 8 */ 9 9 (function($) { 10 10 /** Hooking the controlbar up to jQuery. **/ 11 $.fn.jwplayer = function(options) { 12 return this.each(function() { 13 $.fn.jwplayerUtils.log("setup", this); 14 var model = $.fn.jwplayerModel($(this), options); 15 var player = { 16 model: model 17 }; 18 players[model.config.id] = player; 19 player = $.extend(player, api(player)); 20 $.fn.jwplayerView(player); 21 $.fn.jwplayerModel.setActiveMediaProvider(player); 22 $.fn.jwplayerSkinner(player, function() { 23 finishSetup(player); 24 }); 25 }); 26 }; 27 28 function finishSetup(player) { 29 $.fn.jwplayerControlbar(player); 30 player.sendEvent("JWPLAYER_READY"); 31 } 32 33 34 /** Map with all players on the page. **/ 35 var players = {}; 36 37 38 /** Map with config for the controlbar plugin. **/ 39 $.fn.jwplayer.defaults = { 40 autostart: false, 41 file: undefined, 42 height: 300, 43 image: undefined, 44 skin: 'assets/five/five.xml', 45 volume: 100, 46 width: 400, 47 flashplayer: 'assets/player.swf' 48 }; 49 50 51 /** Start playback or resume. **/ 52 function play(player) { 53 return function() { 54 $.fn.jwplayerController.play(player); 55 return jwplayer(player); 56 }; 57 } 58 59 /** Switch the pause state of the player. **/ 60 function pause(player) { 61 return function() { 62 $.fn.jwplayerController.pause(player); 63 return jwplayer(player); 64 }; 65 } 66 67 68 /** Seek to a position in the video. **/ 69 function seek(player) { 70 return function(arg) { 71 $.fn.jwplayerController.seek(player, arg); 72 return jwplayer(player); 73 }; 74 } 75 76 77 /** Stop playback and loading of the video. **/ 78 function stop(player) { 79 return function() { 80 $.fn.jwplayerController.stop(player); 81 return jwplayer(player); 82 }; 83 } 84 85 86 /** Change the video's volume level. **/ 87 function volume(player) { 88 return function(arg) { 89 switch ($.fn.jwplayerUtils.typeOf(arg)) { 90 case "function": 91 addEventListener(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_VOLUME, arg); 92 break; 93 case "number": 94 $.fn.jwplayerController.volume(player, arg); 95 break; 96 case "string": 97 $.fn.jwplayerController.volume(player, parseInt(arg, 10)); 98 break; 99 default: 100 return $.fn.jwplayerController.volume(player); 101 } 102 return jwplayer(player); 103 }; 104 } 105 106 /** Switch the mute state of the player. **/ 107 function mute(player, state) { 108 return function(arg) { 109 switch ($.fn.jwplayerUtils.typeOf(arg)) { 110 case "function": 111 addEventListener(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_MUTE, arg); 112 break; 113 case "boolean": 114 $.fn.jwplayerController.mute(player, arg); 115 break; 116 default: 117 $.fn.jwplayerController.mute(player); 118 break; 119 } 120 return jwplayer(player); 121 }; 122 } 123 124 /** Resizing the player **/ 125 function resize(player, state) { 126 return function(arg1, arg2) { 127 switch ($.fn.jwplayerUtils.typeOf(arg)) { 128 case "function": 129 addEventListener(player, $.fn.jwplayer.events.JWPLAYER_RESIZE, arg); 130 break; 131 case "number": 132 $.fn.jwplayerController.resize(player, arg1, arg2); 133 break; 134 default: 135 break; 136 } 137 return jwplayer(player); 138 }; 139 } 140 141 /** Fullscreen the player **/ 142 function fullscreen(player, state) { 143 return function(arg) { 144 switch ($.fn.jwplayerUtils.typeOf(arg)) { 145 case "function": 146 addEventListener(player, $.fn.jwplayer.events.JWPLAYER_FULLSCREEN, arg); 147 break; 148 case "boolean": 149 $.fn.jwplayerController.fullscreen(player, arg); 150 break; 151 default: 152 return $.fn.jwplayerController.fullscreen(player); 153 } 154 return jwplayer(player); 155 }; 156 } 157 158 /** Adds a state listener **/ 159 function state(player) { 160 return function(arg) { 161 switch ($.fn.jwplayerUtils.typeOf(arg)) { 162 case "function": 163 addEventListener(player, $.fn.jwplayer.events.JWPLAYER_PLAYER_STATE, arg); 164 break; 165 default: 166 $.fn.jwplayerUtils.log("mediainfo", $.fn.jwplayerController.mediaInfo(player)); 167 return $.fn.jwplayerController.mediaInfo(player).state; 168 } 169 return jwplayer(player); 170 }; 171 } 172 173 /** Adds a buffer listener **/ 174 function buffer(player) { 175 return function(arg) { 176 switch ($.fn.jwplayerUtils.typeOf(arg)) { 177 case "function": 178 addEventListener(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_BUFFER, arg); 179 break; 180 default: 181 return $.fn.jwplayerController.mediaInfo(player).buffer; 182 } 183 return jwplayer(player); 184 }; 185 } 186 187 /** Returns the current time **/ 188 function time(player) { 189 return function(arg) { 190 switch ($.fn.jwplayerUtils.typeOf(arg)) { 191 case "function": 192 addEventListener(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_TIME, arg); 193 break; 194 default: 195 return $.fn.jwplayerController.mediaInfo(player).time; 196 } 197 return jwplayer(player); 198 }; 199 } 200 201 /** Loads a new video into the player **/ 202 function load(player) { 203 return function(arg) { 204 switch ($.fn.jwplayerUtils.typeOf(arg)) { 205 case "function": 206 addEventListener(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_LOADED, arg); 207 break; 208 default: 209 $.fn.jwplayerController.load(player, arg); 210 } 211 return jwplayer(player); 212 }; 213 } 214 215 /** Adds a listener for video completion **/ 216 function complete(player) { 217 return function(arg) { 218 addEventListener(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_COMPLETE, arg); 219 return jwplayer(player); 220 }; 221 } 222 223 /** Returns the duration **/ 224 function duration(player) { 225 return function() { 226 return $.fn.jwplayerController.mediaInfo(player).duration; 227 }; 228 } 229 230 /** Adds a listener for media errors. **/ 231 function error(player) { 232 return function(arg) { 233 addEventListener(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_ERROR, arg); 234 return jwplayer(player); 235 }; 236 } 237 238 239 /** Returns the width **/ 240 function width(player) { 241 return function() { 242 return $.fn.jwplayerController.mediaInfo(player).width; 243 }; 244 } 245 246 247 /** Returns the height **/ 248 function height(player) { 249 return function() { 250 return $.fn.jwplayerController.mediaInfo(player).height; 251 }; 252 } 253 254 /** Returns the available meta-data **/ 255 function meta(player) { 256 return function() { 257 switch ($.fn.jwplayerUtils.typeOf(arg)) { 258 case "function": 259 addEventListener(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_META, arg); 260 break; 261 default: 262 return $.fn.jwplayerController.mediaInfo(player); 263 } 264 return jwplayer(player); 265 }; 266 } 267 268 /** Returns the API method for adding an event listener.**/ 269 function apiAddEventListener(player) { 270 return function(type, listener) { 271 addEventListener(player, type, listener); 272 }; 273 } 274 275 /** Returns the API method for adding an event listener.**/ 276 function apiRemoveEventListener(player) { 277 return function(type, listener) { 278 removeEventListener(player, type, listener); 279 }; 280 } 281 282 /** Add an event listener. **/ 283 function addEventListener(player, type, listener) { 284 if (player.model.listeners[type] === undefined) { 285 player.model.listeners[type] = []; 286 } 287 player.model.listeners[type].push(listener); 288 } 289 290 291 /** Remove an event listener. **/ 292 function removeEventListener(player, type, listener) { 293 for (var lisenterIndex in player.model.listeners[type]) { 294 if (player.model.listeners[type][lisenterIndex] == listener) { 295 player.model.listeners[type].slice(lisenterIndex, lisenterIndex + 1); 296 break; 297 } 298 } 299 } 300 301 /** Send an event **/ 302 function sendEvent(player) { 303 return function(type, data) { 304 for (var listener in player.model.listeners[type]) { 305 player.model.listeners[type][listener](data); 306 } 307 }; 308 } 309 310 function api(player) { 311 return { 312 id: player.model.config.id, 313 buffer: buffer(player), 314 duration: duration(player), 315 complete: complete(player), 316 fullscreen: fullscreen(player), 317 height: buffer(player), 318 load: load(player), 319 meta: meta(player), 320 mute: mute(player), 321 pause: pause(player), 322 play: play(player), 323 resize: resize(player), 324 seek: seek(player), 325 state: state(player), 326 stop: stop(player), 327 time: time(player), 328 volume: volume(player), 329 width: width(player), 330 addEventListener: apiAddEventListener(player), 331 removeEventListener: apiRemoveEventListener(player), 332 sendEvent: sendEvent(player), 333 version: '0.1-alpha' 334 }; 335 } 336 11 337 function jwplayer(selector) { 12 338 if (selector === undefined) { 13 selector = ".jwplayer:first"; 339 for (var player in players) { 340 return players[player]; 341 } 342 } else { 343 return players[selector]; 14 344 } 15 if ($.fn.jwplayerUtils.typeOf(selector) == "string") { 16 selector = $(selector); 17 } 18 return { 19 buffer: buffer(selector), 20 duration: duration(selector), 21 complete: complete(selector), 22 fullscreen: fullscreen(selector), 23 height: buffer(selector), 24 load: load(selector), 25 meta: meta(selector), 26 mute: mute(selector), 27 pause: pause(selector), 28 play: play(selector), 29 resize: resize(selector), 30 seek: seek(selector), 31 state: state(selector), 32 stop: stop(selector), 33 time: time(selector), 34 volume: volume(selector), 35 width: width(selector), 36 addEventListener: apiAddEventListener(selector), 37 removeEventListener: apiRemoveEventListener(selector), 38 events: events 39 }; 40 } 41 42 var events = { 345 return null; 346 } 347 348 $.fn.jwplayer.states = { 349 IDLE: 'IDLE', 350 BUFFERING: 'BUFFERING', 351 PLAYING: 'PLAYING', 352 PAUSED: 'PAUSED' 353 }; 354 355 $.fn.jwplayer.events = { 43 356 JWPLAYER_READY: 'jwplayerReady', 44 357 JWPLAYER_FULLSCREEN: 'jwplayerFullscreen', … … 46 359 //JWPLAYER_LOCKED: 'jwplayerLocked', 47 360 //JWPLAYER_UNLOCKED: 'jwplayerLocked', 48 //JWPLAYER_ERROR: 'jwplayerError',361 JWPLAYER_ERROR: 'jwplayerError', 49 362 JWPLAYER_MEDIA_BUFFER: 'jwplayerMediaBuffer', 50 363 //JWPLAYER_MEDIA_BUFFER_FULL: 'jwplayerMediaBufferFull', … … 64 377 }); 65 378 66 /** Hooking the controlbar up to jQuery. **/67 $.fn.jwplayer = function(options) {68 return this.each(function() {69 var player = $(this);70 player.jwplayerModel(options);71 player.jwplayerView();72 $.fn.jwplayerModel.setActiveMediaProvider(player);73 $("#"+player[0].id).jwplayerSkinner(function() {74 finishSetup(player);75 });76 });77 };78 79 function finishSetup(player) {80 player.jwplayerControlbar();81 player.trigger("JWPLAYER_READY", {82 id: player[0].id83 });84 }85 86 87 /** Map with all players on the page. **/88 $.fn.jwplayer.players = {};89 90 91 /** Map with config for the controlbar plugin. **/92 $.fn.jwplayer.defaults = {93 autostart: false,94 duration: 0,95 file: undefined,96 height: 300,97 image: undefined,98 skin: 'assets/five/five.xml',99 volume: 100,100 width: 400,101 source: 0,102 flashplayer: 'assets/player.swf'103 };104 105 106 /** Start playback or resume. **/107 function play(player) {108 return function() {109 $.fn.jwplayerController.play(player);110 return jwplayer(player);111 };112 }113 114 /** Switch the pause state of the player. **/115 function pause(player) {116 return function() {117 $.fn.jwplayerController.pause(player);118 return jwplayer(player);119 };120 }121 122 123 /** Seek to a position in the video. **/124 function seek(player) {125 return function(arg) {126 $.fn.jwplayerController.seek(player, arg);127 return jwplayer(player);128 };129 }130 131 132 /** Stop playback and loading of the video. **/133 function stop(player) {134 return function() {135 $.fn.jwplayerController.stop(player);136 return jwplayer(player);137 };138 }139 140 141 /** Change the video's volume level. **/142 function volume(player) {143 return function(arg) {144 switch ($.fn.jwplayerUtils.typeOf(arg)) {145 case "function":146 addEventListener(player, $.jwplayer().events.JWPLAYER_MEDIA_VOLUME, arg);147 break;148 case "number":149 $.fn.jwplayerController.volume(player, arg);150 break;151 case "string":152 $.fn.jwplayerController.volume(player, parseInt(arg, 10));153 break;154 default:155 return $.fn.jwplayerController.volume(player);156 }157 return jwplayer(player);158 };159 }160 161 /** Switch the mute state of the player. **/162 function mute(player, state) {163 return function(arg) {164 switch ($.fn.jwplayerUtils.typeOf(arg)) {165 case "function":166 addEventListener(player, $.jwplayer().events.JWPLAYER_MEDIA_MUTE, arg);167 break;168 case "boolean":169 $.fn.jwplayerController.mute(player, arg);170 break;171 default:172 $.fn.jwplayerController.mute(player);173 break;174 }175 return jwplayer(player);176 };177 }178 179 /** Resizing the player **/180 function resize(player, state) {181 return function(arg1, arg2) {182 switch ($.fn.jwplayerUtils.typeOf(arg)) {183 case "function":184 addEventListener(player, $.jwplayer().events.JWPLAYER_RESIZE, arg);185 break;186 case "number":187 $.fn.jwplayerController.resize(player, arg1, arg2);188 break;189 default:190 break;191 }192 return jwplayer(player);193 };194 }195 196 /** Fullscreen the player **/197 function fullscreen(player, state) {198 return function(arg) {199 switch ($.fn.jwplayerUtils.typeOf(arg)) {200 case "function":201 addEventListener(player, $.jwplayer().events.JWPLAYER_FULLSCREEN, arg);202 break;203 case "boolean":204 $.fn.jwplayerController.fullscreen(player, arg);205 break;206 default:207 return $.fn.jwplayerController.fullscreen(player);208 }209 return jwplayer(player);210 };211 }212 213 /** Adds a state listener **/214 function state(player) {215 return function(arg) {216 switch ($.fn.jwplayerUtils.typeOf(arg)) {217 case "function":218 addEventListener(player, $.jwplayer().events.JWPLAYER_PLAYER_STATE, arg);219 break;220 default:221 return $.fn.jwplayerController.mediaInfo(player).state;222 }223 return jwplayer(player);224 };225 }226 227 /** Adds a buffer listener **/228 function buffer(player) {229 return function(arg) {230 switch ($.fn.jwplayerUtils.typeOf(arg)) {231 case "function":232 addEventListener(player, $.jwplayer().events.JWPLAYER_MEDIA_BUFFER, arg);233 break;234 default:235 return $.fn.jwplayerController.mediaInfo(player).buffer;236 }237 return jwplayer(player);238 };239 }240 241 /** Returns the current time **/242 function time(player) {243 return function(arg) {244 switch ($.fn.jwplayerUtils.typeOf(arg)) {245 case "function":246 addEventListener(player, $.jwplayer().events.JWPLAYER_MEDIA_TIME, arg);247 break;248 default:249 return $.fn.jwplayerController.mediaInfo(player).time;250 }251 return jwplayer(player);252 };253 }254 255 /** Loads a new video into the player **/256 function load(player) {257 return function(arg) {258 switch ($.fn.jwplayerUtils.typeOf(arg)) {259 case "function":260 addEventListener(player, $.jwplayer().events.JWPLAYER_MEDIA_LOADED, arg);261 break;262 default:263 $.fn.jwplayerController.load(player, arg);264 }265 return jwplayer(player);266 };267 }268 269 /** Adds a listener for video completion **/270 function complete(player) {271 return function(arg) {272 addEventListener(player, $.jwplayer().events.JWPLAYER_MEDIA_COMPLETE, arg);273 return jwplayer(player);274 };275 }276 277 /** Returns the duration **/278 function duration(player) {279 return function() {280 return $.fn.jwplayerController.mediaInfo(player).duration;281 };282 }283 284 /** Adds a listener for media errors. **/285 function error(player) {286 return function(arg) {287 addEventListener(player, $.jwplayer().events.JWPLAYER_MEDIA_ERROR, arg);288 return jwplayer(player);289 };290 }291 292 293 /** Returns the width **/294 function width(player) {295 return function() {296 return $.fn.jwplayerController.mediaInfo(player).width;297 };298 }299 300 301 /** Returns the height **/302 function height(player) {303 return function() {304 return $.fn.jwplayerController.mediaInfo(player).height;305 };306 }307 308 /** Returns the available meta-data **/309 function meta(player) {310 return function() {311 switch ($.fn.jwplayerUtils.typeOf(arg)) {312 case "function":313 addEventListener(player, $.jwplayer().events.JWPLAYER_MEDIA_META, arg);314 break;315 default:316 return $.fn.jwplayerController.mediaInfo(player);317 }318 return jwplayer(player);319 };320 }321 322 /** Returns the API method for adding an event listener.**/323 function apiAddEventListener(player) {324 return function(event, listener) {325 addEventListener(player, event, listener);326 };327 }328 329 /** Returns the API method for adding an event listener.**/330 function apiRemoveEventListener(player) {331 return function(event, listener) {332 removeEventListener(player, event, listener);333 };334 }335 336 /** Add an event listener. **/337 function addEventListener(player, event, listener) {338 $(player).bind(event, listener);339 }340 341 342 /** Remove an event listener. **/343 function removeEventListener(player, event, listener) {344 $(player).unbind(event, listener);345 }346 347 379 /** Automatically initializes the player for all <video> tags with the JWPlayer class. **/ 348 380 $(document).ready(function() { -
trunk/html5/src/jquery.jwplayerMediaFlash.js
r938 r950 9 9 10 10 var controllerEvents = { 11 ERROR: "ERROR",11 ERROR: $.fn.jwplayer.events.JWPLAYER_ERROR, 12 12 ITEM: "ITEM", 13 MUTE: "MUTE",13 MUTE: $.fn.jwplayer.events.JWPLAYER_MEDIA_MUTE, 14 14 PLAY: "PLAY", 15 15 PLAYLIST: "PLAYLIST", 16 RESIZE: "RESIZE",16 RESIZE: $.fn.jwplayer.events.JWPLAYER_RESIZE, 17 17 SEEK: "SEEK", 18 18 STOP: "STOP", 19 VOLUME: "VOLUME"19 VOLUME: $.fn.jwplayer.events.JWPLAYER_MEDIA_VOLUME 20 20 }; 21 21 22 22 var modelEvents = { 23 BUFFER: "BUFFER",24 ERROR: "ERROR",25 LOADED: "LOADED",26 META: "META",27 STATE: stateHandler,28 TIME: "TIME"23 BUFFER: $.fn.jwplayer.events.JWPLAYER_MEDIA_BUFFER, 24 ERROR: $.fn.jwplayer.events.JWPLAYER_MEDIA_ERROR, 25 LOADED: $.fn.jwplayer.events.JWPLAYER_MEDIA_LOADED, 26 META: $.fn.jwplayer.events.JWPLAYER_MEDIA_META, 27 STATE: $.fn.jwplayer.events.JWPLAYER_PLAYER_STATE, 28 TIME: $.fn.jwplayer.events.JWPLAYER_MEDIA_TIME 29 29 }; 30 30 … … 44 44 VOLUME: "VOLUME" 45 45 }; 46 47 $.fn.jwplayerMediaFlash = function(options) { 48 return this.each(function() { 49 var model = $(this).data("model"); 50 //model.autostart = true; 51 model.controlbar = 'none'; 52 model.icons = false; 53 $.fn.jwplayerView.embedFlash($(this), model); 54 var media = { 55 play: play($(this)), 56 pause: pause($(this)), 57 seek: seek($(this)), 58 volume: volume($(this)), 59 mute: mute($(this)), 60 fullscreen: fullscreen($(this)), 61 state: "idle" 62 }; 63 $(this).data("media", media); 64 addEventListeners($(this)); 46 47 48 $.fn.jwplayerMediaFlash = function(player) { 49 var options = {}; 50 //options.autostart = true; 51 options.controlbar = 'none'; 52 options.icons = false; 53 $.fn.jwplayerView.embedFlash(player, options); 54 var media = { 55 play: play(player), 56 pause: pause(player), 57 seek: seek(player), 58 volume: volume(player), 59 mute: mute(player), 60 fullscreen: fullscreen(player), 61 load: load(player), 62 resize: resize(player), 63 mediaInfo: mediaInfo(player), 64 state: $.fn.jwplayer.states.IDLE 65 }; 66 player.media = media; 67 addEventListeners(player); 68 }; 69 70 function stateHandler(event, player) { 71 player.model.state = event.newstate; 72 player.sendEvent($.fn.jwplayer.events.JWPLAYER_PLAYER_STATE, { 73 oldstate: event.oldstate, 74 newstate: event.newstate 65 75 }); 66 }; 67 68 function stateHandler(event) { 69 $(event.id).data("media").state = event.newState; 70 sendEvent($(event.id), $.jwplayer().events.JWPLAYER_PLAYER_STATE, { 71 oldstate: event.oldstate, 72 newstate: event.newState 73 }); 74 } 76 } 77 75 78 76 79 function addEventListeners(player) { 77 var event; 78 if ($("#" + player[0].id)[0].addControllerListener === undefined) { 80 if (player.model.domelement[0].addControllerListener === undefined) { 79 81 setTimeout(function() { 80 82 addEventListeners(player); … … 82 84 return; 83 85 } 84 for (event in controllerEvents) { 85 $("#" + player[0].id)[0].addControllerListener(event, "$.fn.jwplayerMediaFlash.forward"); 86 var video = player.model.domelement; 87 for (var controllerEvent in controllerEvents) { 88 $.fn.jwplayerMediaFlash.forwarders[controllerEvents[controllerEvent]] = forwardFactory(controllerEvents[controllerEvent], player); 89 video[0].addControllerListener(controllerEvent, "$.fn.jwplayerMediaFlash.forwarders."+controllerEvents[controllerEvent]); 86 90 } 87 for (event in modelEvents) { 88 $("#" + player[0].id)[0].addModelListener(event, "$.fn.jwplayerMediaFlash.forward"); 91 for (var modelEvent in modelEvents) { 92 $.fn.jwplayerMediaFlash.forwarders[modelEvents[modelEvent]] = forwardFactory(modelEvents[modelEvent], player); 93 video[0].addModelListener(modelEvent, "$.fn.jwplayerMediaFlash.forwarders."+modelEvents[modelEvent]); 89 94 } 90 95 } 91 96 92 $.fn.jwplayerMediaFlash.forward = function(event) { 93 $(event.id).trigger(event.type, event); 94 }; 97 function forwardFactory(type, player){ 98 return function(event){ 99 forward(event, type, player); 100 }; 101 } 102 103 $.fn.jwplayerMediaFlash.forwarders = {}; 104 105 function forward(event, type, player) { 106 $.fn.jwplayerUtils.log(type, event); 107 switch (type) { 108 case $.fn.jwplayer.events.JWPLAYER_PLAYER_STATE: 109 stateHandler(event, player); 110 break; 111 case $.fn.jwplayer.events.JWPLAYER_MEDIA_BUFFER: 112 event.bufferPercent = event.percentage; 113 player.sendEvent(type, event); 114 break; 115 default: 116 player.sendEvent(type, event); 117 break; 118 } 119 } 95 120 96 121 function play(player) { 97 122 return function() { 98 $("#" + player[0].id)[0].sendEvent("PLAY"); 123 try { 124 player.model.domelement[0].sendEvent("PLAY"); 125 } catch (err){ 126 $.fn.jwplayerUtils.log("There was an error", err); 127 } 99 128 }; 100 129 } … … 103 132 function pause(player) { 104 133 return function() { 105 $("#" + player[0].id)[0].sendEvent("PAUSE");134 player.model.domelement[0].sendEvent("PAUSE"); 106 135 }; 107 136 } … … 111 140 function seek(player) { 112 141 return function(position) { 113 $("#" + player[0].id)[0].sendEvent("SEEK", position);142 player.model.domelement[0].sendEvent("SEEK", position); 114 143 }; 115 144 } … … 119 148 function stop(player) { 120 149 return function() { 121 $("#" + player[0].id)[0].sendEvent("STOP");150 player.model.domelement[0].sendEvent("STOP"); 122 151 }; 123 152 } … … 127 156 function volume(player) { 128 157 return function(position) { 129 $("#" + player[0].id)[0].sendEvent("VOLUME", position);158 player.model.domelement[0].sendEvent("VOLUME", position); 130 159 }; 131 160 } … … 134 163 function mute(player) { 135 164 return function(state) { 136 $("#" + player[0].id)[0].sendEvent("MUTE");165 player.model.domelement[0].sendEvent("MUTE"); 137 166 }; 138 167 } … … 144 173 }; 145 174 } 175 /** Load a new video into the player. **/ 176 function load(player) { 177 return function(path) { 178 //TODO 179 }; 180 } 181 182 /** Resizes the video **/ 183 function resize(player) { 184 return function(width, height) { 185 //TODO 186 }; 187 } 188 189 190 /** Returns the media info **/ 191 function mediaInfo(player) { 192 return function(){ 193 return { 194 width: player.model.width, 195 player: player.model.height, 196 state: player.model.state 197 }; 198 }; 199 } 146 200 147 201 })(jQuery); -
trunk/html5/src/jquery.jwplayerMediaVideo.js
r943 r950 8 8 (function($) { 9 9 var states = { 10 " buffering": "buffering",11 " ended": "idle",12 "p laying": "playing",13 " pause": "paused"10 "ended": $.fn.jwplayer.states.IDLE, 11 "playing": $.fn.jwplayer.states.PLAYING, 12 "pause": $.fn.jwplayer.states.PAUSED, 13 "buffering": $.fn.jwplayer.states.BUFFERING 14 14 }; 15 15 … … 34 34 'stalled': stateHandler, 35 35 'suspend': stateHandler, 36 'timeupdate': generalHandler,36 'timeupdate': positionHandler, 37 37 'volumechange': generalHandler, 38 38 'waiting': stateHandler, … … 45 45 46 46 47 $.fn.jwplayerMediaVideo = function(options) { 48 return this.each(function() { 49 var video = $(this); 50 var media = { 51 play: play(video), 52 pause: pause(video), 53 seek: seek(video), 54 stop: stop(video), 55 volume: volume(video), 56 mute: mute(video), 57 fullscreen: fullscreen(video), 58 load: load(video), 59 state: "idle", 60 interval: null 61 }; 62 video.data("media", media); 63 $.each(events, function(event, handler) { 64 video[0].addEventListener(event, handler, true); 65 }); 47 $.fn.jwplayerMediaVideo = function(player) { 48 var media = { 49 play: play(player), 50 pause: pause(player), 51 seek: seek(player), 52 stop: stop(player), 53 volume: volume(player), 54 mute: mute(player), 55 fullscreen: fullscreen(player), 56 load: load(player), 57 resize: resize(player), 58 mediaInfo: mediaInfo(player), 59 state: $.fn.jwplayer.states.IDLE, 60 interval: null 61 }; 62 player.media = media; 63 $.each(events, function(event, handler) { 64 player.model.domelement[0].addEventListener(event, function(event) { 65 handler(event, player); 66 }, true); 66 67 }); 67 68 }; 68 69 69 function generalHandler(event ) {70 function generalHandler(event, player) { 70 71 //$.fn.jwplayerUtils.log("general:" + event.type); 71 72 } 72 73 73 function stateHandler(event ) {74 function stateHandler(event, player) { 74 75 if (states[event.type]) { 75 setState( event.target, states[event.type]);76 } 77 } 78 79 function setState(player, new State) {80 if ( $(player).data("media").state != newState) {81 var old State = $(player).data("media").state;82 $(player).data("media").state = newState;83 sendEvent( $(player), $.jwplayer().events.JWPLAYER_PLAYER_STATE, {84 oldstate: old State,85 newstate: new State86 }); 87 } 88 if (new State == 'idle') {89 clearInterval( $(player).data("media").interval);90 $(player).data("media").interval = null;91 } 92 } 93 94 function metaHandler(event ) {95 sendEvent($(event.target), $.jwplayer().events.JWPLAYER_MEDIA_META,{96 videoHeight: event.target.videoHeight,97 videoWidth: event.target.videoWidth,76 setState(player, states[event.type]); 77 } 78 } 79 80 function setState(player, newstate) { 81 if (player.model.state != newstate) { 82 var oldstate = player.model.state; 83 player.model.state = newstate; 84 sendEvent(player, $.fn.jwplayer.events.JWPLAYER_PLAYER_STATE, { 85 oldstate: oldstate, 86 newstate: newstate 87 }); 88 } 89 if (newstate == $.fn.jwplayer.states.IDLE) { 90 clearInterval(player.media.interval); 91 player.media.interval = null; 92 } 93 } 94 95 function metaHandler(event, player) { 96 var meta = { 97 height: event.target.videoHeight, 98 width: event.target.videoWidth, 98 99 duration: event.target.duration 99 }); 100 } 101 102 function positionHandler(event) { 103 if ($(event.target).data("media").interval === null) { 104 $(event.target).data("media").interval = window.setInterval(function() { 105 positionHandler(event); 100 }; 101 player.model = $.extend(player.model, meta); 102 sendEvent(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_META, meta); 103 } 104 105 function positionHandler(event, player) { 106 if (player.media.interval === null) { 107 player.media.interval = window.setInterval(function() { 108 positionHandler(event, player); 106 109 }, 100); 107 110 } 108 sendEvent( $(event.target), $.jwplayer().events.JWPLAYER_MEDIA_TIME, {111 sendEvent(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_TIME, { 109 112 position: event.target.currentTime, 110 113 duration: event.target.duration … … 112 115 } 113 116 114 function progressHandler(event ) {117 function progressHandler(event, player) { 115 118 var buffer; 116 119 if (!isNaN(event.loaded / event.total)) { 117 120 buffer = event.loaded / event.total * 100; 118 } else if ( event.target.buffered !== undefined) {119 buffer = event.target.buffered.end(0) / event.target.duration * 100;120 } 121 sendEvent( $(event.target), $.jwplayer().events.JWPLAYER_MEDIA_BUFFER, {121 } else if (player.model.domelement.buffered !== undefined) { 122 buffer = player.model.domelement.buffered.end(0) / player.model.domelement.duration * 100; 123 } 124 sendEvent(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_BUFFER, { 122 125 'bufferPercent': buffer 123 126 }); 124 127 } 125 128 126 function errorHandler(event ) {127 sendEvent( $(event.target), $.jwplayer().events.JWPLAYER_ERROR, {});129 function errorHandler(event, player) { 130 sendEvent(player, $.fn.jwplayer.events.JWPLAYER_ERROR, {}); 128 131 } 129 132 130 133 function play(player) { 131 134 return function() { 132 player [0].play();135 player.model.domelement[0].play(); 133 136 }; 134 137 } … … 137 140 function pause(player) { 138 141 return function() { 139 player [0].pause();142 player.model.domelement[0].pause(); 140 143 }; 141 144 } … … 145 148 function seek(player) { 146 149 return function(position) { 147 player [0].currentTime = position;150 player.model.domelement[0].currentTime = position; 148 151 }; 149 152 } … … 153 156 function stop(player) { 154 157 return function() { 155 player [0].pause();156 player [0].currentTime = 0;157 clearInterval( $(player).data("media").interval);158 $(player).data("media").interval = null;159 setState(player, 'idle');158 player.model.domelement[0].pause(); 159 player.model.domelement[0].currentTime = 0; 160 clearInterval(player.media.interval); 161 player.media.interval = null; 162 setState(player, $.fn.jwplayer.states.IDLE); 160 163 }; 161 164 } … … 165 168 function volume(player) { 166 169 return function(position) { 167 player [0].volume = position / 100;168 sendEvent(player, $. jwplayer().events.JWPLAYER_MEDIA_VOLUME, {169 volume: player [0].volume170 player.model.domelement[0].volume = position / 100; 171 sendEvent(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_VOLUME, { 172 volume: player.model.domelement[0].volume 170 173 }); 171 174 }; … … 175 178 function mute(player) { 176 179 return function(state) { 177 player [0].muted = state;178 sendEvent(player, $. jwplayer().events.JWPLAYER_MEDIA_MUTE, {179 mute: player [0].muted180 player.model.domelement[0].muted = state; 181 sendEvent(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_MUTE, { 182 mute: player.model.domelement[0].muted 180 183 }); 181 184 }; … … 187 190 player.css("width", width); 188 191 player.css("height", height); 189 sendEvent(player, $. jwplayer().events.JWPLAYER_MEDIA_RESIZE, {192 sendEvent(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_RESIZE, { 190 193 width: width, 191 194 hieght: height … … 200 203 player.css("width", window.width); 201 204 player.css("height", window.height); 202 sendEvent(player, $. jwplayer().events.JWPLAYER_MEDIA_RESIZE, {205 sendEvent(player, $.fn.jwplayer.events.JWPLAYER_MEDIA_RESIZE, { 203 206 width: width, 204 207 hieght: height … … 217 220 } 218 221 222 /** Returns the media info **/ 223 function mediaInfo(player) { 224 return function(){ 225 return { 226 width: player.model.width, 227 player: player.model.height, 228 state: player.model.state 229 }; 230 }; 231 } 232 219 233 function sendEvent(player, type, data) { 220 player. trigger(type, $.extend({221 id: player [0].id,222 version: $.jwplayer(player).version234 player.sendEvent(type, $.extend({ 235 id: player.model.config.id, 236 version: player.version 223 237 }, data)); 224 238 } -
trunk/html5/src/jquery.jwplayerModel.js
r935 r950 7 7 */ 8 8 (function($) { 9 var jwplayerid = 1; 10 11 var modelParams ={ 12 volume: 100, 13 fullscreen: false, 14 mute: false, 15 width: 480, 16 height: 320, 17 duration: 0 18 }; 19 20 function createModel(){ 21 return { 22 config: {}, 23 sources: {}, 24 listeners: {}, 25 state: $.fn.jwplayer.states.IDLE, 26 source: 0, 27 buffer: 0 28 }; 29 } 9 30 10 $.fn.jwplayerModel = function(options) { 11 return this.each(function() { 12 $(this).jwplayerParse(options); 13 }); 31 32 $.fn.jwplayerModel = function(domElement, options) { 33 var model = createModel(); 34 model.config = $.fn.jwplayerParse(domElement[0], options); 35 if (model.config.id === undefined) { 36 model.config.id = "jwplayer_"+jwplayerid++; 37 } 38 model.sources = model.config.sources; 39 delete model.config.sources; 40 model.domelement = domElement; 41 for (var modelParam in modelParams) { 42 if (model.config[modelParam] !== undefined) { 43 model[modelParam] = model.config[modelParam]; 44 } else { 45 model[modelParam] = modelParams[modelParam]; 46 } 47 } 48 return model; 14 49 }; 15 50 16 51 $.fn.jwplayerModel.setActiveMediaProvider = function(player) { 17 52 var source, sourceIndex; 18 var model = player.data("model"); 19 for (sourceIndex in model.sources) { 20 source = model.sources[sourceIndex]; 53 for (sourceIndex in player.model.sources) { 54 source = player.model.sources[sourceIndex]; 21 55 if (source.type === undefined) { 22 56 source.type = 'video/' + $.fn.jwplayerUtils.extension(source.file) + ';'; 23 57 } 24 58 if ($.fn.jwplayerUtils.supportsType(source.type)) { 25 model.source = sourceIndex;26 player.jwplayerMediaVideo();59 player.model.source = sourceIndex 60 $.fn.jwplayerMediaVideo(player); 27 61 return true; 28 62 } 29 63 } 30 if ($.fn.jwplayerUtils.supportsFlash && model.state != 'playing') {31 for (sourceIndex in model.sources) {32 source = model.sources[sourceIndex];64 if ($.fn.jwplayerUtils.supportsFlash && player.state != $.fn.jwplayer.states.PLAYING) { 65 for (sourceIndex in player.model.sources) { 66 source = player.model.sources[sourceIndex]; 33 67 if ($.fn.jwplayerUtils.flashCanPlay(source.file)) { 34 model.source = sourceIndex;35 player.jwplayerMediaFlash();68 player.model.source = sourceIndex; 69 $.fn.jwplayerMediaFlash(player); 36 70 return true; 37 71 } -
trunk/html5/src/jquery.jwplayerParse.js
r935 r950 35 35 var parsers = {}; 36 36 37 $.fn.jwplayerParse = function(options) { 38 return this.each(function() { 39 $(this).data("model", $.extend(true, {}, $.fn.jwplayer.defaults, options, parseElement(this))); 40 }); 37 $.fn.jwplayerParse = function(player, options) { 38 return $.extend(true, {}, $.fn.jwplayer.defaults, options, parseElement(player)); 41 39 }; 42 40 … … 64 62 } 65 63 } 66 configuration.screencolor = $(domElement).css("background-color");64 configuration.screencolor = ($(domElement).css("background-color") == "transparent") ? "#ffffff" : $(domElement).css("background-color"); 67 65 return configuration; 68 66 } -
trunk/html5/src/jquery.jwplayerSkinner.js
r942 r950 10 10 11 11 /** Constructor **/ 12 $.fn.jwplayerSkinner = function(completeHandler) { 13 return this.each(function() { 14 load($(this), completeHandler); 15 }); 12 $.fn.jwplayerSkinner = function(player, completeHandler) { 13 load(player, completeHandler); 16 14 }; 17 15 18 16 /** Load the skin **/ 19 17 load = function (player, completeHandler){ 20 $.get(player. data("model").skin, {}, function(xml) {18 $.get(player.model.config.skin, {}, function(xml) { 21 19 var skin = { 22 20 properties:{}, … … 41 39 skin[componentName] = component; 42 40 } 43 player. data("skin", skin);41 player.skin = skin; 44 42 }); 45 43 }; … … 50 48 var elementName = $(element).attr('name'); 51 49 var elementSource = $(element).attr('src'); 52 var skinUrl = player. data("model").skin.substr(0, player.data("model").skin.lastIndexOf('/'));50 var skinUrl = player.model.config.skin.substr(0, player.model.config.skin.lastIndexOf('/')); 53 51 $(img).error(function() { 54 player. data("skin").incompleteElements--;52 player.skin.incompleteElements--; 55 53 }); 56 54 $(img).load(function() { 57 player. data("skin")[component].elements[elementName] = {55 player.skin[component].elements[elementName] = { 58 56 height: this.height, 59 57 width: this.width, 60 58 src: this.src 61 59 }; 62 player. data("skin").incompleteElements--;63 if (player. data("skin").incompleteElements === 0) {60 player.skin.incompleteElements--; 61 if (player.skin.incompleteElements === 0) { 64 62 completeHandler(); 65 63 } … … 69 67 70 68 $.fn.jwplayerSkinner.hasComponent = function (player, component){ 71 return (player. data("skin")[component] !== null);69 return (player.skin[component] !== null); 72 70 }; 73 71 … … 75 73 $.fn.jwplayerSkinner.getSkinElement = function (player, component, element){ 76 74 try { 77 return player. data("skin")[component].elements[element];75 return player.skin[component].elements[element]; 78 76 } catch (err) { 79 77 $.fn.jwplayerUtils.log("No such skin component / element: ", [player, component, element]); … … 85 83 $.fn.jwplayerSkinner.addSkinElement = function (player, component, name, element){ 86 84 try { 87 player. data("skin")[component][name] = element;85 player.skin[component][name] = element; 88 86 } catch (err){ 89 87 $.fn.jwplayerUtils.log("No such skin component ", [player, component]); … … 92 90 93 91 $.fn.jwplayerSkinner.getSkinProperties = function (player){ 94 return player. data("skin").properties;92 return player.skin.properties; 95 93 }; 96 94 -
trunk/html5/src/jquery.jwplayerView.js
r949 r950 19 19 }; 20 20 21 $.fn.jwplayerView = function() { 22 return this.each(function() { 23 var video = $(this); 24 if ($(this).attr("src") !== "") { 25 $(this).attr("preload", "metadata"); 26 $(this).append('<source src="' + $(this).attr("src") + '" >'); 27 $(this).removeAttr("src"); 21 $.fn.jwplayerView = function(player) { 22 /*if (!(($(this).attr("src") === undefined) || ($(this).attr("src") === ""))) { 23 $(this).attr("preload", "metadata"); 24 $(this).append('<source src="' + $(this).attr("src") + '" >'); 25 $(this).removeAttr("src"); 26 }*/ 27 player.model.domelement.wrap("<div id='" + player.model.config.id + "_jwplayer' />"); 28 player.model.domelement.parent().css("position", "relative"); 29 //$(this).css("display", "none"); 30 player.model.domelement.css("position", "absolute"); 31 player.model.domelement.css("left", "0px"); 32 player.model.domelement.css("top", "0px"); 33 player.model.domelement.css("z-index", "0"); 34 player.model.domelement.before("<a href='" + player.model.sources[player.model.source].file + "' style='display:block; background:#ffffff url(" + player.model.config.image + ") no-repeat center center;width:" + player.model.width + "px;height:" + player.model.height + "px;position:relative;'><img src='http://content.bitsontherun.com/staticfiles/play.png' alt='Click to play video' style='position:absolute; top:" + (player.model.height - 60) / 2 + "px; left:" + (player.model.width - 60) / 2 + "px; border:0;' /></a>"); 35 player.model.domelement.prev("a").css("position", "relative"); 36 player.model.domelement.prev("a").css("z-index", "100"); 37 player.model.domelement.prev("a").click(function(evt) { 38 if (typeof evt.preventDefault != 'undefined') { 39 evt.preventDefault(); // W3C 40 } else { 41 evt.returnValue = false; // IE 28 42 } 29 $(this).wrap("<div id='" + $(this)[0].id + "_jwplayer' />"); 30 $(this).parent().css("position", "relative"); 31 //$(this).css("display", "none"); 32 $(this).css("position", "absolute"); 33 $(this).css("left", "0px"); 34 $(this).css("top", "0px"); 35 $(this).css("z-index", "0"); 36 $(this).before("<a href='" + $(this).data("model").sources[$(this).data("model").source].file + "' style='display:block; background:#ffffff url(" + $(this).data("model").image + ") no-repeat center center;width:" + $(this).data("model").width + "px;height:" + $(this).data("model").height + "px;position:relative;'><img src='http://content.bitsontherun.com/staticfiles/play.png' alt='Click to play video' style='position:absolute; top:" + ($(this).data("model").height - 60) / 2 + "px; left:" + ($(this).data("model").width - 60) / 2 + "px; border:0;' /></a>"); 37 $(this).prev("a").css("position", "relative"); 38 $(this).prev("a").css("z-index", "100"); 39 $(this).prev("a").click(function(evt) { 40 if (typeof evt.preventDefault != 'undefined') { 41 evt.preventDefault(); // W3C 42 } else { 43 evt.returnValue = false; // IE 44 } 45 $.jwplayer(video).play(); 46 }); 47 $.jwplayer(video).state(imageHandler); 43 if (player.state() !== $.fn.jwplayer.states.PLAYING){ 44 player.play(); 45 } else { 46 player.pause(); 47 } 48 49 }); 50 $.jwplayer(player.model.config.id).state(function(obj) { 51 imageHandler(obj, player); 48 52 }); 49 53 }; 50 54 51 function imageHandler(event, parameters) { 52 $.fn.jwplayerUtils(event.target); 53 switch (parameters.newstate) { 54 case 'idle': 55 $(event.target).css("z-index", "0"); 56 $(event.target).prev("a").css("z-index", "100"); 55 function imageHandler(obj, player) { 56 switch (obj.newstate) { 57 case $.fn.jwplayer.states.IDLE: 58 player.model.domelement.css("z-index", "0"); 59 player.model.domelement.prev("a").css("z-index", "100"); 57 60 break; 58 case 'playing':59 $(event.target).prev("a").css("z-index", "0");60 $(event.target).css("z-index", "100");61 case $.fn.jwplayer.states.PLAYING: 62 player.model.domelement.prev("a").css("z-index", "0"); 63 player.model.domelement.css("z-index", "100"); 61 64 break; 62 65 } 63 66 } 64 67 68 $.fn.jwplayerView.switchMediaProvider = function(){ 69 70 }; 71 65 72 /** Embeds a Flash Player at the specified location in the DOM. **/ 66 $.fn.jwplayerView.embedFlash = function( domElement, model) {67 if ( model.flashplayer !== false) {73 $.fn.jwplayerView.embedFlash = function(player, options) { 74 if (player.model.config.flashplayer !== false) { 68 75 var htmlString, elementvarString = "", flashvarString = ""; 69 76 if (navigator.plugins && navigator.mimeTypes && navigator.mimeTypes.length) { … … 73 80 } 74 81 for (var elementvar in elementvars) { 75 if (!(( model[elementvar] === undefined) || (model[elementvar] === "") || (model[elementvar] === null))) {76 elementvarString += elementvar + "='" + model[elementvar] + "'";82 if (!((player.model.config[elementvar] === undefined) || (player.model.config[elementvar] === "") || (player.model.config[elementvar] === null))) { 83 elementvarString += elementvar + "='" + player.model.config[elementvar] + "'"; 77 84 } 78 85 } 79 for (var flashvar in model) { 80 if (!((model[flashvar] === undefined) || (model[flashvar] === "") || (model[flashvar] === null))) { 81 if (flashvar == "sources") { 82 flashvarString += "file=" + model.sources[model.source].file + "&"; 83 } else { 84 flashvarString += flashvar + "=" + model[flashvar] + "&"; 85 } 86 flashvarString += "file=" + player.model.sources[player.model.source].file + "&"; 87 var config = $.extend(true, {}, player.model.config, options); 88 for (var flashvar in config) { 89 if (!((config[flashvar] === undefined) || (config[flashvar] === "") || (config[flashvar] === null))) { 90 flashvarString += flashvar + "=" + config[flashvar] + "&"; 86 91 } 87 92 } 88 93 htmlString = htmlString.replace("%elementvars%", elementvarString); 89 94 htmlString = htmlString.replace("%flashvars%", flashvarString); 90 htmlString = htmlString.replace("%flashplayer%", model.flashplayer);95 htmlString = htmlString.replace("%flashplayer%", player.model.config.flashplayer); 91 96 htmlString = htmlString.replace("%style%", styleString); 92 $(domElement).before(htmlString);93 var result = $(domElement).prev();94 $(domElement).remove();95 return result;97 player.model.domelement.before(htmlString); 98 var oldDOMElement = player.model.domelement; 99 player.model.domelement = player.model.domelement.prev(); 100 oldDOMElement.remove(); 96 101 } 97 102 };
Note: See TracChangeset
for help on using the changeset viewer.
