Question

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

2017-04-22

64

javascript

我正在使用此代码制作带有自定义控件的视频播放器。出于某种原因，我收到一条错误消息，提示我“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

您在 playvid() 函数中拥有 vidseek() 和 seektimeupdate() 。查看以下代码：

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>