Question

我正在使用此代码制作带有自定义控件的视频播放器。出于某种原因，我收到一个错误，告诉我我的“seektimeupdate”和“vidseek”函数没有定义。我进入控制台，看它是否会告诉我错误在哪里，但它没有告诉我在哪里。

var myvideo = document.getElementById("myvideo")
var button = document.getElementById('button')
var seekslider = document.getElementById('vidtime');
var isplaying = false;
	function playvid() {
		if (isplaying==false) {
			myvideo.play();
			button.innerText="Pause"
			isplaying=true;
		} else {
			myvideo.pause();
      button.innerText="Play"
			isplaying=false;
		}
		function vidseek() {
			var seekto = myvideo.duration * (seekslider.value / 100);
			myvideo.currentTime = seekto;
		}
		function seektimeupdate() {
			var nt = myvideo.currentTime * (100 / myvideo.duration)
			seekslider.value=nt;
		}
		
	}
setInterval(seektimeupdate,10,false)
seekslider.addEventListener("change",vidseek,false)

	body {
		background-color: #42b0f4;
	}
	#videocontrols {
		width:250px;
		background-color: #8c93a5;
		padding: 2px;
		text-align: left;
	}
	#myvideo {
		align-self: center;
		background-color: #e2eaff;
		width: 250px;
		padding: 2px;
	}
	#vidtime {
		width: 100px;
	}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<video src="https://www.w3schools.com/html/mov_bbb.mp4" id="myvideo"></video>
<div id="videocontrols">
<font color="#8c93a5">cv</font><button id="button" onclick="playvid()" height="25">Play</button><input type="range" id="vidtime" value="0" min="0" max="100">
</div>

</body>

如果你看看我的主要代码，你可以告诉它有点乱，但是应该做的是改变相对于滑块的时间并每10毫秒更新一次条，而不是我只是得到一个大错误。任何帮助，将不胜感激。提前谢谢！

Answer 1

vidseek()函数中有seektimeupdate()和playvid()。请看下面的代码：

var myvideo = document.getElementById("myvideo")
var button = document.getElementById('button')
var seekslider = document.getElementById('vidtime');
var isplaying = false;
	function playvid() {
		if (isplaying==false) {
			myvideo.play();
			button.innerText="Pause"
			isplaying=true;
		} else {
			myvideo.pause();
      button.innerText="Play"
			isplaying=false;
		}
	}
    
    /* vidseek() and seektimeupdate() should live outside of playvid() function */ 
    function vidseek() {
			var seekto = myvideo.duration * (seekslider.value / 100);
			myvideo.currentTime = seekto;
	}
	
    function seektimeupdate() {
			var nt = myvideo.currentTime * (100 / myvideo.duration)
			seekslider.value=nt;
	}
setInterval(seektimeupdate,10,false)
seekslider.addEventListener("change",vidseek,false)

body {
		background-color: #42b0f4;
	}
	#videocontrols {
		width:250px;
		background-color: #8c93a5;
		padding: 2px;
		text-align: left;
	}
	#myvideo {
		align-self: center;
		background-color: #e2eaff;
		width: 250px;
		padding: 2px;
	}
	#vidtime {
		width: 100px;
	}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<video src="https://www.w3schools.com/html/mov_bbb.mp4" id="myvideo"></video>
<div id="videocontrols">
<font color="#8c93a5">cv</font><button id="button" onclick="playvid()" height="25">Play</button><input type="range" id="vidtime" value="0" min="0" max="100">
</div>

</body>

使用video.currentTime时出现多个错误

1 个答案: