如何解决视频进度不会在点击时更新-Javascript
伙计们,我正在尝试制作新的视频播放器,并且在移动视频进度栏时,它不起作用。当我双击它实际上起作用。
HTML:
<video
src="gone.mp4"
id="video"
class="screen"
poster="poster.png"
></video>
<div class="controls">
<button class="btn" id="play">
<i class="fa fa-play fa-2x"></i>
</button>
<button class="btn" id="stop">
<i class="fa fa-stop fa-2x"></i>
</button>
<input
type="range"
id="progress"
class="progress"
min="0"
max="100"
step="0.1"
value="0"
/>
<span class="timestamp" id="timestamp">00:00</span>
</div>
JavaScript:
const video = document.getElementById("video"),play = document.getElementById("play"),stop = document.getElementById("stop"),progress = document.getElementById("progress"),timestamp = document.getElementById("timestamp");
video.addEventListener("click",toggleVideoStatus);
video.addEventListener("pause",updatePlayIcon);
video.addEventListener("play",updatePlayIcon);
video.addEventListener("timeupdate",updateProgress);
play.addEventListener("click",toggleVideoStatus);
stop.addEventListener("click",stopVideo)
progress.addEventListener("change",setVideoProgress);
function toggleVideoStatus(){
if(video.paused){
video.play();
} else {
video.pause();
}
}
function updatePlayIcon() {
if(video.paused){
play.innerHTML = "<i class='fa fa-play fa-2x'></i>";
} else {
play.innerHTML = "<i class='fa fa-pause fa-2x'></i>";
}
}
function updateProgress() {
// console.log(video.currentTime); // Streaming Current Seconds
// console.log(video.duration); // Total Video Time
progress.value = (video.currentTime / video.duration) * 100;
// Get Minutes
let mins = Math.floor(video.currentTime / 60 );
if(mins < 10){
mins = "0" + String(mins);
}
// Get Seconds
let secs = Math.floor(video.currentTime % 60);
if(secs < 10){
secs = "0" + String(secs);
}
timestamp.innerHTML = `${mins} : ${secs}`;
}
function setVideoProgress() {
video.currentTime = (+progress.value * video.duration) / 100
}
function stopVideo(){
video.currentTime = 0;
video.pause();
}
对于进度栏,我使用了Change event ...对于单击视频缓冲区,我使用了click事件,而我也看到了任何良好的结果。 请让我知道我是否想念任何东西。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。