jquery - jQuery 関数を使用して Popcorn.JS イベントをトリガーする

Question

Choose Your Own Adventure インタラクティブ ビデオを作成しようとしていて、Popcorn.JS と jQuery を統合する方法を見つけようとしています。Popcorn/jQuery の相互作用に関するこのスレッドを既に読んだことがあります(これが、コードで .on 関数を使用している理由です) が、私が探しているものとは異なっていました。

私は Popcorn.JS 要素が jQuery アクションによってトリガーされるようにしたいと考えています (たとえば、ユーザーが特定の div 内をクリックすると、ビデオは 36 秒にスキップして再生を開始します)。また、ビデオの特定の時間によって jQuery 関数がトリガーされるようにしたいと考えています。 (たとえば、ビデオが 20 秒に達すると、jQuery がトリガーされて特定の div がフェードアウトされます)。

この例では、ビデオが 12 秒で一時停止し、ユーザーが #BoxToBeClicked をクリックすると、ビデオが 30 秒に進み、そこから再生を開始する方法を見つけようとしています。

    var pop = Popcorn('#demo_video', {
        pauseOnLinkClicked: true
    });

    pop.play();

    pop.cue(12, function(){
        pop.pause();
    });

    $('#BoxToBeClicked').on("click", function(){
        $('#demo_video').currentTime(30).play();
    });

これについては、ビデオが 46 秒に達するたびに div をフェードアウトさせる方法を見つけようとしています。

    pop.cue(46, function() {
        $('#Fader').on("fadeOut('slowly')");
    });