快捷導(dǎo)航

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

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

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

前言

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

下面是一個基本的例子，展示了如何使用JavaScript來控制視頻播放的進(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秒  
  }  
}

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