슬라이더 값을 실시간으로 업데이트하려면 어떻게해야합니까?

Question

사용자 정의 컨트롤 막대가있는 HTML 비디오 태그가 있습니다. 사용자가 범위를 스크럽하면 검색 막대와 볼륨 막대 모두 실시간으로 값을 업데이트하고 싶습니다. 현재 사용자가 클릭 및 드래그하는 동안이 아니라 슬라이더를 조정 한 후에 볼륨이 업데이트됩니다. 나는 처음부터이 작업을 수행하고 사용하지 할

// Change current viewing time when scrubbing through the progress bar 
seekBar.addEventListener('change', function() { 
    // Calculate the new time 
    var time = video.duration * (seekBar.value/100); 

    // Update the video time 
    video.currentTime = time; 
}); 

// Update the seek bar as the video plays 
video.addEventListener('timeupdate', function() { 
    // Calculate the slider value 
    var value = (100/video.duration) * video.currentTime; 

    // Update the slider value 
    seekBar.value = value; 
}); 

// Pause the video when the seek handle is being dragged 
seekBar.addEventListener('mousedown', function() { 
    video.pause(); 
}); 

// Play the video when the seek handle is dropped 
seekBar.addEventListener('mouseup', function() { 
    video.play(); 
}); 

// Adjust video volume when scrubbing through the volume bar 
volumeBar.addEventListener('change', function() { 
    // Update the video volume 
    video.volume = volumeBar.value; 
}); 

: 나는 그들과 같이 엮은이

<div id="video-controls"> 
// ... 
<input type="range" id="seek-bar" value="0"> 
<input type="range" id="volume-bar" min="0" max="1" step="0.01" value="1"> 
// ... 
</div> 

을 그리고 내 자바 스크립트 : HTML에서

나는 그들과 같은 설정이 jQuery와 같은 자바 스크립트 라이브러리는 이미 해당 라이브러리에 대해 수행되었다는 것을 알고 있습니다. 필자가 본 솔루션의 대부분은 jQuery와 관련되어 있지만 사용하고 싶지 않습니다. 이는 jQuery에 대한 종속성을 줄이고 내 목표를보다 잘 제어 할 수있게하며 주로 학습 경험으로 활용합니다.

Answer 1

1. mousemove를 사용하는 것은 어리석은 해결 방법입니다. '입력'이라는 이벤트가 있습니다.
2. 변경 이벤트는 사용자가 특정 값 (mouserelease, keyup 또는 blur)으로 자신을 커밋하자마자 전달되어야하지만 Chrome과 IE10은 이러한 다양한 입력/변경 이벤트 동작의 잘못된 구현을가집니다. (https://code.google.com/p/chromium/issues/detail?id=155747)
3. JS를 배우고 싶다면 JS를 구성하고 구성 요소를 생각하는 방법을 배우십시오. 이것은 네이티브 JS 대 JQuery를 사용하는 것보다 훨씬 더 중요합니다. 예를 들어, ID를 사용하고 있습니다. 즉 한 페이지에 하나의 미디어 플레이어 만있을 수 있습니다. addEventListener의 세 번째 매개 변수를 생략했습니다. 등등 ....

그래서 어떻게 일을 끝내야하는지 설명합니다. 표준 컴파일러 브라우저 (현재 FF 만 해당) 또는 x-browser 환경에서 테스트하고 있습니다. http://jsfiddle.net/trixta/MfLrW/

경우에는 당신이 원하는 :

여기

range.addEventListener('input', onInput, false); 

은 FF에 대한 작동 데모입니다 :

는 사용자가 상호 작용하는 동안 입력의 현재 값을 얻으려면, 단순히 입력 이벤트를 사용 Chrome 및 IE에서이 작업을 수행하려면 입력/변경을 사용하고 입력 이벤트 만 처리해야합니다. 그런 다음 "변경"이벤트를 직접 계산해야합니다. 이는 실제로 간단하지 않습니다. 하지만 여기에 당신을위한 실례가 있습니다 :

http://jsfiddle.net/trixta/AJLSV/