Uncaught TypeError: Cannot read property 'ready' of undefined Vimeo

Question

Demo Here

Hi, I have Implemented Vimeo Video and it works fine, but the Issue iam facing is when ever the Video ends (Add Listener) Events are Not Working.

note : onclick of the image iam playing video.

(function($) {
$(function() {
  //alert('hi')
    //var thumbSelector = $('.gwt__embed__video .flex-viewport, .sliderNew #carousel, .sliderNew .flex-direction-nav');
    //var dotSelector = $('.gwt__embed__video .flex-viewport, .flex-control-nav.flex-control-paging, .flex-direction-nav, flex-control-nav');
    //var slidFalse = $('.sliderNew .flexslider').flexslider({ slideshow: false });
    //var slidTrue = $('.sliderNew .flexslider').flexslider({ slideshow: true });
    var iframe = $('#player1')[0];
    var player = $f(iframe);
    var status = $('.status');

    console.log("01 player" + player);  // result null
    // When the player is ready, add listeners for pause, finish, and playProgress
    // Call the API when a button is pressed    
    $('#test_1').on('click', function() {
        $('#test_1').hide();
        imgClick1(); 
        //$('#player1').show();
        //$('.gwt__video__wrap .close').show();
       // player.api($(this).text().toLowerCase());
        console.log("02 on click player" + player);  // 
    });
    function imgClick1() {

        var tag1 = document.createElement('script');
        tag1.src = "http://a.vimeocdn.com/js/froogaloop2.min.js";
        var firstScriptTag1 = document.getElementsByTagName('script')[0];
        firstScriptTag1.parentNode.insertBefore(tag1, firstScriptTag1);


        var ifrm = document.createElement("IFRAME");
        ifrm.setAttribute("src", "https://player.vimeo.com/video/76979871?api=1&player_id=player1&autoplay=1");
        ifrm.setAttribute("id", "vplayer");
        ifrm.setAttribute("class", "vimeo-player");
        ifrm.style.width = "100%";
        ifrm.style.height = "224px";
        // add rest of your values
        ifrm.frameborder = 0;
        document.getElementById("vPlayer").appendChild(ifrm);

        jQuery('iframe#vplayer').each(function(){
        alert('eaci............')
        $f(this).addEvent('ready', ready);
        });

        function ready(player_id){
            $f(player_id).addEvent('play', play);
            $f(player_id).api('play');
            alert("Ready!!!");
        }
        function play(){
            alert("Playing!!!");
        }


        $('#vPlayer iframe').load(function() {
            alert('On Load Function.')
            //player = document.querySelectorAll('iframe')[0];
            console.log("neeeeeeeeeeee" + player);
            // $('#vPlayer iframe').attr('id', videoData[0]['id']);
            /* $f(player).addEvent('ready', function(id){
                var vimeoVideo = $f(id);
                console.log('success');
            }); */
            function videoEnd() {
                alert('hello mister')
            }
        });
    }

    function onPause(id) {
        status.text('paused');
    }

    function onFinish(id) {
        alert("eeee");
    }

    function onPlayProgress(data, id) {
        status.text(data.seconds + 's played');
    }



});

})(jQuery);

Thanks!!

Dovev

Did you ever find an answer? – Obeng

@nueverest : have a look at the demo codepen.io/syedazam/pen/rVQzpM !! Any how """ 'ready' of undefined Vimeo "" Issue has been fixed. please go through the code once – Dovev

Answer 1

I have Fixed the Issue, Now the Error Message is Gone :-) here is the Demo

    $(function(){
    /************
    Img Click Load Vimeo Video **********************************************/
    window.artist_vimeo_id = $(this).attr('1450411820675');    
  $('#test_1').on('click', function(e) {
    alert('img clicked');
    $(this).each(function(i, obj) {
      e.preventDefault();
      window.artist_vimeo_id = $(this).attr('data-vimeo');
      iframeVimeo();
    });
    vimeoLoad();                
  });         

  function getVimeoArtistId() {
    return window.artist_vimeo_id;
  }
  function loadScriptVimeo() {
    //if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
      var tag = document.createElement('script');
      tag.src = "https://f.vimeocdn.com/js/froogaloop2.min.js";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    //}
  }
  function iframeVimeo() {   
    var ifrm = document.createElement("IFRAME"); 
    var ifrmUrl = "https://player.vimeo.com/video/";
    ifrm.setAttribute("src", "https://player.vimeo.com/video/76979871?api=1&player_id=player1&autoplay=1"); 
    ifrm.setAttribute("class", "vimeo");
    ifrm.setAttribute("id", "player1");
    ifrm.style.width = "100%"; 
    ifrm.style.height = "100%"; 
    ifrm.frameborder = 0;
    $(".gwt__embed__video").append(ifrm); 
    return false;    
  }
  function vimeoLoad() {
    jQuery('iframe.vimeo').each(function(){
      Froogaloop(this).addEvent('ready', ready);
    });
    function ready(playerID){
      Froogaloop(playerID).addEvent('play', play(playerID));
      Froogaloop(playerID).addEvent('finish', finish);
      Froogaloop(playerID).api('play');
    }
    function play(playerID){
    }
    function finish(){
      $('#player1').remove();
    }
  }





    /*********************/


      $('.test-click').on('click',function(){
        alert('Initialized');
      })
  })

Dovev

What did you fix/change? What was the source of the problem? – Lackey

@mix3d, Hi I no more see the issue in my question demo, not sure if vimeo api has been updated. if you any demo which u have implemented, plz post will have a look. Thanks! – Dovev

I finally found my problem yesterday; The documentation does not explicitly state (as far as I can tell) that the initial load of the froogaloop function needs the actual DOM object, not a jquery object or even a selector. Yours doesn't, but many examples use something like $f($('#vimeo-iframe-id')[0]), with the seemingly random array selector used to get the raw DOM object. The froogaloop API is strange because it then uses the playerId for subsequent calls. Poor design and poorer documentation, in my opinion. – Lackey