https://www.webwordsystem.com/scripts/uTube/chromeless.player.js

1/// <reference path="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" />
2
3//  uTube - "The" YouTube Umbraco package for Umbraco
4//  JS API for Chromeless player
5//
6//  Team:
7//      Warren Buckley
8//      Lee Kelleher
9//      Chriztian Steinmeier
10//      Morten Christensen
11
12/*
13    Controller object for YouTube player 
14 */
15function uTubePlayer(id) {
16	// Misc. constants
17	var CONTAINER_CLASS         = ".youTubePlayer";
18	var PLAYCONTROL_CLASS       = ".controlDiv";
19	var MUTECONTROL_CLASS       = ".muteControl";
20	var PROGRESSBAR_CLASS       = ".progressBar";
21	var ELAPSED_CLASS           = ".elapsed";
22	var STATE_READY             = -1;
23	var STATE_ENDED             = 0;
24	var STATE_PLAYING           = 1;
25	var STATE_PAUSED            = 2;
26	var STATE_BUFFERING         = 3;
27
28	this.id = id || 'ytplayer';
29	
30	this.player                 = _getPlayerReference(id);
31	this.container              = $(this.player).parent(CONTAINER_CLASS);
32	
33	this._setupControls = function() {
34		// Grab these to enable use in event methods
35		var player              = this;
36		var container           = player.container; //This is the container DIV around the flash movie
37		var playerDelegate      = this.player;      // Access to the API player
38		
39		// Accessors to the controls
40		player.playPauseButton  = container.find(PLAYCONTROL_CLASS);
41		player.muteButton       = container.find(MUTECONTROL_CLASS);
42		player.progressBar      = container.find(PROGRESSBAR_CLASS);
43		
44		// Setup click handlers
45		player.playPauseButton.click(function() {
46			if (!player.isPlaying()) {
47				player.play();
48			} else {
49				player.pause();
50			}
51		});
52		
53		player.muteButton.click(function() {
54			var button = $(this);
55			if (button.hasClass('mute')) {
56				player.mute();
57				button.removeClass('mute').addClass('unmute');
58			} else if (button.hasClass('unmute')) {
59				player.unMute();
60				button.removeClass('unmute').addClass('mute');
61			}
62		});
63		
64		player.progressBar.click(function(e) {
65			var bar     = $(this);
66			var ratio   = (e.pageX - bar.offset().left) / bar.outerWidth();
67			
68			// Set the elapsed bar to the ratio %
69			bar.children(ELAPSED_CLASS).width(ratio * 100 + '%');
70			
71			// With API seek to the actual position
72			playerDelegate.seekTo(Math.round(playerDelegate.getDuration() * ratio), true);
73			
74			// Stop the default click
75			return false;
76		});
77		
78		// All set - mark the player as ready
79		container.addClass("ready");
80	};
81	
82	// Utility method to check if the container div has the class of playing
83	this.isPlaying = function() {
84		return this.container.hasClass("playing");
85	}
86	
87	// Standard player method delegations
88	this.play   = function() { this.player.playVideo(); };
89	this.pause  = function() { this.player.pauseVideo(); };
90	this.mute   = function() {
91		if (this.player && !this.player.isMuted()) {
92			this.player.mute();
93		}
94	};
95	this.unMute = function() {
96		if (this.player && this.player.isMuted()) {
97			this.player.unMute();
98		}
99	};
100	
101	// Handler for state changes
102	this.changeState        = function(newState) {
103		var container       = this.container;
104		var elapsedBar      = container.find(ELAPSED_CLASS);
105		var playerDelegate  = this.player;
106
107		switch (newState) {
108            //Video unstarted/ready
109			case STATE_READY:
110				container.addClass('ready');
111				break;
112            
113            // Video ended 
114			case STATE_ENDED:
115				container.removeClass('ready playing paused buffering').addClass('ended');
116				break;
117            
118            // Video playing 
119			case STATE_PLAYING:
120				container.removeClass('ready ended paused buffering').addClass('playing');
121
122				// Every second - update the progress bar %
123				var updateProgressBar;
124				
125				updateProgressBar = window.setInterval(function () {
126					// Get percentage watched (currentTime/TotalTime)*100 = %
127					var percentageWatched = ((playerDelegate.getCurrentTime() / playerDelegate.getDuration()) * 100) + '%';
128
129					// Set width of elapsed bar
130					elapsedBar.width(percentageWatched);
131				}, 1000);
132                break;
133            
134            // Video paused 
135			case STATE_PAUSED:
136				container.removeClass('ready ended playing buffering').addClass('paused');
137				
138				// Stop the 1-second polling to update the progress bar when we are paused
139				window.clearInterval(updateProgressBar);
140				break;
141
142            // Video buffering  
143            case STATE_BUFFERING:
144				container.removeClass('ready ended playing paused').addClass('buffering');
145                break;
146        }
147	};
148	
149	
150	// Initialize controls
151	this._setupControls();
152	
153	// Setup callback for readyStateChange events
154	this.player.addEventListener('onStateChange', "function(state) { return onYouTubePlayerStateChanged('" + this.id + "', state); }");
155
156	// Return a reference to the YouTube player OR (if the player can not be located)
157	// a mock object with stubbed out methods (for silent fails...)
158	function _getPlayerReference(id) {
159		var emptyFunction   = function() { };
160		var domElement      = document.getElementById(id);
161		
162		return domElement || {
163			playVideo:  emptyFunction,
164			pauseVideo: emptyFunction,
165			mute:       emptyFunction,
166			unMute:     emptyFunction,
167			isMuted:    function() { return true; }
168		};
169	}
170}
171
172// Object/associative array for accessing multiple players on the same page
173var uTubePlayers = { };
174
175// Callback required by API - YouTybe player calls this when ready
176function onYouTubePlayerReady(playerID) {
177	// Create a new player controller
178	uTubePlayers[playerID] = new uTubePlayer(playerID);
179}
180
181// This one we've setup ourselves
182function onYouTubePlayerStateChanged(playerID, state) {
183	uTubePlayers[playerID].changeState(state);
184}