Question

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

我正在找出正确的方法。

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

先谢谢

Answer 1

插件可以this访问Popcorn实例对象，该对象具有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);
        }
    };
});

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

使用Popcorn + d3测验插件

1 个答案: