给video添加自定义进度条
思路：
1.进度条，首先要知道视频的总长度，和视频的当前进度，与其对应的便是进度条的总长度和当前的长度，两者比值相等
2.获取视频的总长度（单位是秒），获取当前进度
3.要实现的功能，首先是进度条根据视频播放的进度，不断的增加。意思就是不断的获取视频的当前进度，然后去除以视频的总长度，拿这个比值乘以进度条的总长度，就得到经度条当前的长度，赋值。
4.拖动经度条，视频在相应的位置播放。反过来，先获取进度条的当前位置，除以进度条的总长度，拿这个比值乘以视频的总长度，就得到视频当前应该播放的进度，赋值。
上面稍后有时间，把代码整理出来贴给大家。另外再添加一个效果，当用户有操作时，控制条就显示，几秒之内没有操作，控制条则消失。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>video test</title>
</head>
<body>
<style>
body{
background-color: #ccc;
}
#container{
width: 100%;
height:100px;
background-color:#000;
position: fixed;
left: 0;
bottom: 0; color: #fff;
text-align: center;
}
#box{
width: 100%;
height:100px;
background-color: #fff;
position: fixed;
left: 0;
bottom: -50px;
opacity: 0;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
transition: all .5s ease-in; color: #000;
text-align: center;
}
#box.move{
opacity: 1;
bottom: 0px;
}
</style>
<div id="container">
鼠标移入试试
<div id="box">控制条(无操作，3秒后消失)</div>
</div>
<script>
var now,timer;
// 首先获取一次，最后时间
var lastTime=new Date().getTime();
// 获取元素
var container=document.getElementById("container");
var box=document.getElementById("box");
//当鼠标移入控制条区域时，控制条显示出来
container.onmousemove=function(){
//记录一次lastTime的时间
lastTime=new Date().getTime();
// 返回结果为毫秒数
box.classList.add("move");
} // 每搁一秒检查一次，如果无操作超过3秒，则控制条消失
timer=setInterval(function(){
// 获取最新的时间
now=new Date().getTime();
//如果now的时间-lastTime超过3秒;
//就将div隐藏
if(now-lastTime>3000){
box.classList.remove("move");
}
},1000) </script>
</body>
</html>
给video添加自定义进度条的更多相关文章
- 阿里播放器踩坑记录 进度条重构 video loadByUrl失效解决方案
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 文档地址:https://player.alicdn.com/aliplayer/index. ...
- html5 实现video标签的自定义播放进度条
现在随着html5的渐热,越来越多的web开发者都开始选择使用html5写出一些比较好的web应用. html代码: <!DOCTYPE html> <html lang=" ...
- HTML5实现video标签的自定义播放进度条
现在随着html5的渐热,越来越多的web开发者都开始选择使用html5写出一些比较好的web应用. html代码: <!DOCTYPE html> <html lang=" ...
- cocos2d-x视频控件VideoPlayer的用户操作栏进度条去除(转载)
目前遇到两个问题: (1)视频控件移除有问题,会报异常. (2)视频控件有用户操作栏,用户点击屏幕会停止视频播放. 对于第一个问题,主要是移除控件时冲突引起的,目前简单处理是做一个延时处理,先stop ...
- Flex4/Flash多文件上传(带进度条)实例分享
要求 必备知识 本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上 演示地址 演 ...
- ajax 异步上传视频带进度条并提取缩略图
最近在做一个集富媒体功能于一身的项目.需要上传视频.这里我希望做成异步上传,并且有进度条,响应有状态码,视频连接,缩略图. 服务端响应 { "thumbnail": "/ ...
- html5 vedio 播放器，禁掉进度条快进快退事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- BootStrap学习(4)_分页&标签&缩略图&警告&进度条
一.分页 分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. .pagination --添加该 class 来在页面上显示分页. .disa ...
- Bootstrap 警告、进度条、列表组、面板
摘要:该部分包括警告.进度条.列表组.面板等部分. 1.警告(alert) 1.1 基本的警告(.alert) 警告的基类是 .alert .和其他样式类一块使用.例如: .alert-success ...
随机推荐
- 一次完整的http请求过程
转载:https://blog.51cto.com/linux5588/1351007 当我们在浏览器的地址栏输入 www.linux178.com,然后回车,回车这一瞬间到看到页面到底发生了什么呢? ...
- [svc]tcp三次握手四次挥手&tcp的11种状态(半连接)&tcp的time-wait
TCP的状态转化过程(11种状态)以及TIME_WAIT状态 高性能网络 | 你所不知道的TIME_WAIT和CLOSE_WAIT 我相信很多都遇到过这个问题.一旦有用户在喊:网络变慢了.第一件事情就 ...
- 『转载』判断一个正整数是不是素数，时间复杂度为O(根号n)
原文链接:https://blog.csdn.net/liangdagongjue/article/details/77895170#commentsedit PS:新手上路,实在找不到怎么转载,所以 ...
- Android 崩溃优化
Android 两种崩溃 android崩溃分为Java崩溃和Nativie崩溃 java崩溃就是java代码中,出现未捕获的异常,导致程序异常退出 Native崩溃一般是因为在Native代码中访问 ...
- selenium--控制浏览器和简单元素操作
控制浏览器1.driver.maximize_window() #浏览器最大化2.driver.set_windows_size(480*800) #浏览器设置成移动端大小(480*800),参数数字 ...
- NodeMan介绍
近年来,随着nodejs的突飞猛进,node项目数量增长迅猛,node项目完美的阐释了“开箱即用”的理念.小到创业公司,大到阿里这样的巨头,背后均有node的身影. node项目基于Chrome的V8 ...
- DeleteFile 删除文件
#include <Windows.h> #include <tchar.h> int WINAPI _tWinMain(HINSTANCE hInstance, HINSTA ...
- Mac vs code 快捷键
control + shift + L 选中所有匹配的所有单词,光标选中
- hdu 2838 Cow Sorting
题意: 给出一个数组,要求把他们排成升序,两个数字交换的代价是x + y,求代价的总和. 思路: 简单的逆序对变形,树状数组维护小于的cnt和sum即可. 代码: #include <stdio ...
- iOS 小米推送总结和遇到的坑
极光推送就不赘述了,这里说下小米推送在ios上的坑吧,查了好久也没有查到相关的文章. 极光的强大就不说了,当客户贪图实惠的时候,当人家给你让你用小米推送的时候,我的内心是崩溃的,小米推送???没听过! ...