快捷導(dǎo)航

用js控制視頻播放進(jìn)度基本示例代碼

更新時(shí)間：2025年04月03日 10:00:01 作者：qq_42214739

寫前端的時(shí)候,很多的時(shí)候是需要支持要網(wǎng)頁(yè)視頻播放的功能,下面這篇文章主要給大家介紹了關(guān)于用js控制視頻播放進(jìn)度的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在JavaScript中控制視頻播放進(jìn)度，你可以使用HTML5的標(biāo)簽，并通過(guò)操作其currentTime屬性來(lái)實(shí)現(xiàn)。currentTime屬性表示視頻或音頻的當(dāng)前播放時(shí)間（以秒為單位）。你可以設(shè)置這個(gè)屬性來(lái)跳轉(zhuǎn)到視頻的特定時(shí)間點(diǎn)，或者通過(guò)增加或減少其值來(lái)快進(jìn)或快退視頻。

下面是一個(gè)基本的例子，展示了如何使用JavaScript來(lái)控制視頻播放的進(jìn)度：

HTML部分:

<video id="myVideo" width="320" height="240" controls>  
  <source src="movie.mp4" type="video/mp4">  
  Your browser does not support the video tag.  
</video>  
<button onclick="jumpToFiveSeconds()">跳轉(zhuǎn)到5秒</button>  
<button onclick="jumpToTenSeconds()">跳轉(zhuǎn)到10秒</button>

JavaScript部分:

function jumpToFiveSeconds() {  
  var video = document.getElementById("myVideo");  
  if (video.readyState >= 2) { // 確保視頻已經(jīng)加載  
    video.currentTime = 5; // 跳轉(zhuǎn)到5秒  
  }  
}  
  
function jumpToTenSeconds() {  
  var video = document.getElementById("myVideo");  
  if (video.readyState >= 2) { // 確保視頻已經(jīng)加載  
    video.currentTime = 10; // 跳轉(zhuǎn)到10秒  
  }  
}

在這個(gè)例子中，我們有兩個(gè)按鈕，分別用于將視頻播放進(jìn)度跳轉(zhuǎn)到5秒和10秒。通過(guò)document.getElementById獲取元素，然后設(shè)置其currentTime屬性為想要跳轉(zhuǎn)的時(shí)間點(diǎn)（以秒為單位）。