만약 영상에 배속기능이 없다면? (ex. 학교 강좌)

가끔 인강 영상들을 보다보면 배속기능이 없는 강좌들이 있다.

물론 무조건 학생들이 처음부터 끝까지 다 보라는 마음에 조작 키들을 없애버린 것 이겠지만,,

21세기에 살고 있는 우리들에겐 이런걸 듣고 있을 시간이 없다..

 

내가 웹을 공부하고 나서 보니, 결국 웹을 만든 것도 사람이다.

결국 보안을 철저히 하지 않는 이상 헛점이 들어날 수 밖에 없고, 웹을 공부하고 있는 사람으로써 이런건 못참는다..ㅎ

---

본론으로 돌아가, 우리 학교 웹 사이트를 기준으로 설명을 하겠다.

 

우선 개발자 도구(일반적으로 F12)를 열어서 그림에 커서가 가리키고 있는 버튼을 눌러준다.

저기 보이는 스마트폰 아이콘 왼쪽의 키

그리고 웹사이트에 커서를 대면 이것저것 뜰텐데, 커서를 영상파일에 가져다 대고 클릭하면 해당 영상의 HTML Element를 가리켜 준다.

위 그림에서 video class...에 파란색 줄로 그여진 부분인데 이때의 class값을 잘 기억 해준다. (위 경우 vs-vplay-video1에 해당.)

 

그 후 Console을 눌러 다음과 같이 입력해준다.

vid = document.querySelector("video.vs-vplay-video1");
// vid라는 변수에 video태그 이면서 vs-vplay-video1라는 클래스를 지닌 Element를 가져온다.

vid.playbackRate // 결과: 현재값 1배속
vid.playbackRate = 변화시킬 값

위와 같이 입력해주면 바로 배속이 된다.

 

playbackRate 매서드에 관에 궁금하다면 다음 링크를 참고하자.

HTML | DOM Video playbackRate Property - GeeksforGeeks

---

추가적으로,, 우리학교와 같은 경우에 이수 퍼센트가 있어서 배속하면 모자르지 않을까..? 했는데, 이것도 그냥 마지막으로 본 시간대로 체크가 되는 것 같다..

헛점이 많구만,,

또한 이수한 뒤에 검증을 하기 위해 퀴즈를 풀어야 하는데, 혹시나 싶어 HTML 코드에 정답값을 넣어놨나 싶어서 제일 쉬운 문제로 먼저 테스트를 해보니까 뭔가 감이 왔다.

타입이 hidden에다가 Id값이 questionCorrectNo_.. 이건 빼박인거 같애서 value값이 정답이겠구나.. 하고 나머지도 그렇게 풀고나니.

예측이 맞았다.

 

이런경우 Console로 값을 넣는걸 방지 하던가 아니면, HTML값을 좀 못알아 보게끔 하던가, 코드 암호화를 하던가 했어야 하지 않았나.. 나도 나중에 개발할때 이런 실수 하지 않도록 조심해야 겠다..