[JavaScript] 유튜브 Iframe API - 화질 설정 이슈 (setPlaybackQuality 함수 미작동)

개요

유튜브 링크를 Iframe으로 띄울 때, default 화질을 특정 화질로 설정하는 것이 불가능했다.

원인

알 수 없지만, 유튜브에서 제공하는 Iframe API 에서 화질을 설정하는 함수 자체가 작동하지 않는 것만은 확실했다. 추측하기로는 유튜브에서 화질 설정 관련 함수만 지원을 종료했거나, 네트워크 환경 등 변수에 의해 작동하지 않을 수 있다고 생각한다.

 

💡 유튜브 Iframe API 공식 docs https://developers.google.com/youtube/iframe_api_reference?hl=ko

iframe 삽입에 대한 YouTube Player API 참조 문서  |  YouTube IFrame Player API  |  Google for Developers

💡 유튜브 Iframe API 테스트 페이지 https://developers.google.com/youtube/youtube_player_demo?hl=ko

YouTube 플레이어 데모  |  YouTube IFrame Player API  |  Google for Developers

 

경과

최초에 유튜브 Iframe URL에 vq=hd1080 파라미터를 통해 기본 화질을 고정시킬 수 있다는 글을 보았다. 관련해서 구글링을 해보아도 대부분 비슷하게 나왔다. 하지만 전혀 작동하지 않았고 공식 docs를 살펴보니 해당 파라미터에 대한 언급은 없었다.

vq 파라미터 대신 Iframe API (Javascript sdk)에 대한 것은 아주 상세히 적혀있었다. 하지만 해당 API를 직접 프로젝트에 구현하여도, 공식 테스트 페이지를 사용하여도 화질 설정만큼은 바꿀 수 없었다. 볼륨 설정, 재생 목록, 시작 지점 등등 화질 관련 외 모든 함수는 정상적으로 작동하였다.

 

사진1. 영상 품질을 바꾸고 업데이트 버튼을 클릭한 후 나타나는 이벤트 로그

 

 

사진1과 같이 테스트 페이지에서 영상 품질을 바꾸고 업데이트 버튼을 클릭해도, 영상 품질은 변하지 않았다. 또한 이벤트 로그를 확인해보면 PlayBack quality 값이 medium(360p)로 변경되었다는 로그가 발생한다.

즉, 유저가 설정했두건, 자동으로 설정되어있었던 간에 최초 화질만 유지될 뿐이었다. 관련해서 docs를 더 자세히 보았다.

 

👩‍🔧 player.setPlaybackQuality(suggestedQuality:String):Void

이 함수는 현재 동영상에 대한 추천 동영상 품질을 설정합니다. 이 함수로 동영상이 새 품질로 현재 위치에 다시 로드됩니다. 재생 품질이 변경되면 재생 중인 동영상에 대해서만 변경됩니다. 이 함수를 호출해도 재생 품질이 실제로 변경되지 않을 가능성이 있습니다. 그러나 재생 품질이 변경되면 onPlaybackQualityChange 이벤트가 실행되고, 코드가 setPlaybackQuality 함수를 호출하기 보다는 이벤트에 응답해야 합니다.

 

 

위와 같이 화질 설정 함수인 setPlayBackQuality() 에 대해 정의하고 있다. 하지만 텍스트 중간을 보면

 

‘이 함수를 호출해도 재생 품질이 실제로 변경되지 않을 가능성이 있습니다.’

 

라는 모호한 문구가 존재한다. 또한 그 다음 구절의 문구대로 화질이 변경되지는 않았지만 onPlaybackQualityChange 이벤트가 실행되고 현재 화질(변경되지 않은) 값을 반환하긴 한다.

 

결국 정확한 답은 알 수 없이 네트워크의 문제, 혹은 지원 중단에 의해 setPlaybackQuality 함수가 작동하지 않는 것으로 판단했다.

 

 추가로 loadVideoById 함수에 대해서도 테스트해보았다. 아예 새로운 비디오를 덮어 씌워 불러오는 함수인데, 화질을 설정할 수 있는 인자가 있었다. 하지만 이전 테스트와 마찬가지로 설정한대로 화질을 변경하지 못했다.

 

---

docs 중 일부

 

loadVideoById

• Argument syntax

  player.loadVideoById(videoId:String,
                       startSeconds:Number,
                       suggestedQuality:String):Void

• Object syntax

  player.loadVideoById({videoId:String,
                        startSeconds:Number,
                        endSeconds:Number,
                        suggestedQuality:String}):Void

•  

이 함수는 지정한 동영상을 로드하고 재생합니다.

• 필수인 videoId 매개변수는 재생할 동영상의 YouTube 동영상 ID를 지정합니다. YouTube Data API 동영상 피드에서 <yt:videoid> 태그는 ID를 지정합니다.
• 선택사항인 startSeconds 매개변수는 부동/정수를 허용합니다. 이 매개변수가 지정되면 동영상이 지정한 시간에 가장 가까운 키프레임에서 시작됩니다.
• 선택사항인 endSeconds 매개변수는 부동/정수를 허용합니다. 이 매개변수가 지정되면 동영상 재생이 지정한 시간에 중지됩니다.
• 선택사항인 suggestedQuality 매개변수는 동영상의 추천 재생 품질을 지정합니다. 재생 품질에 대한 자세한 내용은 setPlaybackQuality 함수의 정의를 참조하세요.

---