javascript - 使用 Popcorn + d3 的测验插件

Question

我正在尝试使用 mozilla popcorn 和 d3 javascript 在视频顶部创建一个交互式测验应用程序。

我只是想出正确的方法来做到这一点。

我的做法是这样的。创建一个名为 quiz 的爆米花插件，当调用此插件代码时，它将在视频顶部显示问题。但我的问题是如何控制这个插件中的视频。是否可以使用爆米花控制视频。我希望视频仅在用户提供测验答案时恢复。

提前致谢

Answer 1

插件可以访问 Popcorn 实例对象this，它具有pause和play方法以及其他用于控制视频的方法。

这是一个粗略的例子......

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);
        }
    };
});

需要注意的一件事是，如果您同时有多个测验事件，您可能会遇到一些奇怪的行为。可以保留所有当前活动的测验事件的列表，并且只有在所有测验都被回答后才能恢复播放。但这可能是矫枉过正。