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

纯HTML5播放器带倍速、带画质切换的播放器

纯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>

附参数:

参数名称类型默认值说明
wrapString / HTMLElement页面上需要载入播放器的 DOM 元素或 CSS 选择器
vidString视频唯一 ID,从酷播云后台上传视频后生成
widthNumber / String'100%'播放器的宽度,支持像素值或百分比(如'100%'
heightNumber / String'auto'播放器的高度,支持像素值或'auto'
autoplayBooleanfalse播放器加载后视频是否自动播放
loopBooleanfalse视频播放结束后是否循环播放
volumeNumber0.75视频默认音量大小,范围 (0, 1)
dfNumber视频默认清晰度(0:自动, 1:流畅, 2:高清, 3:超清)
hideRepeatBooleanfalse播放结束后是否隐藏重播面板
speedBoolean / Array[2, 1.5, 1.2, 0.5]倍速播放设置。设为false关闭;传入数组可自定义倍速选项
showHdBooleantrue是否显示清晰度选择按钮
ban_history_timeString'off'是否禁止记住播放进度。设为'on'则禁止(下次打开从头播放)
watchStartTimeNumber设定从第几秒开始播放(需少于视频总时长)
watchEndTimeNumber设定播放到第几秒结束(该值之后的进度条禁止点击)

禁用拖动视频进度条

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

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>
http://www.jsqmd.com/news/1158615/

相关文章:

  • 2026年AI文献综述写作神器:从3周缩短到3天,这方法太香了!
  • PacBio + Hi-C + Illumina 三技术融合:毛白杨 740.2 Mb 二倍体解析基因组组装实战
  • Unity平面反射插件原理、优化与实战调优指南
  • 多模态模型成本优化:OpenRouter图像detail参数详解与实践
  • 扫描全能王 (CamScanner) v7.20.0.2606230000 高级版
  • STM32F103C8T6 软件I2C驱动SSD1306 OLED:3种常见初始化失败原因与修复
  • 阿里不做氢能制造商,要做产业‘操作系统提供商’
  • ARM开发板Linux内核移植实战:从源码编译到驱动适配的5个核心步骤
  • 手机端VLM部署实战:90M ONNX模型落地安卓全流程
  • EL-JY-II 实验箱存储器实验:2 种操作模式(键盘 vs 开关)的 5 步核心流程对比
  • 新加坡全球人才雇佣解决方案TOP10,助力企业稳定发展
  • MiMo-V2.5 多模态应用落地实战指南
  • C++实战:从“恶魔轮盘赌”游戏机制到面向对象编程与AI设计
  • TPA3138D2音频放大器与PIC18LF45K22微控制器的集成设计
  • Logto开源认证基础设施:基于OIDC与OAuth 2.1的完整集成指南
  • 扰动的意义
  • cryptohack-challenge-General-Greatest Common Divisor
  • 软件安装原理与排查:从学习版技术分析到合法开发环境搭建
  • 阿姆智创EPC-1761H嵌入式一体机,落地高铁闸机项目
  • 拒绝数据孤岛:基于全域数据整合与多主体模型构建 CDP 架构实践
  • 2026衢州正规漏水检测维修权威推荐-卫生间漏水免砸砖维修/厨房阳台墙面暗管漏水检测/屋顶外墙堵漏维修-防水补漏公司实测口碑榜推荐 - 即刻修防水
  • 语言引导的视觉预训练模型空间感知增强技术解析
  • 【大数据课程设计/毕业设计】基于 Django 的地域听歌偏好大数据分析系统的设计与实现 基于 Django 的音乐资源数据运维管理系统【附源码、数据库、万字文档】
  • 2026年7月临淄烧烤/淄博烧烤店哪家烟火气浓_淄博蒙恩餐饮管理有限公司 - 品牌宣传支持者
  • 如何彻底掌控惠普暗影精灵性能:OmenSuperHub开源控制工具完整指南
  • Dify实战指南:从零构建企业级AI工作流与知识库应用
  • KUKA 后台程序 SPS 与 PLC 中断对比:24ms 周期监控 vs 即时响应
  • gdal_translate报错:ERROR 1: Invalid dataset dimensions : 0 x 0、计算瓦片数量
  • 机器学习模型生产化实战:FastAPI+Docker+K8s工程化落地
  • 数据库CPU飙升90%紧急排查:从SQL执行计划到系统资源的系统性诊断