老师还有一个bug未解决，我试了一下但是解决的还不完善
老师的代码写完以后，在播放状态下当视频播放结束后按钮不会自动显示为播放按钮而是暂停按钮。
我的解决办法是在
videoNode.addEventListener('timeupdate', function () {})中加入了如下代码
if (videoNode.currentTime == videoNode.duration) {
playNode.className = 'playNode';
}
虽然可以实现视频播放完按钮自动切换了，但是当视频结束后再次点击按钮播放视频时需要点击两次才能使视频播放，点一次不会播放，不知道是什么原因？是我加的地方不对还是代码不对呢？
以下是完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.outerNode {
width: 540px;
height: 332px;
position: absolute;
left: 50%;
top: 50%;
margin: -166px 0 0 -270px;
box-shadow: 0 0 4px #5b606d;
background-color: black;
}
.outerNode .videoNode {
width: 540px;
height: 305px;
float: left;
}
.outerNode .controlsNode {
width: 540px;
height: 27px;
float: left;
background: url("img/ctrs_bg.gif") repeat-x;
}
.outerNode .controlsNode .playNode {
float: left;
width: 15px;
height: 17px;
margin: 6px 0 0 14px;
background: url("img/playNode.png") no-repeat;
cursor: pointer;
}
.outerNode .controlsNode .pauseNode {
float: left;
width: 15px;
height: 17px;
margin: 6px 0 0 14px;
background: url("img/pause.png") no-repeat;
cursor: pointer;
}
.outerNode .controlsNode .loadNode {
width: 267px;
height: 10px;
margin: 9px 0 0 14px;
float: left;
background: url("img/load_bg.png") repeat-x;
position: relative;
}
.outerNode .controlsNode .loadNode .loadLeft {
height: 100%;
width: 3px;
position: absolute;
left: 0;
top: 0;
background: url("img/left_bg.png") no-repeat;
z-index: 4;
}
.outerNode .controlsNode .loadNode .loadRight {
height: 100%;
width: 3px;
position: absolute;
right: 0;
top: 0;
background: url("img/right_bg.png") no-repeat;
}
.outerNode .controlsNode .loadNode .crlNode {
width: 17px;
height: 17px;
background: url("img/crl_bg.png");
position: absolute;
left: -8.5px;
top: -3.5px;
cursor: pointer;
z-index: 5;
}
.outerNode .controlsNode .loadNode .lineNode {
width: 0%;
height: 7px;
position: absolute;
left: 0;
top: 1px;
background: url("img/line_bg.png") repeat-x;
}
.outerNode .controlsNode .loadNode .lineNode .lineRight {
width: 2px;
height: 100%;
position: absolute;
right: 0;
top: 0;
background: url("img/line_r_bg.png") no-repeat;
}
.outerNode .controlsNode .timeNode {
float: left;
width: 75px;
height: 10px;
margin: 9px 0 0 9px;
}
.outerNode .controlsNode .timeNode span {
font-size: 10px;
float: left;
line-height: 10px;
color: #fff;
}
.outerNode .controlsNode .volumeNode {
width: 17px;
height: 16px;
float: left;
margin: 5px 0 0 6px;
background: url("img/volume_bg.png");
}
.outerNode .controlsNode .volumeLine {
height: 8px;
width: 61px;
float: left;
margin: 10px 0 0 4px;
background: url("img/volumeLine_bg.png") repeat-x;
position: relative;
}
.outerNode .controlsNode .volumeLine .v_left {
width: 3px;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: url("img/v_left.png") no-repeat;
}
.outerNode .controlsNode .volumeLine .v_right {
width: 3px;
height: 100%;
position: absolute;
right: 0;
top: 0;
background: url("img/v_right.png") no-repeat;
}
.outerNode .controlsNode .volumeLine .v_DragNode {
width: 15px;
height: 13px;
position: absolute;
left: 58.5px;
top: -3.5px;
background: url("img/vo_d.png") no-repeat;
cursor: pointer;
}
.outerNode .controlsNode .fullNode {
width: 15px;
height: 17px;
float: left;
margin: 6px 0 0 35px;
background: url("img/full_bg.png") no-repeat;
cursor: pointer;
transition: 0.7s;
}
.outerNode .controlsNode .fullNode:hover {
background: url("img/full_hover_bg.png") no-repeat;
}
</style>
</head>
<body>
<div class="outerNode">
<video src="data/imooc.mp4" class="videoNode" poster="data/poster.jpg"></video>
<div class="controlsNode">
<div class="playNode"></div>
<div class="loadNode">
<div class="loadLeft"></div>
<div class="loadRight"></div>
<div class="crlNode"></div>
<div class="lineNode">
<div class="lineRight"></div>
</div>
</div>
<div class="timeNode">
<span class="now">00:00</span>
<span> - </span>
<span class="all">4:30</span>
</div>
<div class="volumeNode"></div>
<div class="volumeLine">
<div class="v_left"></div>
<div class="v_right"></div>
<div class="v_DragNode"></div>
</div>
<div class="fullNode"></div>
</div>
</div>
<script>
var playNode = document.getElementsByClassName('playNode')[0],
videoNode = document.getElementsByClassName('videoNode')[0],
fullNode = document.querySelector('.fullNode'),
nowNode = document.querySelector('.now'),
allNode = document.querySelector('.all'),
lineNode = document.querySelector('.lineNode'),
crlNode = document.querySelector('.crlNode'),
loadNode = document.querySelector('.loadNode'),
vDragNode = document.querySelector('.v_DragNode'),
playBln = true;
playNode.onclick = function () {
playBln = !playBln;
if (playBln == false) {
this.className = 'pauseNode';
videoNode.play();
} else {
this.className = 'playNode';
videoNode.pause();
}
// this.classList.toggle('pauseNode');
};
fullNode.onclick = function () {
if (videoNode.webkitRequestFullscreen) {
videoNode.webkitRequestFullscreen();
} else if (videoNode.mozRequestFullScreen) {
videoNode.mozRequestFullScreen();
} else {
videoNode.requestFullscreen();
}
};
videoNode.addEventListener('canplay', function () {
// allNode.innerHTML = videoNode.duration;
var needTime = parseInt(videoNode.duration);
var s = needTime % 60;
var m = parseInt(needTime / 60);
var timeNum = toDou(m) + ':' + toDou(s);
allNode.innerHTML = timeNum;
}, false);
function toDou(time) {
return time < 10 ? '0' + time : time;
}
videoNode.addEventListener('timeupdate', function () {
lineNode.style.width = videoNode.currentTime / videoNode.duration * 100 + '%';
crlNode.style.left = lineNode.offsetWidth - 8.5 + 'px';
var needTime = parseInt(videoNode.currentTime);
var s = needTime % 60;
var m = parseInt(needTime / 60);
var timeNum = toDou(m) + ':' + toDou(s);
nowNode.innerHTML = timeNum;
if (videoNode.currentTime == videoNode.duration) {
playNode.className = 'playNode';
}
}, false);
vDragNode.onmousedown = function (e) {
var ev = e || event;
var l = ev.clientX - this.offsetLeft;
document.onmousemove = function (e) {
var ev = e || event;
var needX = ev.clientX - l;
var maxX = vDragNode.parentNode.offsetWidth - 2.5;
needX = needX < -2.5 ? -2.5 : needX;
needX = needX > maxX ? maxX : needX;
var lastVolume = (vDragNode.offsetLeft + 2) / vDragNode.parentNode.offsetWidth;
videoNode.volume = lastVolume < 0 ? 0 : lastVolume;
vDragNode.style.left = needX + 'px';
};
document.onmouseup = function (e) {
document.onmousemove = document.onmouseup = null;
};
return false;
};
crlNode.onmousedown = function (e) {
var ev = e || event;
var l = ev.clientX - this.offsetLeft;
videoNode.pause();
document.onmousemove = function (e) {
var ev = e || event;
var needX = ev.clientX - l;
var maxX = loadNode.offsetWidth - 8.5;
needX = needX < -8.5 ? -8.5 : needX;
needX = needX > maxX ? maxX : needX;
crlNode.style.left = needX + 'px';
lineNode.style.width = (crlNode.offsetLeft + 9) / loadNode.offsetWidth * 100 + '%';
};
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null;
videoNode.currentTime = videoNode.duration * (crlNode.offsetLeft + 9) / loadNode.offsetWidth;
if (playBln == false) {
playNode.className = 'pauseNode';
videoNode.play();
} else {
playNode.className = 'playNode';
videoNode.pause();
}
};
return false;
};
</script>
</body>
</html>
正在回答
同学你好，可以把变量playBln修改为true
那么在点击时，对playBln取反，true取反为false，符合if条件，即可播放。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星