2017-11-19 32 views
0

私はホバー上にVimeo Videoを実装していますが、正常に動作しますが、私はそのdivの上にマウスを置くとビデオが正常に再生されますが、そのdivの外にマウスを動かすと一時停止しません。Uncaught TypeError:l(froogaloop2.min.js?ver = 4.8.3:1)で未定義のプロパティ 'ready'を読み取ることができません

Jsのコード下記見つけてください:私はしばらくの間、コンソール上のエラーを取得しています

$(document).on('mouseenter','.play-video',function(e){ 
     e.preventDefault(); 

     var videoUrl = $(this).attr('href'); 
     //alert(videoUrl); 
     $('#videoBox_'+videoUrl).show(); 
     $(this).next('#videoBox_'+videoUrl).html('<iframe id="player_'+videoUrl+'" src="http://player.vimeo.com/video/' + videoUrl + '?api=1&amp;player_id=player_'+videoUrl+'&autoplay=1" frameborder="0" allowfullscreen></iframe>'); 
     var player = $("#player_"+videoUrl); 
     //console.log(player[0].id); 
     player.mouseover(function(){ 
      froogaloop = $f(player[0].id); 
      froogaloop.api('play'); 
     }); 

     player.mouseout(function(){ 
      froogaloop = $f(player[0].id); 
      froogaloop.api('pause'); 
     }); 
    }); 

enter image description here

+0

あなたの問題を今解決しましたか? – eeya

+0

問題はまだ解決されていません –

答えて

1

が、私はこのような場合のために別の選択肢を提案したいです。

サンプル参照コード:特定のVimeoのビデオクリップを一時停止/再生するために、私たちはこのようなあなたの指定されたコードの一部を調整することができます

$(document).ready(function() { 

    // 1) Assign a given variable called oPlayer 
    var oPlayer = undefined; 

    $('.container .item').on('mouseenter', '.play-video', function(e) { 
     e.preventDefault(); 

     // 2) When user hover the hovered [iframe], The oPlayer 
     // will now be assigned to that given [iframe] element 
     oPlayer = $(this); 
     froogaloop = $f(oPlayer[0].id); 
     froogaloop.api('play'); 

    }).mouseleave(function() { 

     // 3) So by the time the user leaves that 
     // iframe, It will pause that given [iframe] 
     froogaloop = $f(oPlayer[0].id); 
     froogaloop.api('pause'); 
    }); 
}); 

は、ここで更に参照するためのjsfiddleです:https://jsfiddle.net/85dLbt2u/5/

・ホープこれは、あなたのケースを助ける。

+0

私はこの簡単なコードを実装しようとしました。しかし、私はまだ同じ問題に直面しています:http://rushabhmutha.com/aispi/shops/ –

+0

申し訳ありませんが、私たちが問題を解決できるかどうか見てください – eeya

+0

私は与えられたウェブサイトのソースコードをチェックしました。 'frogaloop'を使うためのコードスニペットを設定した場所ですか? http://rushabhmutha.com/aispi/wp-content/themes/aispi-conthem/themes/aispi-theme/js/main.js?ver=4.8.3 – eeya