2 qq 35693863 qq_35693863 于 2017.01.12 23:07 提问

html新标签video标签的进度条位置问题

https://segmentfault.com/q/1010000002740363?_ea=195739
这个网页
其他的都看懂了,为什么要减2,我实在是看不懂,比如进度条总宽,100,我点了50的位置,50除100是0.5,0.5再乘100又是50,也就是我点的位置,这样算没有错,可是
减2是干嘛用的?我实在看不懂这句代码
playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";

3个回答

yushiyoufight
yushiyoufight   Rxr 2017.01.13 08:31
已采纳

是因为border吧,猜的

devmiao
devmiao   Ds   Rxr 2017.01.12 23:57
welan123123
welan123123   2017.01.13 09:11

你把-2去掉,观察一下点击后进度条和鼠标的位置就明白了

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
获取并设置HTML5 Video的当前进度
上周翻译了一篇文章: 如何获取HTML5视频的持续时间。很显然这是一门简单却很实用的技术, 但我认为还有一个更重要的知识点是控制视频的时间设置。在用HTML5技术处理视频时,设置(setting)和获取(getting)时间都是很有用的,那就让我们一起来看看如何达成这个 目标吧!在管理视频状态时,最重要的是要了解 currentTime 是个什么鬼。你可以通过这个属性获取当前播放到了哪个时间点
video标签-点击视频屏幕 播放视频,显示进度条
实现效果: 根据指定时间使用不同效果 点击video封面图片 播放视频 视频播放时显示进度条 示例代码: <div> @if(time() - strtotime('2016-11-17 15:30:00') < 0) <video src="/cdsassets/upload/video/20161117.mp4" x-webkit-airplay="true" webkit-
HTML5-video标签-实现点击预览图播放或暂停视频
刚刚参加工作,开始更多的接触到一些新的知识,促使我开始了解html5和css3的新特性。这时我才真的发现到html5和css3的强大。 之前关于视频的控制更多的是运用复杂来实现,但在html5中新加入了<video>标签以及相应的DOM,通过这项新特性,我们能对网页中的视频进行更多简单的控制。 以下属性内容摘抄至W3CSchool 浏览器支持: Internet Explorer 9+,
[HTML5] Video 标签播放及控制视频
Video 是 HTML5 中新增的标签,使用 Video 标签可以播放 ogg、mp4 、webm 等格式的视频,Video 标签的引入,减少前端页面对 Flash 动画的依赖。0x0 预备知识不同的浏览器支持的视频格式可能不同,以下是摘自 W3School 各个浏览器对三种视频格式的支持情况: 0x1 在 Video 中嵌入视频 <video src="/movie.mp4" co
HTML中的<video>标签的格式和其中的属性的用法
标签 格式一: video标签 格式二: video标签 标签中的属性: src :   指明视频的文件位置。 aut
html5 video标签自定义控制条
最近做项目时要用到播放视频,采用的是h5的video标签,但是控制条不好看,所以想着自己做一套控制条!
HTML Audio/Video DOM timeupdate 事件,play()方法
HTML Audio/Video DOM timeupdate 事件 定义和用法 timeupdate 事件在音频/视频(audio/video)的播放位置发生改变时触发。 该事件可以在以下情况被调用: 播放音频/视频(audio/video) 移动音频/视频(audio/video)播放位置(即播放时刻点被改变,例如拖动了播放进度条) 提示: timeup
HTML 禁止拖动Video进度条
其实当初我以为做这个很简单然后我百度了一下,找到了以下几个办法1、用个透明的层或图片把进度条盖住2、如果是浏览器自动渲染是无法定义的,可以使用第三方的html5播放器插件,3、自己写进度条然后我需要一个去尝试 第一个很简单,一个DIV给挡住,但是包括进度条以及暂停和声量包括全屏无法点,我觉得挺好 的,就按照这个做了,然后就被喷了,不满足客户需求,奖励继续留下来加班。第二个用其他插件,感觉 <vid
使用html5 video定制视频
今天看了一下html5的video标签,还有它的属性事件方法等,就想自己定制一个视频播放器,练练手。 思路: 1、首先使用video标签,不使用默认的controls Your browser does not support the video tag 2、定制视频的播放暂停,使用play()、pause()
html5 video获取实时播放进度的方法
getvideoprogress(); function getvideoprogress() { setTimeout(function () { var vid = document.getElementById("video1"); var currentTime=vid.currentTime.toFixed(1