HTML5視頻滾動條是一種非常方便的功能，它可以讓網站上的視頻播放器更加易用和用戶友好。下面我們來介紹一下利用HTML5的video標簽和JS代碼實現一個基本的滾動條。

function initVideo(){
var videoControls = document.querySelector("#videoControls");
var video = document.querySelector("#myVideo");
//給滾動條增加事件監聽
document.querySelector("#seekBar").addEventListener("change", function(){
var time = video.duration * (seekBar.value / 100);
video.currentTime = time;
});
// 更新滾動條的值
video.addEventListener("timeupdate", function(){
var value = (100 / video.duration) * video.currentTime;
seekBar.value = value;
});
//拖動滾動條后隨之改變視頻播放時刻
seekBar.addEventListener("mousedown", function(){
video.pause();
});
seekBar.addEventListener("mouseup", function(){
video.play();
});
// 控制視頻的播放和暫停
videoControls.addEventListener("click", function(event){
if(event.target == playBtn){
video.play();
}else if(event.target == pauseBtn){
video.pause();
}
});
}
window.onload = initVideo;

上述代碼中，我們首先使用querySelector方法選擇了視頻和控制區域的元素，然后給滾動條和控制區域綁定事件監聽。通過監聽視頻播放的時間更新事件，我們可以根據當前視頻播放的時間和總時間計算出滾動條應該所在的位置，從而將滾動條的值進行更新。

同時，我們還實現了拖動滾動條控制視頻播放時刻的功能，通過mousedown和mouseup事件實現了拖動滾動條前先暫停視頻，放開后繼續播放的功能。最后利用事件委托的方式實現控制區域內的播放和暫停按鈕的功能。

通過以上JS代碼可以實現基本的HTML5視頻滾動條功能，當然，在實際項目中可能還需要對滾動條進行更加細致的配置和樣式優化。