澳洲幸运5直播天天计划

核彈頭H5小游戲

關閉

核彈頭小游戲

游戲輕松點
無需下載,點開即玩

拿起手機!掃我啊

核彈頭小游戲
無需下載點擊即玩

回到頂部

當前位置: 核彈頭首頁 > 游戲教程 > 正文

html5 video進度條獲取設置教程

來源:www.kseom.com.cn    作者:集   時間: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>

此外,蘋果官網的演示也采用這樣的控制模式。

核彈頭小游戲網發布此文僅為傳遞信息,不代表認同其觀點或者證實其描述!
澳洲幸运5直播天天计划