当前位置：首页 > news >正文

Html5播放器禁止拖动播放器进度条（教学场景）

news 2025/6/28 10:57:02

禁用视频课程进度条的拖动功能，主要是为了强制学员按照课程设计的顺序观看内容，防止跳过关键知识点，从而保证学习效果和课程的完整性。这在以下几种教育场景中尤为常见和有意义。

演示地址：禁用拖动视频进度条

01.防止应试作弊：
在一些需要观看视频才能解锁下一章节或完成测试的场景中，禁用拖动能确保学员真正观看了教学内容，而不是仅仅为了完成任务而快进。
02.强制观看基础知识：
对于那些知识点层层递进的课程（例如编程、数学等），禁用拖动能确保学员从最基础的概念开始学习，避免跳过前提知识导致后续学习困难。

代码调用示例（1）

完全禁止拖动视频播放器进度条。

<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,ban_seek:'on', //禁止拖动视频进度条(on,off)//ban_seek_by_limit_time:'on', //是否禁止视频拖拽未播放区域(on,off)vid: '88083abbf5bcf1356e05d39666be527a_8', playsafe:'81814fed-bdd0-4506-bec1-ebc8093148c5-hfevwsfxcsbcocx', //playsafeUrl:'https://myDomain.com/token', ts:'1568131545000',sign:'88313661ba7ded642c7b557b0a364b4b'});
</script>

代码调用示例（2）

禁止拖动视频播放器"未播放区域"的进度条(已播放过区域的进度条可以拖动)。

<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,//ban_seek:'on', //禁止拖动视频进度条(on,off)ban_seek_by_limit_time:'on', //是否禁止视频拖拽未播放区域(on,off)vid: '88083abbf5bcf1356e05d39666be527a_8', playsafe:'81814fed-bdd0-4506-bec1-ebc8093148c5-hfevwsfxcsbcocx', //playsafeUrl:'https://myDomain.com/token', ts:'1568131545000',sign:'88313661ba7ded642c7b557b0a364b4b'});
</script>

代码调用示例（3）

视频切换（连续播放），当前播放器实例可以使用changeVid接口切换正在播放的视频。当有多个视频，在上一个视频播放完毕时，自动播放下一个视频时也可采用该处理方式。

<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',showHd: true, // 播放器控制栏是否显示清晰度切换的按钮，默认为 trueshow_rate:2, // 允许选择的最高清晰度，取值：{1,2}。值为1时，只显示流畅，值为2时，可选流畅和高清。不设置时会显示全部清晰度。df:1  //视频播放默认采用的清晰度，取值：{0,1,2,3}，分别对应自动、流畅、高清、超清。
});
const hd = 3;
player.switchBitrate(hd);// 切换到超清。
</script>

禁用拖动视频进度条