본문 바로가기
Smart Office/Web&App

유튜브 비메오 HTML5 플레이어 재생속도 조절 확장 프로그램

by 둠두미 2017. 2. 21.

최근 모바일 환경 기반의 브라우저가 확대되고, 플러그인 설치를 배제해 나가는 트랜드 때문에 비디오(동영상)플레이어도 기존 플래시 플레이어 기반에서 HTML5 플레이어 기반으로 많이 넘어 갔습니다.


HTML5 플레이어는 보안 이슈가 아직 다 해결 되지 않은 상태라 유료 콘텐츠쪽에서는 적극적 도입이 어려운게 사실이나 홍보나 공유용으로 서비스 하기에는 매우 좋은 형태로 적극적으로 서비스 되고 있습니다.


여러분들이 잘 아는 YouTube도 크롬55 버전 부터는 플래시플레이어를 차단하고 HTML5 플레이어로 전환 시켰습니다.


HTML5 플레이어를 사용하고 있는 대표적인 사이트가 유튜브(YouTube)와 비메오(Vimeo) 일 텐데요...






해당 플랫폼을 통해 공유되는 영상으로 무료 서비스를 하고 있는 곳이 많으실 겁니다.


이를 통해 온라인 무료 강좌를 제공하는곳들도 많은데, 온라인 강좌 특성상 영상의 길이가 긴 편이어서 온라인 강의용 플레이어를 설계할 때 필수적으로 들어가는 기능이 바로 배속조절 입니다.


유튜브의 경우에는 플레이어 자체에 배속을 조절하는 기능이 있어서 이를 실행하면 배속 조절을 할 수 있습니다.



플레이어 하단의 톱니바퀴 아이콘을 누르면 속도, 자막, 영상 품질 등을 설정할 수 있는 메뉴가 있고, 속도 메뉴를 클릭하면 재생 속도를 조절할 수 있는 옵션이 노출됩니다.


이게 귀찮으시면 아래와 같이 유튜브 속도조절 단축키를 사용하시면 됩니다.


재생 / 일시정지          space bar 혹은 k


재생속도 빠르게           Shift + >


재생속도 느리게           Shift + <



그렇다면 비메오(Vimeo)는 어떻게 할까요?

비메오는 자체적인 플레이어에서 재생속도 조절을 할 수 없습니다.

비메오에 동영상 호스팅을 사용한다고 하더라도 서드파티 플레이어를 제작하여 배속 기능을 넣지 않는 한 재생속도 조절을 할 수 없습니다.



단, 기본 플레이어를 사용하더라도 크롬 브라우저의 확장프로그램 기능을 통해 이를 실행할 수는 있습니다.


 


위의 이미지를 클릭하시면 링크로 이동합니다.


해당 확장 프로그램을 크롬에 추가하면 간단히 탑재 됩니다.



비메오 영상을 실행해 보면 우측에 기존에 보이지 않던 버튼 2개가 보이게 되는데요...


'Repeat'는 말 그대로 반복 재생하게 하는 것이고, 'playback rate'를 클릭하면 속도를 직접 입력할 수 있게 창이 뜹니다.

그곳에 자신이 원하는 속도를 입력하고 확인을 누르면 영상이 설정된 속도로 재생됩니다.


단축키는 먹지 않는 것 같네요.


비메오 플레이어는 스페이스바(space bar)로 재생 / 일시정지 하는 것과 방향키로 1초씩 앞뒤로 이동할 수 있는 것, 볼륨 조절하는 것 외에 별다른 기능을 지원하지 않습니다.

심지어 화면 클릭시나 더블클릭시에도 일시정지나 전체화면 전환 등의 기능도 없습니다.


비메오 플레이어 단축키




UI가 유튜브에 비해 조금 불편하긴 합니다만 서로 추구하는 바가 다르니 그러려니 해야겠습니다.

댓글