jquery插件实现播放进度条

最新推荐文章于 2019-04-08 08:56:01 发布
最新推荐文章于 2019-04-08 08:56:01 发布
阅读量5.7k 收藏
点赞数
分类专栏： jquery 文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aboutcjp/article/details/53817001
版权

自己写了一个插件，主要是实现播放进度条的，学生学习作品，可以拖动。不过在移动端还是不可拖动。

主要原理是设置一个容器，例如div，获得它的长度，然后设置时间，单位毫秒，把获得的长度除以时间，利用js定时器，每1秒改变一次。这就基本实现进度条了。

拖动的话，就是处理鼠标按下，移动，抬起这些动作来处理的。东西已经托管到github了地址 https://github.com/IMMC，有兴趣可以看看，然后有问题，希望一起交流下，前端小学生，希望多学习学习..

aboutcjp
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现播放器，有进度条，能控制音量
01-24
很好的一个js播放器哦，有进度条，有歌词等等，给media player 没区别。
jQuery响应式流程步骤进度条插件.zip
07-04
jQuery响应式流程步骤进度条插件是一款可设置是否显示上一步下一步按钮，是否可点击进度条节点。
基于Jquery的音乐播放器进度条插件
atzj74690的博客
01-29 619
　　自己基于豆瓣FM的ui仿写qq音乐时，基于Jquery手写的进度条插件，效果图如下： 　　 　　主要特色： 　　　　① 可自适应挂载元素的宽度，也可以自己设置进度条宽度； 　　　　② 支持部分默认参数修改（具体见使用说明）； 　　　　③ 允许最大时间为23:59:59，高于此值将默认修改为此值； 　　　　④ 可以自己控制进度条动画的开关及重置； 　　　　⑤ 可以获取进度...
基于JQuery的进度条实现
weixin_34289454的博客
04-05 131
功能描述：顾名思义，既是形象地用柱状条长短变化表示进度变化过程的工具。如下图： 实现 组成：单看进度条的组成，外层是一个父标签，有一定长度，有边框，便于表现总的进度大小；里层是一个子标签，宽度为一定百分比的父标签宽度，并且背景色填充，有文本内容，文本居右，有一定内边距。 动画：为子标签设置一个轮询器，当宽度达到父标签宽度100%时，关闭轮询器，并做自定义操作 代码： HT...
jquery进度条插件
prospertu的专栏
04-08 1508
JQMeter官网地址：进入官网 在官网上我们也找不到他的这个在进度条开始后，用JS第N次修改进度值的函数，所以这个是建议只显示一次的进度使用，如果非要多次修改，可以多次调用生成函数，然后把动画时间改为0，百分比显示隐藏，看来效果有点生硬。 注：在官网上可以下载此JS。 jQMeter是一款简单实用的轻量级进度条jQuery插件，它可以显示为水平或垂直进度条，进度条加载时带有动画特效，...
jQuery可拖动播放进度条代码
04-07
jQuery可拖动播放进度条代码是一款播放进度条插件，支持拖动，可以控制，可设置时间等等。
jQuery可拖动播放进度条插件.zip
最新发布
09-22
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
jQuery可拖动播放进度条插件
06-10
这是一款简单蓝色的播放进度条插件，支持拖动，可以控制，可设置时间等等，jQuery可拖动播放进度条代码。
jQuery带播放进度条水平时间轴
07-06
该播放进度条水平时间轴是一款带日期和星期，进度条播放的时间轴代码。
jQuery插件JWPlayer视频播放器用法实例分析
10-20
JWPlayer广泛应用于网页中，尤其与jQuery结合使用时，能提供方便的API和丰富的自定义选项，使得视频播放功能的实现更加简单。 在上述实例中，我们首先引入了jQuery库和JWPlayer的JavaScript文件。然后，在`<head>`...
jQuery-带节点步骤进度条插件
03-07
jQuery-带节点步骤进度条插件
H5 jQuery响应式流程步骤进度条插件.zip
07-11
代码片段： var step1=new SetStep({ content:'.stepCont1', showBtn:false, }) var step2=new SetStep({ content:'.stepCont2', clickAble:false }) var step3=new SetStep({ content:'.stepCont3' })
jQuery带节点步骤进度条插件.zip
07-04
jQuery带节点步骤进度条插件是一款发起募捐步骤进度样式，支持响应式的流程步骤进度条代码
js控制的wmp播放器，含进度条
11-19
一个html页面，内部js控制wmp播放流媒体文件，并有进度条显示。<br>http://blog.csdn.net/lhfzd2004/archive/2007/05/16/1611264.aspx
JQuery节点进度条代码插件
11-28
JQuery节点进度条代码插件，用来显示多少个节点，可用于审批流程图。
jquery 进度条插件
wwwyuanliang10000的专栏
07-17 887
第一种情况： 自己编写html，渲染进度条，以easyui为例子 { field: "rate1", title: "文件下发率", width: 200, align: "left", formatter: function(value){ var v = value == "" ? "" : value+"%"; var pixel
jquery 进度条
12-21
jquery的一个进度条插件，你可以通过调用实现不同的进度条显示效果
js实现音频控制进度条功能
10-20
本文主要介绍了js实现音频控制进度条功能的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧
js实现音乐播放控制条
10-19
主要为大家详细介绍了js实现音乐播放控制条，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用jQuery 插件 实现视频的点击播放
06-03
要用 jQuery 插件实现视频的点击播放，可以使用 jquery-video 插件。具体实现步骤如下： 1. 引入 jquery-video 插件的 CSS 和 JS 文件。 ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.video/1.2.2/jquery.video.min.css"> <script src="https://cdn.jsdelivr.net/jquery.video/1.2.2/jquery.video.min.js"></script> ``` 2. 在 HTML 中添加视频元素。 ```html <video id="myVideo" width="640" height="360" poster="video-poster.jpg"> <source src="my-video.mp4" type="video/mp4"> <source src="my-video.webm" type="video/webm"> <source src="my-video.ogg" type="video/ogg"> </video> ``` 3. 在 JavaScript 中调用 jquery-video 插件。 ```javascript $(document).ready(function() { $('#myVideo').video({ controls: true, // 显示控制条 autoplay: false, // 不自动播放 preload: 'auto' // 自动预加载 }); }); ``` 4. 给视频元素添加点击事件。 ```javascript $('#myVideo').click(function() { $(this)[0].paused ? $(this)[0].play() : $(this)[0].pause(); }); ``` 这样就实现了视频的点击播放功能。点击视频时，判断视频是否暂停，如果暂停则播放，否则暂停。注意，这里视频元素的 ID 为 myVideo，需要根据实际情况修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值