Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Alcides 4 posts 24 karma points
    Mar 15, 2013 @ 00:44
    Alcides
    0

    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)

     

  • TaoistTotty 246 posts 314 karma points
    Mar 15, 2013 @ 09:25
    TaoistTotty
    0

    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 

  • TaoistTotty 246 posts 314 karma points
    Mar 15, 2013 @ 17:57
    TaoistTotty
    0

    Having looked into this more, this issue seems to be that the this.changeState is not being triggered.

    Can anyone help with this? 

  • TaoistTotty 246 posts 314 karma points
    Mar 17, 2013 @ 15:57
    TaoistTotty
    1

    Alcides try this and see if it works.

    This is an updated  chromeless.player.js

    /// <reference path="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" />

    // 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.id = id || 'ytplayer';

    this.player = _getPlayerReference(id);
    this.container = $(this.player).parent(CONTAINER_CLASS);

    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;

    updateProgressBar = window.setInterval(function () {
    // Get percentage watched (currentTime/TotalTime)*100 = %
    var percentageWatched = ((playerDelegate.getCurrentTime() / playerDelegate.getDuration()) * 100) + '%';

    // 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");
    }

    // Standard player method delegations
    this.play = function() { this.player.playVideo(); };
    this.pause = function() { this.player.pauseVideo(); };
    this.mute = function() {
    if (this.player && !this.player.isMuted()) {
    this.player.mute();
    }
    };
    this.unMute = function() {
    if (this.player && this.player.isMuted()) {
    this.player.unMute();
    }
    };




    // Initialize controls
    this._setupControls();

    // Setup callback for readyStateChange events
    this.player.addEventListener('onStateChange', "function(state) { return onYouTubePlayerStateChanged('" + this.id + "', state); }");

    // 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);

    return domElement || {
    playVideo: emptyFunction,
    pauseVideo: emptyFunction,
    mute: emptyFunction,
    unMute: emptyFunction,
    isMuted: function() { return true; }
    };
    }
    }

    // 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);
    }

     

  • Alcides 4 posts 24 karma points
    Mar 18, 2013 @ 05:10
    Alcides
    0

    Worked like a Charm! Thanks TaoistTotty!

  • Regin Larsen 3 posts 24 karma points
    Jul 16, 2013 @ 13:42
    Regin Larsen
    0

    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);
     }

    And a link to the full file: https://www.dropbox.com/s/18o5hkmthje7l68/chromeless.player.js

    - Regin

Please Sign in or register to post replies

Write your reply to:

Draft