JS控制播放按钮出错。

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>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

4条回答默认最新

qq_24581629 2019-06-11 13:52

关注

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>

本回答被题主选为最佳回答 , 对您是否有帮助呢?