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