, so we clone it to use it to restore it when destroy()ing the plugin
134 | this.elements.playerObjectClone = this.elements.playerObject.clone();
135 |
136 | this.keys = { video: 0 };
137 |
138 | // swfobject requires the video object
to have an id set
139 | var id;
140 | do {
141 | id = 'jqueryyoutubeplayer' + Math.floor( Math.random() * 101 ).toString();
142 |
143 | } while( document.getElementById(id) );
144 |
145 | this.elements.playerObject[0].id = id;
146 |
147 | (this.options.swfobject.getFlashPlayerVersion().major >= 8)
148 |
149 | && this.loadPlaylist(null, null, null, function(){
150 |
151 | // build everything and set event handlers
152 | self
153 | ._bindYoutubeEventHandlers()
154 | ._createToolbar()
155 | ._createTimeArea()
156 | ._createPlayer();
157 | });
158 | }
159 |
160 | // public members
161 | player.prototype = {
162 |
163 | _activeStates: [], timer: {}, videoIds: [],
164 |
165 | _trigger : function(scope, callback, arg){
166 |
167 | var type = typeof callback;
168 |
169 | arg = arg || [];
170 |
171 | if ( type === 'string' && this.options[ callback ] && $.isFunction(this.options[ callback ]) ) {
172 |
173 | return this.options[ callback ].apply( scope, arg );
174 |
175 | } else if ( type === 'function' ) {
176 |
177 | callback.apply( scope, arg );
178 | }
179 | },
180 |
181 | _bindYoutubeEventHandlers : function(){
182 |
183 | var self = this;
184 |
185 | function ready(id){
186 |
187 | self.youtubePlayer = document.getElementById(id);
188 |
189 | self._trigger(self, 'onPlayerReady', [ id ]);
190 |
191 | self.loadVideo(false, true);
192 |
193 | self.elements.toolbar.container
194 | .animate(self.options.toolbarAnimation, self.options.toolbarSpeed, function(){
195 |
196 | self._trigger(self, 'onReady', [ id ]);
197 | });
198 |
199 | self._showPlaylist(function(){
200 |
201 | ( self.keys.play ) && self.playVideo();
202 | });
203 | }
204 |
205 | function videoPaused(){
206 |
207 | self._trigger(this, 'onVideoPaused', [ self._getVideo() ]);
208 | }
209 |
210 | function videoEnded(){
211 |
212 | self.buttons.play.element && self.buttons.play.element.trigger( 'off' );
213 |
214 | if (self.options.repeat) {
215 |
216 | self.nextVideo();
217 | }
218 | }
219 |
220 | function error(state){
221 |
222 | switch(state){
223 | case 100:
224 | msg = 'This video has been removed from Youtube.';
225 | break;
226 | case 101:
227 | case 150:
228 | msg = 'This video does not allow playback outside of Youtube.';
229 | break;
230 | default:
231 | msg = 'Unknown error';
232 | }
233 | if (self._trigger(this, 'onError', [msg]) === undefined){
234 |
235 | alert( 'There was an error loading this video. ' + msg );
236 | }
237 | }
238 |
239 | function videoCued(){
240 |
241 | self._updatePlaylist();
242 |
243 | self.elements.toolbar.updateStates();
244 |
245 | self._trigger(this, 'onVideoCue', arguments);
246 | }
247 |
248 | function videoBuffer(){
249 |
250 | self._trigger(this, 'onBuffer', [ self._getVideo() ]);
251 | }
252 |
253 | function videoPlay(){
254 |
255 | self._updatePlaylist();
256 |
257 | self._addState('play');
258 |
259 | self.elements.toolbar.updateStates();
260 |
261 | self._updateTime();
262 |
263 | // update the location hash
264 |
265 | self._trigger(this, 'onVideoPlay', [ self._getVideo() ]);
266 | }
267 |
268 | var id = this.elements.playerObject[0].id;
269 |
270 | window['onytplayerStateChange' + id] = function(state){
271 |
272 | // reset the youtube player states every time an event is executed
273 | self._removeStates([ -1, 0, 1, 2, 3, 5, 100, 101, 150, 9 ]);
274 |
275 | // add a new youtube state
276 | self._addState(state, true);
277 |
278 | switch(state) {
279 | case 0 : videoEnded(); break;
280 | case 1 : videoPlay(); break;
281 | case 2 : videoPaused(); break;
282 | case 3 : videoBuffer(); break;
283 | case 9 : ready(id); break;
284 | case 5 : videoCued(); break;
285 | case 100: case 101: case 150: error( state ); break;
286 | }
287 |
288 | self._trigger(self, 'onYoutubeStateChange', [ state ]);
289 | };
290 |
291 | if ( !window.onYouTubePlayerReady ){
292 |
293 | window.onYouTubePlayerReady = function(id){
294 |
295 | var player = document.getElementById(id);
296 |
297 | player.addEventListener("onStateChange", 'onytplayerStateChange' + id);
298 |
299 | player.addEventListener('onError', 'onytplayerStateChange' + id);
300 |
301 | window['onytplayerStateChange' + id](9);
302 | };
303 | }
304 |
305 | return this;
306 | },
307 |
308 | _createPlayer : function(){
309 |
310 | // set the player dimensions
311 | this.elements.player.width( this.options.width );
312 | this.elements.playerVideo.height( this.options.height );
313 |
314 | var
315 | id = this.options.playlist.videos[this.keys.video].id,
316 | apiid = this.elements.playerObject[0].id,
317 | swfpath =
318 | this.options.chromeless
319 | ? 'http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid='+apiid+'&hd=' + this.options.highDef + '&showinfo=0'
320 | : 'http://www.youtube.com/v/' + id + '?enablejsapi=1&playerapiid='+apiid+'&version=3';
321 |
322 | this._trigger(this, 'onBeforePlayerBuild');
323 |
324 | // embed the youtube player
325 | this.options.swfobject.embedSWF( swfpath, this.elements.playerObject[0].id, '100%', '100%', '8', null, null, this.options.videoParams);
326 |
327 | return this;
328 | },
329 |
330 | _createToolbar : function(){
331 |
332 | var self = this;
333 |
334 | this.elements.toolbar = {
335 | container: $('
')
336 | .addClass('youtube-player-toolbar ui-widget ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all')
337 | .css('opacity', 0),
338 | updateStates : function(){
339 |
340 | self.elements.toolbar.container.find('li').each(function(){
341 |
342 | var button = $(this).removeClass('ui-state-active').data('button');
343 |
344 | if (!button) return true;
345 |
346 | (self._state(button.val)) &&
347 | (button.toggle) &&
348 | $(this).addClass('ui-state-active');
349 |
350 | (self._state(button.val) && button.toggleButton) && $(this).trigger('on');
351 | });
352 | }
353 | };
354 |
355 | ( this.options.showToolbar != null && !this.options.showToolbar )
356 | && this.elements.toolbar.container.hide();
357 |
358 | $.each(this.options.toolbar.split(','), function(key, val) {
359 |
360 | var button = self.buttons[val];
361 |
362 | if (!button || !button.text) return true;
363 |
364 | button.val = val;
365 |
366 | self._states[val] = self._states[val] || val;
367 |
368 | $('
')
369 | .addClass('ui-state-default ui-corner-all')
370 | .append('
')
371 | .attr('title', button.text)
372 | .data('button', button)
373 | .bind('mouseenter mouseleave', function(){
374 |
375 | $(this).toggleClass('ui-state-hover');
376 | })
377 | .bind('off', function(){
378 |
379 | var elem = $(this), button = elem.data('button'), toggle = 1;
380 |
381 | elem.data('toggle', toggle);
382 |
383 | self._removeState(val);
384 |
385 | elem.find('.ui-icon')
386 | .removeClass( button.toggleButton.icon )
387 | .addClass( button.icon )
388 | .end()
389 | .attr('title', button.text);
390 |
391 | self._trigger(self, button.toggleButton.action, [ button ] );
392 | })
393 | .bind('on', function(){
394 |
395 | var elem = $(this), button = elem.data('button'), toggle = 0;
396 |
397 | elem.data('toggle', toggle);
398 |
399 | self._addState(val);
400 |
401 | elem
402 | .find('.ui-icon')
403 | .removeClass( button.icon )
404 | .addClass( button.toggleButton.icon )
405 | .end()
406 | .attr('title', button.toggleButton.text)
407 |
408 | self._trigger(self, button.action, [ button ] );
409 | })
410 | .bind('toggle', function(){
411 |
412 | var toggle = $(this).data('toggle');
413 |
414 | ( toggle || toggle == undefined) ? $(this).trigger('on') : $(this).trigger('off');
415 | })
416 | .click(function(){
417 |
418 | var button = $(this).data('button'),
419 | state = self._state(val);
420 |
421 | if (button.toggleButton) {
422 |
423 | $(this).trigger('toggle');
424 | } else {
425 |
426 | self._trigger(self, button.action, [ button ] );
427 |
428 | ( !button.toggle || ( button.toggle && state ) )
429 | ? self._removeState(val)
430 | : self._addState(val);
431 |
432 | self.elements.toolbar.updateStates();
433 | }
434 | })
435 | .appendTo(self.elements.toolbar.container);
436 | });
437 |
438 | (this.options.toolbarAppendTo) ?
439 | this.elements.toolbar.container.appendTo( this.options.toolbarAppendTo ) :
440 | this.elements.playerVideo.after( this.elements.toolbar.container );
441 |
442 | return this;
443 | },
444 |
445 | _createTimeArea : function(){
446 |
447 | this.elements.toolbar.time =
448 | this.options.timeAppendTo
449 | ? $('
').appendTo( this.options.timeAppendTo )
450 | : $('
').addClass('youtube-player-time').appendTo( this.elements.toolbar.container );
451 |
452 | this.elements.toolbar.timeCurrent = $('
').html('0:00').appendTo(this.elements.toolbar.time);
453 |
454 | this.elements.toolbar.timeDuration = $('
').appendTo(this.elements.toolbar.time);
455 |
456 | return this;
457 | },
458 |
459 | _createPlaylist : function(){
460 |
461 | var self = this;
462 |
463 | function videoClickHandler(){
464 |
465 | // try get the video object from element data
466 | var videoData = $( this ).data( 'video' );
467 | if (!videoData) return;
468 |
469 | // set the video key
470 | self.keys.video = $.inArray( videoData.id, self.videoIds );
471 |
472 | // reset state
473 | self._removeState('play');
474 |
475 | // update the playlist now that the new video has been selected
476 | self._updatePlaylist();
477 |
478 | // load the video into the flash player
479 | self.loadVideo();
480 |
481 | // play it
482 | self.playVideo();
483 | }
484 |
485 | function buildPlaylist(){
486 |
487 | self.elements.playlist = self.elements.playlist
488 | || $('
').addClass('youtube-player-playlist ui-helper-reset');
489 |
490 | self.elements.playlistContainer = self.elements.playlistContainer
491 | || $('
')
492 | .addClass('youtube-player-playlist-container ui-widget-content ui-corner-all')
493 | .html( self.elements.playlist );
494 | };
495 |
496 | this._addVideosToPlaylist = function(cue){
497 |
498 | // get this list of vidoes to add to the playlist
499 | // if cueing, we only want to add 1 video, so we find the last video added to playlist
500 | var videos = cue
501 | ? [ self.options.playlist.videos[self.options.playlist.videos.length - 1] ]
502 | : self.options.playlist.videos;
503 |
504 |
505 | // if we're not cueing the videos then we empty the playlist and reset the video id list
506 | if (!cue) {
507 |
508 | self.elements.playlist.empty();
509 |
510 | self.videoIds = [];
511 | }
512 |
513 | $.each(videos, function(){
514 |
515 | self.videoIds.push(this.id);
516 |
517 | $('
')
518 | .data('video', this)
519 | .append( self.options.videoThumbs ? '
' : this.title)
520 | .addClass('ui-state-default')
521 | .addClass( self.options.videoThumbs ? 'youtube-player-thumb' : '' )
522 | .bind('mouseenter mouseleave', function(){
523 |
524 | $( this ).toggleClass( 'ui-state-hover' );
525 | })
526 | .appendTo(self.elements.playlist);
527 | });
528 |
529 | self._trigger(self, 'onAfterVideosAddedToPlaylist');
530 | };
531 |
532 | this._bindPlaylistClickHandler = function(playlist){
533 |
534 | playlist
535 | .items
536 | .click(function(){
537 |
538 | self._trigger(this, videoClickHandler, arguments);
539 |
540 | self._trigger(self, 'playlistBuilderClickHandler', arguments);
541 | });
542 | };
543 |
544 | var playlistBuilder;
545 |
546 | if ( !$.isFunction( this.options.playlistBuilder )){
547 |
548 | buildPlaylist();
549 |
550 | this._addVideosToPlaylist();
551 |
552 | (this.options.playlistAppendTo)
553 | // append playlist to specified element
554 | ? this.elements.playlistContainer.appendTo( this.options.playlistAppendTo )
555 | // insert playlist after the toolbar
556 | : this.elements.toolbar.container.after( this.elements.playlistContainer );
557 |
558 | playlistBuilder = function(){
559 | return {
560 | items: self.elements.playlist.find('li'),
561 | container: self.elements.playlistContainer
562 | }
563 | };
564 |
565 | } else {
566 |
567 | playlistBuilder = this.options.playlistBuilder;
568 | }
569 |
570 | // reset the list of video ids
571 | $.each(this.options.playlist.videos, function(){
572 |
573 | self.videoIds.push( this.id );
574 | });
575 |
576 | // build the playlist
577 | var playlist = playlistBuilder.call(this, this.options.playlist.videos);
578 |
579 | // add the playlist to the DOM
580 | this.elements.playlistContainer = playlist.container;
581 |
582 | // bind video click handler
583 | this._bindPlaylistClickHandler(playlist);
584 |
585 | return this;
586 | },
587 |
588 | _updateTime : function(){
589 |
590 | if (!this.options.showTime) return;
591 |
592 | var self = this, duration = Number( this.youtubePlayer.getDuration() );
593 |
594 | function timeFormat(seconds) {
595 |
596 | var m = Math.floor( seconds / 60), s = (seconds % 60).toFixed(0);
597 |
598 | return m + ':' + ( s < 10 ? '0' + s : s);
599 | }
600 |
601 | this.elements.toolbar.timeDuration.html( ' / ' + timeFormat( duration ));
602 |
603 | this.elements.toolbar.time.fadeIn();
604 |
605 | this.timeInterval = setInterval(function(){
606 |
607 | ( !self.youtubePlayer.getCurrentTime )
608 | ? clearInterval( self.timeInterval )
609 | : self.elements.toolbar.timeCurrent.html( timeFormat( self.youtubePlayer.getCurrentTime() ) );
610 | }, 100);
611 | },
612 |
613 | _removeStates : function(states){
614 |
615 | var newArray = [];
616 |
617 | $.each(this._activeStates, function(key, value){
618 |
619 | ($.inArray(value, states) === -1
620 | && $.inArray(value, newArray) === -1)
621 | && newArray.push(value);
622 | });
623 |
624 | this._activeStates = newArray;
625 | },
626 |
627 | _removeState : function(state){
628 |
629 | state = typeof state === 'string' ? this._states[ state ] : state;
630 |
631 | this._removeStates([ state ]);
632 | },
633 |
634 | _state : function(state, remove){
635 |
636 | state = this._states[ state ];
637 |
638 | return $.inArray(state, this._activeStates) !== -1 ? true : false;
639 | },
640 |
641 | _addState : function(state, stateID){
642 |
643 | if (stateID) {
644 |
645 | $.inArray(state, this._activeStates) === -1
646 | && this._activeStates.push( state );
647 |
648 | } else {
649 |
650 | this._states[ state ]
651 | && $.inArray(this._states[ state ], this._activeStates) === -1
652 | && this._activeStates.push( this._states[ state ] );
653 | }
654 | },
655 |
656 | _setVideoKey : function(val){
657 |
658 | this.keys.video = this.options.shuffle ? this.options.randomVideo() : val || 0;
659 | },
660 |
661 | _getVideo : function(){
662 |
663 | return this.options.playlist.videos[ this.keys.video ];
664 | },
665 |
666 | _findVideo : function(id){
667 |
668 | var index = -1;
669 |
670 | $.each(this.options.playlist.videos, function(key, val){
671 |
672 | if (id == val.id) {
673 |
674 | index = key;
675 |
676 | return false; // break
677 | }
678 | });
679 |
680 | return index;
681 | },
682 |
683 | _getPlaylistData : function(success, error){
684 |
685 | var self = this, playlist = this.options.playlist;
686 |
687 | if (playlist.user || playlist.playlist) {
688 |
689 | function ajaxSuccess(json){
690 |
691 | if (!json) {
692 | error.call( self );
693 | return;
694 | }
695 |
696 | // replace playlist ID with json array
697 | self.options.playlist = {
698 | title: json.feed.title.$t,
699 | id: playlist,
700 | videos: []
701 | };
702 |
703 | $.each(json.feed.entry, function(key, vid){
704 | self.options.playlist.videos.push({
705 | id: vid.link[0].href.replace(self._youtubeIdExp, '$1'), // munge video id from href
706 | title: vid.title.$t
707 | });
708 | });
709 |
710 | self.elements.playerObject.fadeOut(180, function(){ success.call( self ); });
711 | }
712 |
713 | var url = playlist.user
714 | ? 'http://gdata.youtube.com/feeds/api/videos'
715 | : 'http://gdata.youtube.com/feeds/api/playlists/' + playlist.playlist;
716 |
717 | url += '?callback=?';
718 |
719 | var data = { alt: 'json', format: '5' };
720 |
721 | if (playlist.user){ data.author = playlist.user; }
722 |
723 | this._trigger(this, 'onBeforePlaylistLoaded', [ playlist ]);
724 |
725 | $.ajax({
726 | type: 'GET',
727 | url: url,
728 | data: data,
729 | dataType: 'json',
730 | error: function(){
731 |
732 | self._trigger(self, 'onAfterPlaylistLoaded', [ playlist ]);
733 |
734 | self._trigger(self, error);
735 | },
736 | success: function(){
737 |
738 | self._trigger(self, 'onAfterPlaylistLoaded', [ playlist ]);
739 |
740 | self._trigger(self, ajaxSuccess, arguments);
741 | }
742 | });
743 |
744 | return;
745 |
746 | } else if (!playlist.videos){
747 |
748 | var videos = this.elements.player.find('.youtube-player-playlist li a');
749 |
750 | if (videos.length) {
751 |
752 | self.options.playlist.videos = [];
753 |
754 | videos.each(function(){
755 | self.options.playlist.videos.push({
756 | id: this.href.replace(self._youtubeIdExp, '$1'),
757 | title: $(this).html(),
758 | element: this
759 | });
760 | });
761 | }
762 | }
763 |
764 | self._trigger(self, 'onAfterPlaylistLoaded', [ playlist ]);
765 |
766 | self._trigger(self, success);
767 | },
768 |
769 | _updatePlaylist : function(){
770 |
771 | var self = this;
772 |
773 | (this.elements.playlist) &&
774 |
775 | this.elements.playlist
776 | .find('li')
777 | .removeClass('ui-state-active')
778 | .each(function(key){
779 |
780 | if ( self.options.playlist.videos[self.keys.video].id == $(this).data('video').id) {
781 |
782 | var height = $( this ).addClass('ui-state-active').outerHeight();
783 |
784 | if ( !self.options.videoThumbs ){
785 |
786 | var pos = (key * height) - ( Math.floor(self.options.playlistHeight / 2) * height);
787 |
788 | self.elements.playlist.scrollTop( pos );
789 | }
790 |
791 | return false;
792 | }
793 | });
794 | },
795 |
796 | _showPlaylist : function(callback) {
797 |
798 | var show = this.options.showPlaylist;
799 |
800 | ( show ) && this.elements.playlistContainer.show();
801 |
802 | var
803 | oldHeight = this.elements.playlist.height(),
804 | scrollerHeight = this.elements.playlist.css('height', 'auto').height(),
805 | videoHeight = this.elements.playlist.find('li:first').outerHeight(),
806 | newHeight = videoHeight * this.options.playlistHeight,
807 | height = newHeight < scrollerHeight ? newHeight : scrollerHeight;
808 |
809 | ( show ) && this.elements.playlistContainer.hide();
810 |
811 | if ( !this.elements.playlist.children().length ) {
812 |
813 | this.elements.playlistContainer.hide();
814 |
815 | this._trigger(this, callback);
816 |
817 | } else if ( height ) {
818 |
819 | this.elements.playlist.height( height );
820 |
821 | if (this.options.showPlaylist || show) {
822 |
823 | this.elements.playlistContainer.animate(this.options.playlistAnimation, this.options.playlistSpeed, callback);
824 |
825 | } else {
826 |
827 | this._trigger(this, callback);
828 | }
829 | }
830 | },
831 |
832 | loadVideo : function(video, cue){
833 |
834 | var self = this;
835 |
836 | function load(videoID){
837 |
838 | ( cue )
839 | ? self.cueVideo(videoID)
840 | : self.youtubePlayer.loadVideoById(videoID, 0);
841 |
842 | self._trigger(self, 'onVideoLoad', [ self._getVideo() ]);
843 | }
844 |
845 | if (video && video.id) {
846 |
847 | video = {
848 | id: video.id,
849 | title: video.title
850 | };
851 |
852 | this.videoIds = cue ? this.videoIds : [];
853 |
854 | if (cue) {
855 |
856 | // append video to video list
857 | this.options.playlist.videos.push(video);
858 | } else {
859 |
860 | // add video to video list only if a title is present
861 | this.options.playlist.videos = video.title ? [ video ] : [];
862 | }
863 |
864 | // add video/s to playlist
865 | this._addVideosToPlaylist(cue);
866 |
867 | // update the height of the playlist, but don't explicidly show it
868 | //this._showPlaylist(false);
869 |
870 | (!cue) &&
871 | // load and play the video
872 | load(video.id);
873 |
874 | } else if (video) {
875 |
876 | // you can't load videos that aren't in the current playlist
877 |
878 | var index = this._findVideo( video );
879 |
880 | if (index !== -1) {
881 |
882 | this.keys.video = index;
883 |
884 | load( video );
885 | }
886 |
887 | } else {
888 |
889 | // try load the next video
890 | load( this.options.playlist.videos[this.keys.video].id );
891 | }
892 | },
893 |
894 | loadPlaylist: function(playlist, play, show, success){
895 |
896 | show = show === undefined ? true : show;
897 |
898 | if ( playlist ) {
899 |
900 | this.options.playlist = playlist;
901 | }
902 |
903 | this._getPlaylistData(
904 | function(){ // success
905 |
906 | this.keys.video = this.options.randomStart ? this.randomVideo() : 0;
907 |
908 | this._trigger(this, success);
909 |
910 | this._createPlaylist();
911 |
912 | (show) && this._showPlaylist();
913 | },
914 | function(){ // error
915 |
916 | var msg = 'There was an error loading the playlist.';
917 |
918 | this.elements.playerObject.html( msg );
919 |
920 | this._trigger(this, 'onError', [msg]);
921 | }
922 | );
923 | },
924 |
925 | pauseVideo : function(){
926 |
927 | this.youtubePlayer.pauseVideo();
928 | },
929 |
930 | shufflePlaylist : function(){
931 |
932 | this.randomVideo();
933 |
934 | this.playVideo();
935 | },
936 |
937 | muteVideo : function(button){
938 |
939 | this._state('mute') ? this.youtubePlayer.unMute() : this.youtubePlayer.mute();
940 | },
941 |
942 | // FIXME
943 | repeat : function(){
944 |
945 | this.options.repeat = 1;
946 | },
947 |
948 | playVideo : function(){
949 |
950 | this.youtubePlayer.playVideo();
951 | },
952 |
953 | cueVideo : function(videoID, startTime){
954 |
955 | return this.youtubePlayer.cueVideoById( videoID || this.options.playlist.videos[this.keys.video].id, startTime || 0);
956 | },
957 |
958 | randomVideo : function(){
959 |
960 | this.keys.video = Math.floor(Math.random() * this.options.playlist.videos.length);
961 |
962 | return this.keys.video;
963 | },
964 |
965 | prevVideo : function(){
966 |
967 | if (this.keys.video > 0) {
968 |
969 | this._setVideoKey( --this.keys.video );
970 |
971 | } else if ( this.options.repeatPlaylist ) {
972 |
973 | this._setVideoKey( this.videoIds.length - 1 );
974 |
975 | } else return;
976 |
977 | this.loadVideo(null, this._state('play') || this.options.autoPlay ? false : true);
978 | },
979 |
980 | nextVideo : function(){
981 |
982 | if (this.keys.video < this.options.playlist.videos.length-1) {
983 |
984 | this._setVideoKey( ++this.keys.video );
985 |
986 | } else if ( this.options.repeatPlaylist ) {
987 |
988 | this._trigger(this, 'onEndPlaylist');
989 |
990 | this._setVideoKey( 0 );
991 |
992 | } else return;
993 |
994 | this.loadVideo(null, this._state('play') || this.options.autoPlay ? false : true);
995 | },
996 |
997 | playlistToggle : function(button){
998 |
999 | (this.elements.playlistContainer.find('li').length) &&
1000 |
1001 | this.elements
1002 | .playlistContainer
1003 | .animate({
1004 | height: 'toggle',
1005 | opacity: 'toggle'
1006 | }, this.options.playlistSpeed);
1007 | },
1008 |
1009 | // return the plugin object
1010 | plugin : function(){ return this; },
1011 |
1012 | // return an array of current player states
1013 | state : function(){
1014 |
1015 | var self = this, states = [];
1016 |
1017 | $.each(this._activeStates, function(key, val){
1018 |
1019 | $.each(self._states, function(k, v){
1020 |
1021 | (val === v) && states.push(k);
1022 | });
1023 | });
1024 |
1025 | return states;
1026 | },
1027 |
1028 | videos : function(){
1029 |
1030 | return this.options.playlist.videos;
1031 | },
1032 |
1033 | videoIndex : function(){
1034 |
1035 | return this.keys.video;
1036 | },
1037 |
1038 | destroy: function(){
1039 |
1040 | clearInterval( this.timeInterval );
1041 |
1042 | this.element.removeClass('ui-widget').removeAttr('style');
1043 |
1044 | this.elements.playerVideo.removeAttr('style');
1045 |
1046 | this.elements.playlistContainer.remove();
1047 |
1048 | this.elements.toolbar.container.remove();
1049 |
1050 | this.options.swfobject.removeSWF(this.elements.playerObject[0].id);
1051 |
1052 | this.elements.playerObjectClone.appendTo( this.elements.playerVideo );
1053 |
1054 | $.removeData( this.element[0], this._pluginName );
1055 | }
1056 | };
1057 |
1058 | player.prototype.defaultToolbarButtons = {
1059 | play: {
1060 | text: 'Play',
1061 | icon: 'ui-icon-play',
1062 | toggleButton: {
1063 | text: 'Pause',
1064 | icon: 'ui-icon-pause',
1065 | action: function(){
1066 |
1067 | this.pauseVideo();
1068 | }
1069 | },
1070 | action: function(){
1071 |
1072 | this.playVideo();
1073 | }
1074 | },
1075 | prev: {
1076 | text: 'Prev',
1077 | icon: 'ui-icon-seek-prev',
1078 | action: function(){
1079 |
1080 | this.prevVideo();
1081 | }
1082 | },
1083 | next: {
1084 | text: 'Next',
1085 | icon: 'ui-icon-seek-next',
1086 | action: function(){
1087 |
1088 | this.nextVideo();
1089 | }
1090 | },
1091 | shuffle: {
1092 | text: 'Shuffle/Random',
1093 | icon: 'ui-icon-shuffle',
1094 | toggle: 1,
1095 | action: function(){
1096 |
1097 | this.shufflePlaylist();
1098 | }
1099 | },
1100 | repeat: {
1101 | text: 'Repeat playlist',
1102 | icon: 'ui-icon-refresh',
1103 | toggle: 1,
1104 | action: function(){
1105 |
1106 | this.repeat();
1107 | }
1108 | },
1109 | mute: {
1110 | text: 'Mute',
1111 | icon: 'ui-icon-volume-on',
1112 | toggle: 1,
1113 | action: function(button){
1114 |
1115 | this.muteVideo(button);
1116 | }
1117 | },
1118 | playlistToggle: {
1119 | text: 'Toggle playlist',
1120 | icon: 'ui-icon-script',
1121 | action: function(){
1122 |
1123 | this.playlistToggle();
1124 | }
1125 | }
1126 | };
1127 |
1128 | })(this.jQuery, this, document);
1129 |
--------------------------------------------------------------------------------
/js/jquery.youtube.player.min.js:
--------------------------------------------------------------------------------
1 | /*
2 | * jquery.youtube.min.js v0.1a1 - a jquery youtube player
3 | * Copyright (c) 2010 Richard Willis
4 | * MIT license : http://www.opensource.org/licenses/mit-license.php
5 | * Project : http://github.com/badsyntax/jquery-youtube-player
6 | * Contact : willis.rh@gmail.com | badsyntax.co.uk
7 | * Build time : Tue Nov 2 22:42:07 GMT 2010
8 | */
9 | (function(e,k,n,l){function o(a,b,c){var d=this;this._pluginName=c;this.element=e(a).addClass("ui-widget");this.options=e.extend({width:425,height:356,swfobject:k.swfobject,playlist:{},showPlaylist:1,showTime:1,videoThumbs:0,randomStart:0,autoStart:0,autoPlay:0,repeat:1,repeatPlaylist:0,shuffle:0,chromeless:1,highDef:0,playlistHeight:5,playlistBuilder:null,playlistBuilderClickHandler:null,playlistAnimation:{height:"show",opacity:"show"},playlistSpeed:550,toolbarAppendTo:null,playlistAppendTo:null,
10 | timeAppendTo:null,videoParams:{allowfullscreen:"true",allowScriptAccess:"always",wmode:"transparent"},showToolbar:null,toolbarButtons:{},toolbar:"play,prev,next,shuffle,repeat,mute,playlistToggle",toolbarAnimation:{opacity:1},toolbarSpeed:500},b);if(!this.options.chromeless&&this.options.showToolbar!=true)this.options.showToolbar=0;this._states={unstarted:-1,ended:0,play:1,paused:2,buffering:3,cued:5};this._youtubeIdExp=/^[^v]+v.(.{11}).*/;this.buttons=e.extend({},this.defaultToolbarButtons,this.options.toolbarButtons);
11 | if(this.element.is("a")){a=this.element;this.element=e('
');b=e('
').appendTo(this.element);e('
').appendTo(b);e('
').find("li").append(a.clone()).end().appendTo(this.element);a.after(this.element).hide()}this.elements={player:this.element,playerVideo:this.element.find(".youtube-player-video"),playerObject:this.element.find(".youtube-player-object")};
12 | this.elements.playerObjectClone=this.elements.playerObject.clone();this.keys={video:0};do a="jqueryyoutubeplayer"+Math.floor(Math.random()*101).toString();while(n.getElementById(a));this.elements.playerObject[0].id=a;this.options.swfobject.getFlashPlayerVersion().major>=8&&this.loadPlaylist(null,null,null,function(){d._bindYoutubeEventHandlers()._createToolbar()._createTimeArea()._createPlayer()})}e.fn.player=function(a){var b=arguments,c=l;this.each(function(){var d=e.data(this,"jquery-youtube-player");
13 | if(d&&d[a]){c=d[a].apply(d,Array.prototype.slice.call(b,1));c=a=="plugin"?c:l}else if(!d&&(typeof a==="object"||!a))e.data(this,"jquery-youtube-player",new o(this,a,"jquery-youtube-player"))});return c||this};o.prototype={_activeStates:[],timer:{},videoIds:[],_trigger:function(a,b,c){var d=typeof b;c=c||[];if(d==="string"&&this.options[b]&&e.isFunction(this.options[b]))return this.options[b].apply(a,c);else d==="function"&&b.apply(a,c)},_bindYoutubeEventHandlers:function(){function a(i){f.youtubePlayer=
14 | n.getElementById(i);f._trigger(f,"onPlayerReady",[i]);f.loadVideo(false,true);f.elements.toolbar.container.animate(f.options.toolbarAnimation,f.options.toolbarSpeed,function(){f._trigger(f,"onReady",[i])});f._showPlaylist(function(){f.keys.play&&f.playVideo()})}function b(){f._trigger(this,"onVideoPaused",[f._getVideo()])}function c(i){switch(i){case 100:msg="This video has been removed from Youtube.";break;case 101:case 150:msg="This video does not allow playback outside of Youtube.";break;default:msg=
15 | "Unknown error"}f._trigger(this,"onError",[msg])===l&&alert("There was an error loading this video. "+msg)}function d(){f._updatePlaylist();f.elements.toolbar.updateStates();f._trigger(this,"onVideoCue",arguments)}function g(){f._trigger(this,"onBuffer",[f._getVideo()])}function h(){f._updatePlaylist();f._addState("play");f.elements.toolbar.updateStates();f._updateTime();f._trigger(this,"onVideoPlay",[f._getVideo()])}var f=this,j=this.elements.playerObject[0].id;k["onytplayerStateChange"+j]=function(i){f._removeStates([-1,
16 | 0,1,2,3,5,100,101,150,9]);f._addState(i,true);switch(i){case 0:f.buttons.play.element&&f.buttons.play.element.trigger("off");f.options.repeat&&f.nextVideo();break;case 1:h();break;case 2:b();break;case 3:g();break;case 9:a(j);break;case 5:d();break;case 100:case 101:case 150:c(i)}f._trigger(f,"onYoutubeStateChange",[i])};if(!k.onYouTubePlayerReady)k.onYouTubePlayerReady=function(i){var m=n.getElementById(i);m.addEventListener("onStateChange","onytplayerStateChange"+i);m.addEventListener("onError",
17 | "onytplayerStateChange"+i);k["onytplayerStateChange"+i](9)};return this},_createPlayer:function(){this.elements.player.width(this.options.width);this.elements.playerVideo.height(this.options.height);var a=this.options.playlist.videos[this.keys.video].id,b=this.elements.playerObject[0].id;a=this.options.chromeless?"http://www.youtube.com/apiplayer?enablejsapi=1&version=3&playerapiid="+b+"&hd="+this.options.highDef+"&showinfo=0":"http://www.youtube.com/v/"+a+"?enablejsapi=1&playerapiid="+b+"&version=3";
18 | this._trigger(this,"onBeforePlayerBuild");this.options.swfobject.embedSWF(a,this.elements.playerObject[0].id,"100%","100%","8",null,null,this.options.videoParams);return this},_createToolbar:function(){var a=this;this.elements.toolbar={container:e("
").addClass("youtube-player-toolbar ui-widget ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all").css("opacity",0),updateStates:function(){a.elements.toolbar.container.find("li").each(function(){var b=e(this).removeClass("ui-state-active").data("button");
19 | if(!b)return true;a._state(b.val)&&b.toggle&&e(this).addClass("ui-state-active");a._state(b.val)&&b.toggleButton&&e(this).trigger("on")})}};this.options.showToolbar!=null&&!this.options.showToolbar&&this.elements.toolbar.container.hide();e.each(this.options.toolbar.split(","),function(b,c){var d=a.buttons[c];if(!d||!d.text)return true;d.val=c;a._states[c]=a._states[c]||c;e("
").addClass("ui-state-default ui-corner-all").append('
').attr("title",d.text).data("button",
20 | d).bind("mouseenter mouseleave",function(){e(this).toggleClass("ui-state-hover")}).bind("off",function(){var g=e(this),h=g.data("button");g.data("toggle",1);a._removeState(c);g.find(".ui-icon").removeClass(h.toggleButton.icon).addClass(h.icon).end().attr("title",h.text);a._trigger(a,h.toggleButton.action,[h])}).bind("on",function(){var g=e(this),h=g.data("button");g.data("toggle",0);a._addState(c);g.find(".ui-icon").removeClass(h.icon).addClass(h.toggleButton.icon).end().attr("title",h.toggleButton.text);
21 | a._trigger(a,h.action,[h])}).bind("toggle",function(){var g=e(this).data("toggle");g||g==l?e(this).trigger("on"):e(this).trigger("off")}).click(function(){var g=e(this).data("button"),h=a._state(c);if(g.toggleButton)e(this).trigger("toggle");else{a._trigger(a,g.action,[g]);!g.toggle||g.toggle&&h?a._removeState(c):a._addState(c);a.elements.toolbar.updateStates()}}).appendTo(a.elements.toolbar.container)});this.options.toolbarAppendTo?this.elements.toolbar.container.appendTo(this.options.toolbarAppendTo):
22 | this.elements.playerVideo.after(this.elements.toolbar.container);return this},_createTimeArea:function(){this.elements.toolbar.time=this.options.timeAppendTo?e("
").appendTo(this.options.timeAppendTo):e("
").addClass("youtube-player-time").appendTo(this.elements.toolbar.container);this.elements.toolbar.timeCurrent=e("
").html("0:00").appendTo(this.elements.toolbar.time);this.elements.toolbar.timeDuration=e("
").appendTo(this.elements.toolbar.time);return this},_createPlaylist:function(){function a(){var d=
23 | e(this).data("video");if(d){b.keys.video=e.inArray(d.id,b.videoIds);b._removeState("play");b._updatePlaylist();b.loadVideo();b.playVideo()}}var b=this;this._addVideosToPlaylist=function(d){var g=d?[b.options.playlist.videos[b.options.playlist.videos.length-1]]:b.options.playlist.videos;if(!d){b.elements.playlist.empty();b.videoIds=[]}e.each(g,function(){b.videoIds.push(this.id);e("
").data("video",this).append(b.options.videoThumbs?'
':this.title).addClass("ui-state-default").addClass(b.options.videoThumbs?"youtube-player-thumb":"").bind("mouseenter mouseleave",function(){e(this).toggleClass("ui-state-hover")}).appendTo(b.elements.playlist)});b._trigger(b,"onAfterVideosAddedToPlaylist")};this._bindPlaylistClickHandler=function(d){d.items.click(function(){b._trigger(this,a,arguments);b._trigger(b,"playlistBuilderClickHandler",arguments)})};var c;if(e.isFunction(this.options.playlistBuilder))c=this.options.playlistBuilder;
25 | else{b.elements.playlist=b.elements.playlist||e("
").addClass("youtube-player-playlist ui-helper-reset");b.elements.playlistContainer=b.elements.playlistContainer||e("
").addClass("youtube-player-playlist-container ui-widget-content ui-corner-all").html(b.elements.playlist);this._addVideosToPlaylist();this.options.playlistAppendTo?this.elements.playlistContainer.appendTo(this.options.playlistAppendTo):this.elements.toolbar.container.after(this.elements.playlistContainer);c=function(){return{items:b.elements.playlist.find("li"),
26 | container:b.elements.playlistContainer}}}e.each(this.options.playlist.videos,function(){b.videoIds.push(this.id)});c=c.call(this,this.options.playlist.videos);this.elements.playlistContainer=c.container;this._bindPlaylistClickHandler(c);return this},_updateTime:function(){function a(d){var g=Math.floor(d/60);d=(d%60).toFixed(0);return g+":"+(d<10?"0"+d:d)}if(this.options.showTime){var b=this,c=Number(this.youtubePlayer.getDuration());this.elements.toolbar.timeDuration.html(" / "+a(c));this.elements.toolbar.time.fadeIn();
27 | this.timeInterval=setInterval(function(){!b.youtubePlayer.getCurrentTime?clearInterval(b.timeInterval):b.elements.toolbar.timeCurrent.html(a(b.youtubePlayer.getCurrentTime()))},100)}},_removeStates:function(a){var b=[];e.each(this._activeStates,function(c,d){e.inArray(d,a)===-1&&e.inArray(d,b)===-1&&b.push(d)});this._activeStates=b},_removeState:function(a){a=typeof a==="string"?this._states[a]:a;this._removeStates([a])},_state:function(a){a=this._states[a];return e.inArray(a,this._activeStates)!==
28 | -1?true:false},_addState:function(a,b){if(b)e.inArray(a,this._activeStates)===-1&&this._activeStates.push(a);else this._states[a]&&e.inArray(this._states[a],this._activeStates)===-1&&this._activeStates.push(this._states[a])},_setVideoKey:function(a){this.keys.video=this.options.shuffle?this.options.randomVideo():a||0},_getVideo:function(){return this.options.playlist.videos[this.keys.video]},_findVideo:function(a){var b=-1;e.each(this.options.playlist.videos,function(c,d){if(a==d.id){b=c;return false}});
29 | return b},_getPlaylistData:function(a,b){var c=this,d=this.options.playlist;if(d.user||d.playlist){var g=function(j){if(j){c.options.playlist={title:j.feed.title.$t,id:d,videos:[]};e.each(j.feed.entry,function(i,m){c.options.playlist.videos.push({id:m.link[0].href.replace(c._youtubeIdExp,"$1"),title:m.title.$t})});c.elements.playerObject.fadeOut(180,function(){a.call(c)})}else b.call(c)},h=d.user?"http://gdata.youtube.com/feeds/api/videos":"http://gdata.youtube.com/feeds/api/playlists/"+d.playlist;
30 | h+="?callback=?";var f={alt:"json",format:"5"};if(d.user)f.author=d.user;this._trigger(this,"onBeforePlaylistLoaded",[d]);e.ajax({type:"GET",url:h,data:f,dataType:"json",error:function(){c._trigger(c,"onAfterPlaylistLoaded",[d]);c._trigger(c,b)},success:function(){c._trigger(c,"onAfterPlaylistLoaded",[d]);c._trigger(c,g,arguments)}})}else{if(!d.videos){h=this.elements.player.find(".youtube-player-playlist li a");if(h.length){c.options.playlist.videos=[];h.each(function(){c.options.playlist.videos.push({id:this.href.replace(c._youtubeIdExp,
31 | "$1"),title:e(this).html(),element:this})})}}c._trigger(c,"onAfterPlaylistLoaded",[d]);c._trigger(c,a)}},_updatePlaylist:function(){var a=this;this.elements.playlist&&this.elements.playlist.find("li").removeClass("ui-state-active").each(function(b){if(a.options.playlist.videos[a.keys.video].id==e(this).data("video").id){var c=e(this).addClass("ui-state-active").outerHeight();a.options.videoThumbs||a.elements.playlist.scrollTop(b*c-Math.floor(a.options.playlistHeight/2)*c);return false}})},_showPlaylist:function(a){var b=
32 | this.options.showPlaylist;b&&this.elements.playlistContainer.show();this.elements.playlist.height();var c=this.elements.playlist.css("height","auto").height(),d=this.elements.playlist.find("li:first").outerHeight()*this.options.playlistHeight;c=d
36 | 0)this._setVideoKey(--this.keys.video);else if(this.options.repeatPlaylist)this._setVideoKey(this.videoIds.length-1);else return;this.loadVideo(null,this._state("play")||this.options.autoPlay?false:true)},nextVideo:function(){if(this.keys.video tag shouldn\'t exist');
23 |
24 | start();
25 |
26 | }, 1000);
27 | });
28 |
--------------------------------------------------------------------------------
/tests/events.js:
--------------------------------------------------------------------------------
1 | /*
2 | * events.js - part of the jquery youtube player testsuite
3 | * @author: Richard Willis
4 | * @note: This test should be the last run, it would be pointless to test these events if parts of the API are broken
5 | * as we need to use the API methods to trigger some of these events.
6 | */
7 |
8 |
9 | module('events');
10 |
11 | var playlist = { title: 'test playlist', videos: [ { id: 'wDowSzVgjXI', title: 'The All Seeing I - Beat Goes On HQ' } ] };
12 |
13 | test('onPlayerReady()', function(){
14 |
15 | stop(1000);
16 |
17 | $('.player').player({
18 | playlist: playlist,
19 | onPlayerReady: function(){
20 |
21 | ok(true, 'Flash player has been built and Youtube API is ready to be used.');
22 |
23 | start();
24 |
25 | this.destroy();
26 | }
27 | });
28 | });
29 |
30 | test('onReady()', function(){
31 |
32 | stop(1000);
33 |
34 | $('.player').player({
35 | playlist: playlist,
36 | onReady: function(){
37 |
38 | ok(true, 'Player and toolbar have been constructed and animated, first video has been cued.');
39 |
40 | start();
41 |
42 | this.destroy();
43 | }
44 | });
45 | });
46 |
47 | test('onYoutubeStateChange()', function(){});
48 | test('onVideoLoad()', function(){});
49 | test('onVideoCue()', function(){});
50 | test('onVideoPlay()', function(){})
51 | test('onVideoPaused()', function(){});
52 | test('onBuffer()', function(){});
53 | test('onError()', function(){});
54 | test('onBeforePlaylistLoaded()', function(){});
55 | test('onAfterPlaylistLoaded()', function(){});
56 |
--------------------------------------------------------------------------------
/tests/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | jQuery Youtube Player Test Suite
5 |
23 | tag should exist');
42 |
43 | $('.player').player('destroy');
44 |
45 | start();
46 |
47 | }, 1000);
48 | });
49 |
--------------------------------------------------------------------------------
19 |
20 |