纯HTML5播放器带倍速、带画质切换的播放器
📅 2026/7/10 4:37:59
👁️ 阅读次数
📝 编程学习
纯HTML5播放器带倍速、带画质切换的播放器,API调用代码
设置播放器容器并初始化
<!-- 1. 提供挂载容器 --> <div id="player"></div> <script> // 2. 实例化播放器 var player = polyvPlayer({ wrap: '#player', // 容器的 CSS 选择器或 DOM 元素 width: 800, // 播放器宽度 height: 533, // 播放器高度 vid: 'e785b2c81c9e018296671a1287e99615_e', // 替换为实际的视频 VID autoplay: false, // 是否自动播放 loop: false, // 是否循环播放 }); </script>附参数:
| 参数名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
wrap | String / HTMLElement | 无 | 页面上需要载入播放器的 DOM 元素或 CSS 选择器 |
vid | String | 无 | 视频唯一 ID,从酷播云后台上传视频后生成 |
width | Number / String | '100%' | 播放器的宽度,支持像素值或百分比(如'100%') |
height | Number / String | 'auto' | 播放器的高度,支持像素值或'auto' |
autoplay | Boolean | false | 播放器加载后视频是否自动播放 |
loop | Boolean | false | 视频播放结束后是否循环播放 |
volume | Number | 0.75 | 视频默认音量大小,范围 (0, 1) |
df | Number | 无 | 视频默认清晰度(0:自动, 1:流畅, 2:高清, 3:超清) |
hideRepeat | Boolean | false | 播放结束后是否隐藏重播面板 |
speed | Boolean / Array | [2, 1.5, 1.2, 0.5] | 倍速播放设置。设为false关闭;传入数组可自定义倍速选项 |
showHd | Boolean | true | 是否显示清晰度选择按钮 |
ban_history_time | String | 'off' | 是否禁止记住播放进度。设为'on'则禁止(下次打开从头播放) |
watchStartTime | Number | 无 | 设定从第几秒开始播放(需少于视频总时长) |
watchEndTime | Number | 无 | 设定播放到第几秒结束(该值之后的进度条禁止点击) |
禁用拖动视频进度条
禁用视频课程进度条的拖动功能,主要是为了强制学员按照课程设计的顺序观看内容,防止跳过关键知识点,从而保证学习效果和课程的完整性。 这在以下几种教育场景中尤为常见和有意义。
01.防止应试作弊:
在一些需要观看视频才能解锁下一章节或完成测试的场景中,禁用拖动能确保学员真正观看了教学内容,而不是仅仅为了完成任务而快进。
02.强制观看基础知识:
对于那些知识点层层递进的课程(例如编程、数学等),禁用拖动能确保学员从最基础的概念开始学习,避免跳过前提知识导致后续学习困难。
03.确保操作步骤的理解:
在涉及具体操作演示(如软件教程、实验操作、手工制作等)的课程中,学员必须一步步跟着视频操作才能掌握技能。禁用拖动能防止他们跳过关键步骤导致操作失败。
04.准确统计学习时长:
一些在线教育平台会根据学员的实际观看时长来评估学习进度或颁发证书。禁用拖动可以确保统计的数据更真实,反映学员投入的实际时间。
代码调用示例(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>
编程学习
技术分享
实战经验