2017-02-06 2 views
0

は、「ビデオ」を含む最初のセクションとして「イントロ」セクション(#intro)を持つスムーズなスクロール1ページのWebサイトで、現時点ではピックルのビットになっています。html5ビデオがビューポートを離れるときに、どのようにして一時停止するのですか?

映像がループして自動再生で、HTML5のビデオで、「イントロ-ヘディング」と呼ばれるのdivコンテナ内に収容されている(もともとこれはH1の見出しが含まれていますが、そのは省略さや映像コンテンツあわやに置き換えられて)

私は指摘しておきたいのは、intro-headingという名前のdivコンテナは、id#intro-videoのビデオを格納していますが、 'growIn'というクラスが適用されています。これまでのように私のコードをHERES、などのライブラリ笑

<script> 
    $(document).ready(function(){ 
    $(window).scroll(function(){ 
    var x = $(document).scrollTop(); 
    console.log(x); /* just for observing how far from the top i am..*/ 

    if ($(document).scrollTop() > 750) { 

     $('#intro-video').pause(); 

     } 
    }); 
    }); 
    </script> 

これは動作しません。私が$( '#intro-video).pause();を置き換えた場合は、行:

$('#intro-video').css("display","none"); 

その後、ビデオは確かに消えるが、私はまだ:)音楽を聞くことができます)

明確にはその後、これは私が吹き付けてるものではありません。私が望むのは、ビデオが一時停止する(私はそれを仮定して、私が必要とするものだけの音声は聞こえません)、ビデオがビューポートから出てきたときに再作成し、ビューポートに入る。

上記のコードは機能しませんが、CSSの表示行のようなものを使用した場合は動作します。私はあなたにこれを尋ねてこれを解決することからコースから数百マイル離れたところで私を許したいと思う何かがありますが、isInViewport.jsとして知られているライブラリがあり、これは簡単に実現できますか?ビューポートの外にいるときにvidを一時停止する - 中に戻るときにvidを再生する!

このプラグインを使用して、後で何かを達成できますか?

この段階でのヘルプは非常に高く評価されます。ありがとう。 :-)

+0

'pause'または' play' jqueryのオブジェクト、DOM要素に呼び出される必要はありません。そうでは通りJQueryを使ってHTML5ビデオを一時停止する](http://stackoverflow.com/questions/4646998/play-pause-html-5-video-using-jquery) – WhiteHat

+0

私はそれを疑った。ホワイトハットありがとう。 –

答えて

0

Okay WhiteHat、ありがとう、あなたは正しい方向に私を指摘しました。それは私が後になったことを達成することができたように見えます。 - [再生の可能複製/

<script> 
$(document).ready(function(){ 
$(window).scroll(function(){ 
    var x = $(document).scrollTop(); 
    console.log(x); 

    if ($(document).scrollTop() > 750) { 

     $('#intro-video').get(0).pause(); 

     } 

     else if ($(document).scrollTop() < 650) { 

      $('#intro-video').get(0).play(); 

     } 
    }); 
}); 
</script> 

これは非常にうまく仕事を取得感謝:)

関連する問題