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

附参数:

参数名称 类型 默认值 说明
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>
相关推荐
90后的晨仔3 小时前
从 H5 到 uni-app:一篇写给前端小白的"翻译指南"
前端·vue.js·前端框架
陈随易4 小时前
moon,apt和yum之外linux系统命令安装新选择
前端·后端·程序员
IT小盘4 小时前
13-企业Prompt模板-角色任务约束与输出格式
java·前端·prompt
徐小夕5 小时前
开源!我用SQLite + DuckDB打造了一款可视化AI问数平台
前端·算法·github
leslie1185 小时前
babel笔记
前端
用户059540174465 小时前
Redis 记忆存储踩坑实录:一个并发写入 Bug 让我排查了 4 小时
前端·css
小徐_23336 小时前
Wot UI 2.3.0 发布:二维码组件来了,Open Wot 与 wot-starter 同步更新
前端·微信小程序·uni-app
kyriewen6 小时前
Claude自己跑出去hack了3家公司——我为什么还在用它写代码
前端·ai编程·claude
IT_陈寒6 小时前
SpringBoot自动配置的坑,这次真踩疼我了
前端·人工智能·后端
子兮曰7 小时前
AI 浏览器 Agent 的安全困局:当自动化工具可以偷走你的登录态
前端·人工智能·后端