视频问答功能播放器(视频问答)视频弹题功能实例

视频问答播放器是一种互动教学工具,在视频播放过程中弹出题目卡,学员答题后才能继续观看,提升学习参与度。视频问答功能播放器(视频问答)视频弹题功能实例:

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

视频问答播放器接口

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

问答相关的播放器接口:

名称 参数及类型 说明
sendQuestion (Array) 设置视频关联的问答题目
changeQuestion (Number,Array) 替换指定时间点对应的问答题目

事件:

名称 说明
onQuestionPopUp 问题弹出时触发
onQuestionSkip 问题被跳过时触发
onAnswerResult 提交答案后触发

使用方式:

在播放器初始化后,可以通过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>
//教育播放器实现问答功能、视频弹题功能

参数说明:

参数名称 是否必填 默认值 描述
examId - 生成规则:Long.toHexString(System.currentTimeMillis()),11位的字符串,比如:1699e49ffeb,​传值后可通过答题记录查询接口查询记录。​
showTime - 题目出现时间,单位:秒
question - 题目
choices - 选项
right_answer - 正确答案
answer - 回答正确后的解答
wrongAnswer - 回答错误后的解答
wrongTime -1 回答错误后退回第几秒,-1代表不回退
skip true 能否跳过题目继续播放视频
illustration - 问答图片的URL

我的原创内容推荐

视频应用

视频二维码应用

热门原创推荐

AI工具类文章

视频加密/防下载/防录屏

FFmpeg视频编码

谷歌浏览器

ThinkPad电脑

视频直播

相关推荐
lqj_本人2 小时前
鸿蒙OS&UniApp 开发支持图片和视频的多媒体展示组件#三方框架 #Uniapp
uni-app·音视频·harmonyos
zhangfeng11332 小时前
绘制音频信号的各种频谱图,包括Mel频谱图、STFT频谱图等。它不仅能够绘制频谱图librosa.display.specshow
音视频
清月电子4 小时前
KT6368A通过蓝牙芯片获取手机时间详细说明,对应串口指令举例
单片机·嵌入式硬件·物联网·智能手机·音视频
zhangfeng113311 小时前
通过对音频信号提取梅尔频谱图并转换为对数梅尔频谱图得到的。它的形状主要由以下参数决定 转换成图片 64*64像素
算法·机器学习·音视频
lyitcc11 小时前
moviepy视频添加中文水印
音视频·moviepy·python添加视频水印
远瞻。11 小时前
【论文精读】2024 arXiv --VEnhancer现实世界视频超分辨率(RealWorld VSR)
论文阅读·stable diffusion·音视频·超分辨率重建
linux开发之路18 小时前
【备战秋招】C++音视频开发经典面试题整理
c++·ffmpeg·音视频·rtmp·音视频编解码
Tatalaluola21 小时前
【Quest开发】空间音频的使用
unity·游戏引擎·音视频·vr
EasyDSS1 天前
EasyRTC嵌入式SDK音视频实时通话助力WebRTC技术与智能硬件协同发展
人工智能·音视频
Sleepless_斑马1 天前
【FFmpeg+SDL】播放音频时,声音正常但是有杂音问题(已解决)
qt·ffmpeg·音视频