老师 总是提示onclick错误 为什么
<!DOCTYPE html>
<html>
<head>
<title>视频播放</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
*{margin: 0;padding: 0;}
.wrapNode{width: 530px;height: 320px;margin: 200px auto;background-color: #000;}
.wrapNode video{width: 530px;height: 300px;}
.controlsNode{width: 530px;height: 20px;position: relative;background: url(images/ctrs_bg.gif) repeat-x;}
.PlayNode{width: 13px;height: 15px;background: url(images/playNode.png);position: absolute;top: 50%;left: 13px;margin-top: -7.5px;}
.probg{width: 226px;height: 7px;position: absolute;top: 50%;left: 40px;margin-top: -3.5px;background: url(images/load_bg.png);border-radius: 3px;}
.probgload{width: 50%;height: 100%;border-radius: 3px;background: url(images/line_bg.png);}
.raduis{width: 16px;height: 15px;background: url(images/crl_bg.png);position: absolute;top: 50%;left: 40px;margin-top: -7.5px;z-index: 2;}
.time{width: 152px;height: 12px;position: absolute;top: 50%;left: 282px;margin-top: -6px;line-height: 12px;color: #fff;}
.volumeing{width: 18px;height: 16px;position: absolute;top: 50%;left: 438px;margin-top: -8px;background: url(images/volume_bg.png);}
.volumeing_pro{width: 61px;height: 7px;position: absolute;top: 50%;left:460px;margin-top: -3.5px;background: url(images/volumeLine_bg.png);border-radius: 3px;}
.raduisvolume{left: 460px;}
</style>
</head>
<body>
<div>
<!-- 最外层的盒子 -->
<div class="wrapNode">
<!-- 视频的链接地址 -->
<video src="data/imooc.mp4" poster="data/poster.jpg" class="videoing"></video>
<!-- 控制器元素 -->
<div class="controlsNode">
<!-- 播放暂停按钮 -->
<div class="PlayNode"></div>
<!-- 进度条 -->
<div class="Progressbar">
<!-- 进度条上面的原卷 -->
<div class="raduis"></div>
<!-- 动起来的进度条 -->
<div class="probg">
<div class="probgload"></div>
</div>
</div>
<!-- 播放时间 -->
<div class="time">
<span>00.00</span>
<span>-</span>
<span>04:30</span>
</div>
<!-- 喇叭音量 -->
<div class="volumeing"></div>
<div class="volumeing_pro">
</div>
<div class="raduisvolume raduis"></div>
</div>
</div>
</div>
<script type="text/javascript">
var PlayNode = document.getElementsByClassName('playNode')[0],
videoing=document.querySelector('videoing'),
btnplay=true;
PlayNode.onclick = function(){
btnplay=!btnplay;
if (btnplay==false) {
videoing.play();
}else{
videoing.pause();
}
}
</script>
</body>
</html>
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星