Hi guys, I managed to successfully add uTube to my new website but for some reason when using the chromeless player the "Click to Play" icon in the middle of the video does not dissappear when clicked. The video starts and the Icon remains there looking at me weird.
This is my Header section (My own CSS is on top of uTube one):
I am using JQuery 1.8.3 for technical reasons, but I tried downgrading it to 1.4.2 and still got the same results (Click to Play icon is showing me the finger at the moment)
// uTube - "The" YouTube Umbraco package for Umbraco // JS API for Chromeless player // // Team: // Warren Buckley // Lee Kelleher // Chriztian Steinmeier // Morten Christensen
/* Controller object for YouTube player */ function uTubePlayer(id) { // Misc. constants var CONTAINER_CLASS = ".youTubePlayer"; var PLAYCONTROL_CLASS = ".controlDiv"; var MUTECONTROL_CLASS = ".muteControl"; var PROGRESSBAR_CLASS = ".progressBar"; var ELAPSED_CLASS = ".elapsed"; var STATE_READY = -1; var STATE_ENDED = 0; var STATE_PLAYING = 1; var STATE_PAUSED = 2; var STATE_BUFFERING = 3;
this._setupControls = function() { // Grab these to enable use in event methods var player = this; var container = player.container; //This is the container DIV around the flash movie var playerDelegate = this.player; // Access to the API player
// Accessors to the controls player.playPauseButton = container.find(PLAYCONTROL_CLASS); player.muteButton = container.find(MUTECONTROL_CLASS); player.progressBar = container.find(PROGRESSBAR_CLASS);
// Setup click handlers player.playPauseButton.click(function() { if (!player.isPlaying()) { container.removeClass('ready ended paused buffering').addClass('playing'); var elapsedBar = container.find(ELAPSED_CLASS); var updateProgressBar;
// Set width of elapsed bar elapsedBar.width(percentageWatched); }, 1000); player.play(); } else { container.removeClass('ready ended playing buffering').addClass('paused'); player.pause(); } });
player.muteButton.click(function() { var button = $(this); if (button.hasClass('mute')) { player.mute(); button.removeClass('mute').addClass('unmute'); } else if (button.hasClass('unmute')) { player.unMute(); button.removeClass('unmute').addClass('mute'); } });
player.progressBar.click(function(e) { var bar = $(this); var ratio = (e.pageX - bar.offset().left) / bar.outerWidth();
// Set the elapsed bar to the ratio % bar.children(ELAPSED_CLASS).width(ratio * 100 + '%');
// With API seek to the actual position playerDelegate.seekTo(Math.round(playerDelegate.getDuration() * ratio), true);
// Stop the default click return false; });
// All set - mark the player as ready container.addClass("ready"); };
// Utility method to check if the container div has the class of playing this.isPlaying = function() { //this.container.removeClass('ready ended paused buffering').addClass('playing'); return this.container.hasClass("playing"); }
// Return a reference to the YouTube player OR (if the player can not be located) // a mock object with stubbed out methods (for silent fails...) function _getPlayerReference(id) { var emptyFunction = function() { }; var domElement = document.getElementById(id);
// Object/associative array for accessing multiple players on the same page var uTubePlayers = { };
// Callback required by API - YouTybe player calls this when ready function onYouTubePlayerReady(playerID) { // Create a new player controller uTubePlayers[playerID] = new uTubePlayer(playerID); }
// This one we've setup ourselves function onYouTubePlayerStateChanged(playerID, state) { uTubePlayers[playerID].changeState(state); }
I didn't get TaoistTotty's solution to fully work, so I researched the problem a bit more.
The reason why "onYouTubePlayerStateChanged" is no longer called seems to be caused by a changed security policy in newer flash versions, so that only a function name can be provided in "addEventListener" without any parameters.
Here's a diff of the changes I made to the original chromeless.player.js to make the callbacks work:
--- a/chromeless.player.js Thu Mar 21 14:02:51 2013 +0100
+++ b/chromeless.player.js Tue Jul 16 13:33:52 2013 +0200
@@ -151,7 +151,12 @@
this._setupControls();
// Setup callback for readyStateChange events
- this.player.addEventListener('onStateChange', "function(state) { return onYouTubePlayerStateChanged('" + this.id + "', state); }");
+ var playerId = this.id;
+ var count = uTubeCounter++;
+ window["onYouTubePlayerStateChanged" + count] = function (state) {
+ uTubePlayers[playerId].changeState(state);
+ };
+ this.player.addEventListener("onStateChange", "onYouTubePlayerStateChanged" + count);
// Return a reference to the YouTube player OR (if the player can not be located)
// a mock object with stubbed out methods (for silent fails...)
@@ -171,6 +176,7 @@
// Object/associative array for accessing multiple players on the same page
var uTubePlayers = { };
+var uTubeCounter = 0;
// Callback required by API - YouTybe player calls this when ready
function onYouTubePlayerReady(playerID) {
// Create a new player controller
uTubePlayers[playerID] = new uTubePlayer(playerID);
-}
-
-// This one we've setup ourselves
-function onYouTubePlayerStateChanged(playerID, state) {
- uTubePlayers[playerID].changeState(state);
}
Click to play Icon wont go anywhere
Hi guys, I managed to successfully add uTube to my new website but for some reason when using the chromeless player the "Click to Play" icon in the middle of the video does not dissappear when clicked. The video starts and the Icon remains there looking at me weird.
This is my Header section (My own CSS is on top of uTube one):
<!-- uTube CSS -->
<link href="/css/uTube.chromeless.player.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/scripts/jquery-1.8.3.min.js"></script>
<!-- jQuery, SWFObject & uTube JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="/scripts/uTube/chromeless.player.js"></script>
I am using JQuery 1.8.3 for technical reasons, but I tried downgrading it to 1.4.2 and still got the same results (Click to Play icon is showing me the finger at the moment)
I am seeing the same thing using Umbraco 6.0.2.
I am also not seeing the controls appear nor can the video be paused
Having looked into this more, this issue seems to be that the this.changeState is not being triggered.
Can anyone help with this?
Alcides try this and see if it works.
This is an updated chromeless.player.js
Worked like a Charm! Thanks TaoistTotty!
I didn't get TaoistTotty's solution to fully work, so I researched the problem a bit more.
The reason why "onYouTubePlayerStateChanged" is no longer called seems to be caused by a changed security policy in newer flash versions, so that only a function name can be provided in "addEventListener" without any parameters.
Here's a diff of the changes I made to the original chromeless.player.js to make the callbacks work:
And a link to the full file: https://www.dropbox.com/s/18o5hkmthje7l68/chromeless.player.js
- Regin
is working on a reply...