jQueryのクロスドメインのiframe MOUSEMOVE機能

Question

私は、コードを使用してVimeoのビデオのフルスクリーンを埋め込んだプロジェクトに取り組んでいます：

<iframe id="iframe" src="http://player.vimeo.com/video/...../.." width="100%" height="100%" frameborder="0"></iframe> 

私はこのようなMOUSEMOVEに会社のロゴを表示するには、親ページ上のMouseMove機能を使用しています：

$(document).ready(function() { 
    var $top = $('#logo'); 
    var $document = $(document); 
    var timer = null; 
    var timerIsRunning = false; 

    $top.hide(); 

    $document.mousemove(function(e){ 
    e.stopPropagation(); 
    }); 
    setTimeout(function() { 
        $document.mousemove(function(e) { 
          if($top.is(':hidden')) { 
           $top.fadeIn(2000); 
          } else { 
           if(!timerIsRunning) { 
            timerIsRunning = true; 
            clearTimeout(timer); 
            timer = setTimeout(function() { $top.fadeOut(); }, 15000); 
            setTimeout(function() {timerIsRunning = true;}, 15000); 
           } 
          } 
        }); 
      }, 2000); 

}); 

私の問題は...ロゴのdivが表示されない理由である埋め込まれたフルスクリーンビデオ&上のMouseMove機能を検出していないブラウザで

CSSを使用するpointer-events: none;動作しますが、ビデオプレーヤーコントロールは無効です。

解決策はありますか？

おかげ

Answer 1

iframe内のMouseMoveイベントを装着してみてください。

$(document).ready(function() { 
    var $top = $('#logo'); 
    var $document = $(document); 
    var timer = null; 
    var timerIsRunning = false; 

    $top.hide(); 

    $document.mousemove(function(e){ 
    e.stopPropagation(); 
    }); 
    setTimeout(function() { 
        $('#iframe',$document).mousemove(function(e) { 
          if($top.is(':hidden')) { 
           $top.fadeIn(2000); 
          } else { 
           if(!timerIsRunning) { 
            timerIsRunning = true; 
            clearTimeout(timer); 
            timer = setTimeout(function() { $top.fadeOut(); }, 15000); 
            setTimeout(function() {timerIsRunning = true;}, 15000); 
           } 
          } 
        }); 
      }, 2000); 

    });