html5 video进度条获取设置教程

来源：www.h5uc.com 作者：集时间：2016-04-19

许多小伙伴都在问html5 video进度条怎么设置，怎么获取和设置当前的视频进度，本文小编就为您详解。

在用HTML5技术处理视频时,设置(setting)和获取(getting)时间都是非常重要的，你见过哪个视频没有进度条吗?那么你知道怎么设置进度条吗?本文小编就为您详解。

在管理视频状态时，最重要的是要了解 currentTime 是个什么鬼。你可以通过这个属性获取当前播放到了哪个时间点:

// https://www.youtube.com/watch?v=Cwkej79U3ek
console.log(video.currentTime); // 25.431747

currentTime 既是 getter 又是 setter 属性, 所以可以直接设置 currentTime 值来控制播放进度:

video.currentTime = 0; // Restart

API 接口很容易理解,而且是自解释的(self-explanatory)。你仍然需要处理“second”来指定时间,包括内在实际的和外在显示的(both inward and outward),但是秒(second)这个单位和你预期的一样公平,所以说这个API设计是非常巧妙的。

	<video id="videoIntro" class="video"

	data-video-name="intro" poster="http://c1.mifile.cn/f/i/2014/cn/goods/air/overall/video-main-poster.jpg" style="height: 600px; width: 800px; display: none;">

	<source type="video/mp4"

	src="http://c1.mifile.cn/f/i/2014/cn/goods/air/overall/video-intro.mp4?2014120901">

	<source type="video/webm"

	src="http://c1.mifile.cn/f/i/2014/cn/goods/air/overall/video-intro.webm?2014120901">

	</video>