2015-07-29 7 views
7

Demo HereUncaught Typeerror: kann Eigenschaft ‚ready‘ undefinierten Vimeo lesen

Hallo, Ich habe Vimeo Video implementiert und es funktioniert gut, aber die Ausgabe iam Verkleidung ist, wann immer das Video endet (In Listener) Ereignisse sind Funktioniert nicht.

hinweis: onclick des bildes iam video spielen.

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

Danke !!

+0

Haben Sie jemals eine Antwort finden? –

+0

@nueverest: Werfen Sie einen Blick auf die Demo http://codepen.io/syedazam/pen/rVQzpM !! Irgendwie wie "" "" bereit "von undefined Vimeo" "Problem wurde behoben. Bitte gehen Sie durch den Code einmal –

Antwort

3

Ich habe das Problem behoben, nun die Fehlermeldung :-) gegangen ist 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'); 
     }) 
    }) 
+2

Was haben Sie reparieren/ändern? Was war die Ursache des Problems? – mix3d

+0

@ mix3d, Hallo, ich sehe nicht mehr die Frage in meiner Frage Demo, nicht sicher, ob Vimeo api aktualisiert wurde.Wenn Sie eine Demo, die Sie implementiert haben, PLZ PLZ wird einen Blick haben. Vielen Dank! –

+3

Ich endlich gefunden mein Problem gestern; Die Dokumentation nicht explizit (Soweit ich das beurteilen kann), benötigt die initiale Ladung der Froogaloop-Funktion das eigentliche DOM-Objekt, kein jquery-Objekt oder auch nur einen Selektor.Ihr nicht, aber viele Beispiele verwenden etwas wie '$ f ($ ('# vimeo -iframe-id ') [0]) ', mit dem anscheinend zufälligen Array-Selektor, der verwendet wird, um das rohe DOM-Objekt zu erhalten. Die froogaloop-API ist seltsam, weil sie dann' playerId' für nachfolgende Aufrufe verwendet. Schlechte Gestaltung und schlechtere Dokumentation meine Meinung. – mix3d