비디오 컨트롤 만들기

Question

window.onload = function() { 

    "use strict"; 
    var video = document.getElementById("video"), 
     playButton = document.getElementById("play-pause"), 
     muteButton = document.getElementById("mute"), 
     fullScreenButton = document.getElementById("full-screen"), 
     seekBar = document.getElementById("seek-bar"), 
     volumeBar = document.getElementById("volume-bar"); 

    muteButton.addEventListener("click", function() { 
     if (video.muted === false) { 

      video.muted = true; 


      muteButton.innerHTML = "Unmute"; 
     } else { 

      video.muted = false; 


      muteButton.innerHTML = "Mute"; 
     } 
    }); 

    fullScreenButton.addEventListener("click", function() { 
     if (video.requestFullscreen) { 
      video.requestFullscreen(); 
     } else if (video.mozRequestFullScreen) { 
      video.mozRequestFullScreen(); // Firefox 
     } else if (video.webkitRequestFullscreen) { 
      video.webkitRequestFullscreen(); // Chrome and Safari 
     } 
    }); 

    seekBar.addEventListener("change", function() { 

     var time = video.duration * (seekBar.value/100); 

     video.currentTime = time; 
    }); 

    video.addEventListener("timeupdate", function() { 

     var value = (100/video.duration) * video.currentTime; 

     seekBar.value = value; 
    }); 

    seekBar.addEventListener("mousedown", function() { 
     video.pause(); 
    }); 

    seekBar.addEventListener("mouseup", function() { 
     video.play(); 
    }); 

    volumeBar.addEventListener("change", function() { 
     video.volume = volumeBar.value; 
    }); 

이것은 내 코드이며 JSLint에서 3 가지 오류 코드가 전송됩니다. 1. 1 번 열에서 '7 번 열이 아니라'(끝) '을 예상하십시오. 2. 1 번 줄에서'{ '를 찾아'(끝) '을 봅니다. 3. 예상되는 ';' 대신에 '(끝)'을 보았다.

이 작업에 도움을 주시면 큰 도움이 될 것입니다.

Answer 1

/*jslint browser: true*/ 

window.onload = function() { 

    "use strict"; 
    var video = document.getElementById("video"), 
     //playButton = document.getElementById("play-pause"), 
     muteButton = document.getElementById("mute"), 
     fullScreenButton = document.getElementById("full-screen"), 
     seekBar = document.getElementById("seek-bar"), 
     volumeBar = document.getElementById("volume-bar"); 

    muteButton.addEventListener("click", function() { 
     if (video.muted === false) { 

      video.muted = true; 


      muteButton.innerHTML = "Unmute"; 
     } else { 

      video.muted = false; 


      muteButton.innerHTML = "Mute"; 
     } 
    }); 

    fullScreenButton.addEventListener("click", function() { 
     if (video.requestFullscreen) { 
      video.requestFullscreen(); 
     } else if (video.mozRequestFullScreen) { 
      video.mozRequestFullScreen(); // Firefox 
     } else if (video.webkitRequestFullscreen) { 
      video.webkitRequestFullscreen(); // Chrome and Safari 
     } 
    }); 

    seekBar.addEventListener("change", function() { 

     var time = video.duration * (seekBar.value/100); 

     video.currentTime = time; 
    }); 

    video.addEventListener("timeupdate", function() { 

     var value = (100/video.duration) * video.currentTime; 

     seekBar.value = value; 
    }); 

    seekBar.addEventListener("mousedown", function() { 
     video.pause(); 
    }); 

    seekBar.addEventListener("mouseup", function() { 
     video.play(); 
    }); 

    volumeBar.addEventListener("change", function() { 
     video.volume = volumeBar.value; 
    }); 
}; 

이렇게하면 오류가 발생하지 않습니다. /*jslint browser: true*/은 jslint에 window, document 등이 정의되도록하는 것입니다. 내가 사용하지 않은 playButton 댓글을 달았습니다. 그리고 코드 끝 부분에 ;을 잊어 버렸습니다.