동영상 강의 배속 꼼수

동영상 강의 배속 꼼수 ..

간단한 스크립트 입니다.

 

전제사항으로 해당 동영상 재생 모듈이 배속 기능을 제공해야 합니다..

대부분 동영상 재생 모듈의 배속이 2배수인데, 제공 안하는 배속은 선택 못해요.. 

 

이런거...

 

동영상 요소 선택하면

 

비스무리하게 playrate 가 있죠

값이 맵 형태네요. 하지만 그냥 쭉 텍스트형태로 속성 변경해줍니다

 

자바스크립트로 할 경우

document.getElementById('video_view').setAttribute('data-setup', '{"autoplay":true,"playbackRates":[0.5,1,1.5,2,16]}');

 

*Uncaught TypeError: Cannot read properties of null (reading 'setAttribute') 오류 발생하면

동영상 요소 한번 클릭하세요. 요소 갱신이 안되서 그럴수도있음.

 

 

제이쿼리로 할 경우

$('#video_view').attr('data-setup', '{"autoplay":true,"playbackRates":[0.5,1,1.5,2,16]}');

 

 

 

 

그다음에 video 요소의 재생속도를 16으로 변경해줘요

document.querySelector('video').playbackRate=16;

 

하믄 끝