Define video playback button volume keys

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <audio src=""></audio>
        
        <video width="600" src="./video/video.mp4"></video>
        <div id="controls">
            <button>播放</button>
            <button>暂停</button>
            <button>+</button>
            <button>-</button>
        </div>
        
        <script>
            var volumeBigger = false;
            var videoElement = document.getElementsByTagName("video")[0];
            var btns = document.getElementsByTagName("button");
            btns[0].οnclick=function(){
                videoElement.play();
            }
            btns[1].οnclick=function(){
                videoElement.pause();
            }
            btns[2].οnclick=function(){
                console.log(videoElement.volume)
                if(videoElement.volume<=0.9&&videoElement.volume>=0){
                    videoElement.volume += 0.1
                    
                }else{
                    videoElement.volume==1
                }
                
            }
            btns[3].οnclick=function(){
                console.log(videoElement.volume)
                if(videoElement.volume>=0.1&&videoElement.volume<=1){
                    videoElement.volume -= 0.1
                    
                }else{
                    videoElement.volume==0
                }
            }
                
        </script>
    </body>
</html>

 

Guess you like

Origin blog.csdn.net/lyinshaofeng/article/details/127950308