用js控制視頻播放進度基本示例代碼
前言
在JavaScript中控制視頻播放進度,你可以使用HTML5的標簽,并通過操作其currentTime屬性來實現(xiàn)。currentTime屬性表示視頻或音頻的當前播放時間(以秒為單位)。你可以設置這個屬性來跳轉到視頻的特定時間點,或者通過增加或減少其值來快進或快退視頻。
下面是一個基本的例子,展示了如何使用JavaScript來控制視頻播放的進度:
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()">跳轉到5秒</button> <button onclick="jumpToTenSeconds()">跳轉到10秒</button>
JavaScript部分:
function jumpToFiveSeconds() { var video = document.getElementById("myVideo"); if (video.readyState >= 2) { // 確保視頻已經(jīng)加載 video.currentTime = 5; // 跳轉到5秒 } } function jumpToTenSeconds() { var video = document.getElementById("myVideo"); if (video.readyState >= 2) { // 確保視頻已經(jīng)加載 video.currentTime = 10; // 跳轉到10秒 } }
在這個例子中,我們有兩個按鈕,分別用于將視頻播放進度跳轉到5秒和10秒。通過document.getElementById獲取元素,然后設置其currentTime屬性為想要跳轉的時間點(以秒為單位)。
注意:
在嘗試設置currentTime之前,我們檢查video.readyState以確保視頻元數(shù)據(jù)已經(jīng)加載(readyState >= 2)。這是為了確保視頻可以被成功尋址到指定時間點。
readyState屬性表示媒體元素的當前狀態(tài)。readyState的值范圍從0到4,其中2代表“元數(shù)據(jù)已加載”,即足夠的數(shù)據(jù)來顯示媒體時長等信息,但不一定足以開始播放。
controls屬性在標簽中是為了給用戶一個默認的播放控件,包括播放/暫停按鈕、音量控制等。這不是必須的,但在這個例子中,它有助于你直觀地看到視頻的狀態(tài)變化。
此外,你還可以通過監(jiān)聽事件(如timeupdate)來動態(tài)跟蹤視頻的播放進度,或者使用play(), pause(), seeking, seeked等方法來控制視頻的播放行為。
總結
到此這篇關于用js控制視頻播放進度的文章就介紹到這了,更多相關js控制視頻播放進度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
React+Typescript實現(xiàn)倒計時Hook的方法
本文主要介紹了React+Typescript實現(xiàn)倒計時Hook的方法,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09微信開發(fā) JS-SDK 6.0.2 經(jīng)常遇到問題總結
本篇文章主要介紹了"微信微信JS-SDK 6.0.2 遇到問題 ",主要涉及到微信微信JS-SDK 6.0.2 填坑筆記 方面的內(nèi)容,對于微信微信JS-SDK 6.0.2 填坑筆記 感興趣的同學可以參考一下。2016-12-12基于JavaScript將表單序列化類型的數(shù)據(jù)轉化成對象的處理(允許對象中包含對象)
這篇文章主要介紹了基于JavaScript將表單序列化類型的數(shù)據(jù)轉化成對象的處理(允許對象中包含對象) 的相關資料,需要的朋友可以參考下2015-12-12JS通過ajax動態(tài)讀取xml文件內(nèi)容的方法
這篇文章主要介紹了JS通過ajax動態(tài)讀取xml文件內(nèi)容的方法,實例分析了Ajax操作XML文件的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03