question-video-player v1.0.1

QuestionVideoPlayer

A custom Vue 3 video player component with interactive features such as questions popups at specific times.

Features

• Custom play/pause controls
• Fullscreen mode
• Volume control
• Progress bar with buffered and played indicators
• Interactive questions that appear at specified times during video playback

Installation

npm install question-video-player

Or with Yarn:

yarn add question-video-player

Usage

<template>
  <div>
    <h1>Question Video Player Example</h1>
    <QuestionVideoPlayer :src="videoSrc" :questions="videoQuestions" />
  </div>
</template>

<script>
import QuestionVideoPlayer from "question-video-player";

export default {
  components: {
    QuestionVideoPlayer,
  },
  data() {
    return {
      videoSrc: "https://www.example.com/path/to/your/video.mp4",
      videoQuestions: [
        {
          id: 1,
          question: "北京奥运会是哪年?",
          options: [1991, 1880, 2008, 2030],
          time: "00:30",
        },
        {
          id: 2,
          question: "Vue.js 的创始人是谁?",
          options: ["尤雨溪", "李宁", "马克·扎克伯格", "拉里·佩奇"],
          time: "01:45",
        },
        // 更多问题...
      ],
    };
  },
};
</script>

Props

Question Object Structure

{
  id: Number | String,
  question: String,
  options: Array<String | Number>,
  time: String // Format "MM:SS"
}

License

MIT © Zen