개발자의 끄적끄적

[javascript/jquery] javascript video custom volume control example / 자바스크립트 비디오 볼륨조절 예제 html 에서 video 태그를 이용하여 영상영역을 구현하고 custom control bar 를 제작해서 사용하는 경우가 있습니다. 그중에서 소리 조절 옵션을 사용해야 하는 경우에는 아래와 같이 input range 와 스크립트를 이용하시면 됩니다. 우선 아래처럼 video 태그가 있다고 가정하고, 위 video 의 소리를 조절하기위한 range 타입의 input 태그를 아래와 같이 선언합니다. 그리고 볼륨값이 조절될때 마다 호출되는 set_vol 함수를 아래처럼 작성합니다. function set_vol(val) { var player = doc..

[javascript/jquery] javascript video fullscreen example / 자바스크립트 비디오 전체화면 전환 방법 javascript 에서 video tag 를 이용하여 custom control bar 를 구현하다보면 fullscreen 즉, 전체화면을 구현해야 하는 경우가 있습니다. 그럴때는 아래와 같이 스크립트를 사용하시면 됩니다! 우선 아래와 같은 video 태그가 있다고 가정하고, 위 비디오를 전체화면 모드로 변환하기 위한 버튼을 아래처럼 생성합니다. fullscreen 그리고 위 버튼의 클릭 액션이 일어날때 호출되는 함수 set_fullscreen 함수를 아래와 같이 작성합니다. function set_fullscreen() { if(vid.requestFullSc..

[javascript/jquery] javascript video end event example / 자바스크립트 비디오 종료 이벤트 예제 html 에서 video 태그를 다루다 보면 스크립트로 각종 이벤트를 제어해야하는 경우가 종종 있습니다. 그중에서 영상이 종료된 이벤트를 감지하는 방법을 공유해보고자 합니다. 우선 아래와 같은 video 태그가 있다고 가정하고, 위 영상이 종료된 후 무언가 처리를 하고 싶으면 아래와 같이 ended eventListner 를 등록하시면 됩니다. 그리고 그 안에 처리하고자 하는 로직을 작성하시면 됩니다! video.addEventListener('ended', function() { // to do }); 참고들 하세요!

[javascript/jquery] javascript video timeupdate event example / 자바스크립트 비디오 재생시간 변경 이벤트 예제 html 에서 video 태그를 이용하여 영상을 재생하다보면 현재 재생되고 있는 시간을 따로 표기하거나 남은시간을 계산하거나 하는 경우가 있습니다. 그럴때는 영상의 현재 재생 위치를 실시간으로 저장하고 있어야 합니다. video 태그의 timeupdate 이벤트를 이용하여 실시간으로 재생위치정보를 가져올 수 있습니다. 우선 아래와 같은 video 태그가 있다고 가정하고, 아래나와있는 내용처럼 eventListner 를 이용해서 timeupdate 이벤트를 선언해서 사용하시면 됩니다. video.addEventListener('timeupdate'..