js控制video播放和暂停，并切换class Name，一个VIDEO是正常的，2个就出错了，如何解决。
<button class="aa_2" onClick="toggleHandle(this)">切换1</button>
<video class="video" controls><source src="222.mp4" type="video/mp4"></video>
<button class="aa_2b" onClick="toggleHandleb(this)">切换2</button>
<video class="videob" controls><source src="333.mp4" type="video/mp4"></video>
<script>
var video = document.getElementsByClassName("video")[0];
function toggleHandle(e) {
if(e.className.indexOf('aa_2') > -1) {
e.className = 'aa2'
video.play()
} else {
e.className = 'aa_2'
video.pause()
}
}
var video = document.getElementsByClassName("videob")[0];
function toggleHandleb(e) {
if(e.className.indexOf('aa_2b') > -1) {
e.className = 'aa2b'
video.play()
} else {
e.className = 'aa_2b'
video.pause()
}
}
</script>
video命名冲突了，2个video节点都赋值给变量名video了，导致2个控制按钮都是控制的第2个video标签,第一个video的控制播放无效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS控制播放按钮</title>
</head>
<body>
<button class="aa_2" onClick="toggleHandle(this)">切换1</button>
<video class="video" controls><source src="222.mp4" type="video/mp4"></video>
<button class="aa_2b" onClick="toggleHandleb(this)">切换2</button>
<video class="videob" controls><source src="333.mp4" type="video/mp4"></video>
<script>
var video = document.getElementsByClassName("video")[0];
function toggleHandle(e) {
if(e.className.indexOf('aa_2') > -1) {
e.className = 'aa2'
video.play()
} else {
e.className = 'aa_2'
video.pause()
}
}
var videob = document.getElementsByClassName("videob")[0];
function toggleHandleb(e) {
if(e.className.indexOf('aa_2b') > -1) {
e.className = 'aa2b'
videob.play()
} else {
e.className = 'aa_2b'
videob.pause()
}
}
</script>
</body>
</html>
var video = document.getElementsByClassName("video")[0];
var video = document.getElementsByClassName("videob")[0];
你这么写的话，因变量声明提升的原因，其实video被赋值的是始终是videob这个，所以222.mp4根本无法控制，建议重新给videob赋个变量
两个video分别初始化的时候分别命名，楼上说得对
你为什么不在点击切换的时候动态吧src链接给换了呢