javascript - Uncaught TypeError: Cannot read property 'ready' of undefined Vimeo - Stack Overflow

admin管理员组

文章数量:1393117

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 = ".min.js";
        var firstScriptTag1 = document.getElementsByTagName('script')[0];
        firstScriptTag1.parentNode.insertBefore(tag1, firstScriptTag1);


        var ifrm = document.createElement("IFRAME");
        ifrm.setAttribute("src", ";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!!

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./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./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!!

• javascript
• jquery
• vimeo
• vimeo-api
• vimeo-player

Share Improve this question Follow edited Jul 29, 2015 at 5:25 Developer asked Jul 29, 2015 at 4:12 DeveloperDeveloper 1,43733 gold badges2323 silver badges4848 bronze badges 2

• Did you ever find an answer? – nu everest Commented Dec 17, 2015 at 21:37
• @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 – Developer Commented Dec 18, 2015 at 4:53

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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./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./video/";
    ifrm.setAttribute("src", "https://player.vimeo./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');
      })
  })

本文标签： javascriptUncaught TypeError Cannot read property 39ready39 of undefined VimeoStack Overflow