An open-source, zero-dependency HTML5 player with embedded quizzes. Drop it into any frontend and validate answers on any backend.
Press play. The video stops at 0:06, 0:18, 0:32 and 0:46. This static demo validates answers in the browser; in production, point endpoint to the PHP, Go or Node SDK.
The video pauses within a frame of each quiz time, plays a synthesized beep and shows the question.
The right answer can stay on your server. PHP/Laravel, Go and Node SDKs validate and store answers.
Optionally stop viewers from seeking past a question they haven't answered yet.
Keyboard navigation, focus trap, ARIA live regions and reduced-motion support.
English, Português, Español, Français, Deutsch, 中文 and 日本語 built in. Override any text.
Everything is a CSS custom property. One line changes the brand color.
<script src="https://cdn.jsdelivr.net/npm/@quizplayer/core@0/dist/quizplayer.min.js"></script>
<div id="player"></div>
<script>
QuizPlayer.create('#player', {
src: '/lesson.mp4',
quizzes: [{ id: 'q1', time: 6, question: 'What just happened?',
options: [{ id: 'a', text: 'A cue point paused the video' }, { id: 'b', text: 'It crashed' }],
correct: 'a' }],
onAnswer: ({ record }) => console.log(record),
});
</script>