HTML5播放器是一個非常流行的媒體播放器,可以用于播放音頻和視頻。它在比較多的網站上被使用。
本文將介紹如何使用HTML5播放器實現快進功能的拖動代碼。以下是相應的HTML5代碼:
<video id="myVideo" width="320" height="240">
<source src="video.mp4" type="video/mp4">
</video>
接下來是JS代碼,可以將它放在<head>標簽中:
<script>
var video = document.getElementById("myVideo");
var seekBar = document.getElementById("seekBar");
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;
});
</script>
上述代碼將創建一個變量“video”來表示視頻元素,另外創建一個變量“seekBar”來表示快進進度條。addEventListener()方法用于監聽seekBar的value屬性變化。一旦進度條變化,就會調用一個函數來計算當前視頻的時間,并將該時間設置為video.currentTime的值。
同樣,video元素也監聽了timeupdate事件,監聽到事件后就會更新seekBar的值。
到此,就成功實現了拖動快進功能。以上就是如何使用HTML5播放器實現拖動快進的代碼。
上一篇svg css直接改顏色
下一篇style跟css