0

Mozilla popcorn と d3 javascript を使用して、ビデオの上にインタラクティブなクイズ アプリケーションを作成しようとしています。

私はちょうどこれを行うための正しい方法を考え出しています.

私のアプローチはこのようなものです。quiz というポップコーン プラグインを作成します。このプラグイン コードが呼び出されると、ビデオの上部に質問が表示されます。しかし、私の質問は、このプラグイン内でビデオを制御する方法です。ポップコーンを使用してビデオを制御することは可能ですか? ユーザーがクイズの答えを提供したときにのみビデオを再開したい。

前もって感謝します

4

1 に答える 1

1

プラグインは として Popcorn インスタンス オブジェクトにアクセスできます。このオブジェクトには、ビデオを制御するための メソッドやその他のメソッドthisがあります。pauseplay

これが大まかな例です...

Popcorn.plugin('quiz', function( options ) {
    var popcorn = this;

    //todo: set up your quiz DOM elements and event listeners here

    //to keep this brief, let's just set up the submit button
    var submit = document.createElement('button');
    submit.innerHTML = 'Submit';
    submit.addEventListener('click', function submitClick() {
        //todo: save and/or display the results wherever you want

        //resume playing
        popcorn.play();
    }, false);
    //todo: attach the submit button to the DOM

    return {
        start: function () {
            //todo: make your DOM elements visible here

            //you may also choose to pause the video to allow the viewer
            //some time to answer the question.
            popcorn.pause();
        },
        end: function () {
            //todo: make your DOM elements invisible here
        },
        _teardown: function () {
            //todo: remove/delete all your DOM elements and all event listeners
            submit.removeEventListener('click', submitClick, false);
        }
    };
});

注意すべきことの 1 つは、同時に複数のクイズ イベントを行うと、奇妙な動作に遭遇する可能性があることです。現在アクティブなすべてのクイズ イベントのリストを保持し、すべてのクイズに回答した場合にのみ再生を再開することができます。しかし、それはおそらくやり過ぎです。

于 2013-11-11T04:05:54.953 に答える