개요
유투브 같은 영상 재생플랫폼은 친절하게도 재생속도 조절을 위한 콘트롤을 제공해주고 있습니다.
이렇게 톱니바퀴를 눌러서 재생속도를 선택하면 2배속까지 재생속도를 높일수가 있는데요. 화면은 돌비공포라디오 영상입니다. 제가 돌비공포라디오 열혈시청자여서 저 화면에서 캡춰를 해보았습니다. 오늘 올라온 에피소드는 '비어있는 가게 7번 테이블에서 벨이 울리는 섬득한 이유' 입니다. 생방으로 이미 들은 얘기지만 다시 들어도 재미납니다 ㅎ
얘기가 잠시 삼천포로 빠졌네요..
그런데 다른 영상 플랫폼의 경우 재생속도를 감춰놓는 경우도 있습니다. 영상을 정상속도로 끝까지 보아야 하는 이유가 있는 광고와 같은 영상에 해당이 될건데요. 혹은 온라인으로 제공되는 강의의 경우에도 그러한 상황을 종종 볼 수 있습니다. 그치만 이런 재생플랫폼도 html5의 video 태그를 이용하기 때문에 제어가 불가능한것은 아닙니다만 개발자 콘손을 활용해야 한다는 불편함이 있습니다.
그래도 한번 따라 해보시면 재생속도를 조절할 수 있게 되실겁니다.
재생 콘트롤러를 통해 제어하기
먼저 구글 크롬 브라우저를 이용해 영상이 재생되고 있는 페이지로 이동해줍니다.
그리고 F12 를 눌러 개발자도구를 열어줍니다.
요소 탭에서 Ctrl+F 를 눌러 검색창을 열어준 뒤 <video 라고 입력하게 되면 재생되는 영상의 video 태그를 찾으실 수 있습니다.
아래 그림처럼 말이죠
제어 콘트롤을 화면에 나타내기 위해서 controls 를 추가해줍니다.
아마 기존 video 태그 속성 데이터는 아래와 같이 되어 있을텐데 controls 가 안보입니다.
<video id="playerId" contextmenu="false" playsinline="" webkitplaysinline="" src="../srcfile.mp4"></video>
아래처럼 controls 를 마지막에 추가해주면 재생속도 제어가 가능한 콘트롤이 화면에 나타날텐데 이 콘트롤로 2배속 재생을 해주면 됩니다. MAX 가 2배속인지 더 제어가능한 옵션이 있는지는 모르겠습니다. 콘트롤을 통해서는 2배속까지 되는 것을 확인했습니다.
<video id="playerId" contextmenu="false" playsinline="" webkitplaysinline="" src="../srcfile.mp4" controls></video>
재생속도 빠르게 16배속까지 설정하기
재생속도를 2배속 이상인 16배속까지 지정하는 것도 가능합니다. 콘트롤에서 16배속이 보이면 그걸 선택하시면 되는데 그게 아니라면 아래와 같이 직접 video 태그 element 를 획득해서 playbackRate 값을 지정해주시면 배속 지정이 가능합니다.
크롬 개발자도구의 콘솔 탭으로 이동해줍니다. 그리고 입력칸에 아래처럼 넣어주고 엔터를 눌러주세요
document.getElementsByTagName("video")[0].playbackRate = 16;
아래처럼 나타나면 정상적으로 16배속이 지정된 것입니다. 간혹 값을 못찾았다는 오류메시지가 뜨는 경우도 있는데 이럴 경우 아래 화면의 제일 왼쪽 상단에 마우스커서 버튼을 눌른 뒤 재생플레이어 화면을 한번 클릭 해준 뒤에 아래 값을 입력해보시면 정상적으로 되는 것을 확인하실 수 있을 거에요
만약 다음 영상으로 넘어가게 되는 경우 document 에서 video 태그를 못찾는 경우가 있는데 플레이어가 iframe 에서 따로 재생되고 있는 경우 그럴 수 있습니다. 그럴땐 frame 페이지를 고정시켜 놓으면 타겟팅이 되어 못찾는 오류가 사라지게 됩니다. 크롬 디버그 콘솔 아래 콤보박스에서 flashframe 혹은 유사한걸로 지정해두시면 됩니다
마무리
이렇게 간단하게 온라인 동영상 재생속도를 빠르게 하는 방법을 알아보았습니다.
사실 의무로 들어야 하는 영상이 있었는데 도움도 안되는데 시간만 낭비하는게 아닌가해서 방법을 찾아보았고 이렇게 포스팅하게 되었습니다. 소중한 시간 알차게 활용하시기 바랍니다.