求教,为啥音量没变化,innerHTML没作用Uncaught TypeError: Cannot set property 'innerHTML' of un
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="视频.css">
<style type="text/css">
#course{
width: 640px;
background-color: white;
margin: auto;
text-align: left;
box-shadow: 10px 10px 15px black;
}
body{
background-color: silver;
text-align: center;
}
ul{
list-style: none;
padding: 10px;
margin-top: -10px;
}
#yinliang{
text-align: center;
}
#kongzhi{
text-align: center;
}
button{
background: transparent;
border: 0;
outline: 0;
}
</style>
</head>
<body>
<div id="course">
<video id="screen" src="imges/trailer.mp4" width="640">
对不起,您的浏览器不支持视频。
</video>
<div id="yinliang">
<input id="volume" type="range" min="0" max="1" step="0.1" onchange="setVolume()" />
</div>
<div id="kongzhi">
<button id="toggleBtn" onclick="toggleVideo()"><img src="imges/暂停.png" width="50" height="50" /></button>
</div>
<ul>
<li>
<h3>欧洲简史</h3>
</li>
<hr/>
<li onclick="playCourse(10)">
<img src="imges/播放%201.png" width="15" height="15" />
<span>早期基督美术建筑</span>
</li>
<hr/>
<li onclick="playCourse(20)">
<img src="imges/播放%201.png" width="15" height="15" />
<span>早期基督美术之绘画</span>
</li>
<hr/>
<li onclick="playCourse(30)">
<img src="imges/播放%201.png" width="15" height="15" />
<span>早期基督美术之绘画:拜占庭美术</span>
</li>
<hr/>
<li onclick="playCourse(40)">
<img src="imges/播放%201.png" width="15" height="15" />
<span>早期基督美术之绘画:镶嵌画</span>
</li>
<hr/>
<li onclick="playCourse(50)">
<img src="imges/播放%201.png" width="15" height="15" />
<span>早期基督美术之绘画:罗马式美术</span>
</li>
</ul>
</div>
</body>
<script>
var screen = document.getElementById("screen");
var shipin = document.getElementById(video);
var volume = document.getElementById(volume);
var toggleBtn = document.getElementById(toggleBtn);
function playCourse(time) {
screen.currentTime = time;
screen.play();
}
function setVolume() {
shipin.volume = volume.value;
}
function toggleVideo() {
if(screen.paused) {
screen.play();
toggleBtn.innerHTML = '<img src="imges/播放.png" width="50" height="50" />';
}else{
screen.pause();
toggleBtn.innerHTML = '<img src="imges/暂停.png" width="50" height="50" />';
}
}
</script>
</html>