教培机构在线视频播放器的视频问答功能（视频弹题、问答播放）的实现与探讨

阿酷Tony / 原创内容 / 2025.5.22 / 长沙 /

更新了一下目录~~~~~

教培机构在线视频播放器的视频问答（视频弹题、问答播放）功能实现

图1 . 视频问答功能/视频弹题功能

请看我这边做的DEMO“视频问答功能”的演示实例，如下链接为DEMO链接：

已隐藏

1.视频问答功能

视频播放器的视频问答功能（也叫问答播放器、视频弹题、视频问答功能）是一种互动的教学功能，在教育培训机构中，用的比较多。视频问答功能，主要是在视频播放过程中，弹出问题卡片，学员回复问题后，再继续播放，增强学员的参与度和学习效果。

以下是该功能的一些主要特点：

1. 与培训视频内容的互动性：视频播放到特定时间点时，会弹出问题卡片，学员必须正确回答问题后才能继续观看视频；回答错误，则向前返回一小段视频，重新观看。
2. 学员离线防挂机：通过强制学员回答问题，有效避免学员挂机现象，确保学员积极认真的参与学习。
3. 课程内容防录屏、防盗录：问答功能可以降低盗版视频的观看体验，因为录屏后的视频无法正常播放。
4. 学习效果评估：通过学员对问题的回答情况，可以评估其对知识点的掌握程度。

2.视频问答播放器接口

如果您的业务场景需要更加灵活的控制方式，或者题库在自身的业务系统，还可以通过播放器提供的问答接口来实现。

问答相关的播放器接口： 

事件： 

使用方式： 

在播放器初始化后，可以通过sendQuestion接口设置本次视频播放过程中需要显示的问答题目。通过监听问答相关事件，可以进行自身业务的处理。changeQuestion用于修改指定时间点需要显示的问答题目，比如，答错回退后，再次弹题时显示不同的问题。

代码示例如下： 

<div id="player"> </div> 
<script src="//player.polyv.net/resp/vod-player/latest/player.js"></script> 
<script>
  var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8',
});
player.on('s2j_onPlayerInitOver',
function(e) {
    var question1 = [{
        "examId": "1699e49ffeb",
        "question": "第1个问题:1 x 2 = ?",
        "choices": [{
            "answer": "1"
        },
        {
            "answer": "2",
            "right_answer": 1
        },
        {
            "answer": "3"
        },
        {
            "answer": "4"
        }],
        "answer": "",
        "wrongAnswer": "",
        "skip": true,
        "wrongTime": 5,
        "showTime": 10
    }];
    player.sendQuestion(question1);
});
window.onQuestionSkip = function(data, vid) {
    console.log('onQuestionSkip', data, vid);
}
window.onQuestionPopUp = function(data, vid) {
    console.log('onQuestionPopUp', data, vid);
}
window.onAnswerResult = function(isRight, data, msg, seekTime, vid) {
    console.log('onAnswerResult',isRight, data, msg, seekTime, vid);
    if (!isRight) {
        var question2 = [{
            "examId": "1699e49ffef",
            "question": "第2个问题:2 x 2 = ?",
            "choices": [{
                "answer": "1"
            },
            {
                "answer": "2"
            },
            {
                "answer": "3"
            },
            {
                "answer": "4",
                "right_answer": 1
            }],
            "answer": "",
            "wrongAnswer": "",
            "skip": true,
            "wrongTime": 5,
            "showTime": 10
        }];
        player.changeQuestion(10, question2);
    }
}
</script>
//教育播放器实现问答功能、视频弹题功能

参数说明：

3.实际应用截图效果

图2 . 正常观看画面

图3 . 由于设置视频问答弹题的时间点为第95秒，所以会在该指定时间点，弹出问题。 

（注：弹出题目的内容，通常是视频刚刚介绍过的内容，学员在学习之后，看到弹出的问题，再进行回答，以达到强化学习要点的要求。）

图4 . 学员点答案，回答错误，播放器弹出回答错误的提示，并会提示再看一小段内容。

图4 . 学员回答正确时，弹出回答正确的提示，并继续播放视频。

 管理后台设定

添加问题：点击“添加问答”，在弹出的界面中设置问题、答案、问题出现的时间点等信息。

问题：根据视频内容和知识重点自定义设置问题。

时间：设置问题出现的时间点，当视频播放到该时间点时，问题会自动弹出。

 如果对您有帮助，记得关注我，一个天天热爱视频行业的博主 >>> 

  [ 视频安全 ] 相关原创文章

• 教育教学类视频如何处理加密与安全（组图）
• 防止360浏览器小窗下载视频
• 视频安全之视频播放密码功能(设置观看密码功能教程)
• 视频安全之授权播放和防录屏跑马灯
• 企业级微信视频直播如何设定观看白名单（设定手机观看白名单、授权观看直播）
• 在线教育网站如何更好的实现视频安全视频保护？
• 免费视频二维码的完整使用教程（适合小企业做微信视频宣传） 
• Html5视频video标签中使用blob实现视频播放加密

[ 视频直播 ] 相关原创文章

• 云直播客户端4.0活动拍摄类直播与教学培训类直播测试
• 视频直播画中画效果（边角叠加、去背景、并列布局三种效果）
• 做视频直播时如何测试本地网络的上行带宽(网速测试)
• 在线导播台（网页导播台）混流效果
• 云课堂直播功能介绍，更贴合在线教育、企业内训的场景应用
• 微信公众号直播有哪些不一样的玩法？
• 企业年会活动常用的音频类、视频类工具软件