[모바일 유튜브 영상] 티스토리 유튜브 영상의 모바일 호환성 분석 및 개선하기 (유튜브 최적 모바일 지원)

제목: [모바일 유튜브 영상] 티스토리 유튜브 영상의 모바일 호환성 분석 및 개선하기 (유튜브 최적 모바일 지원) []

작성일:

2012. 11. 17. 22:43

많은 사람들이 이용하는 동영상 서비스인 유튜브
수 많은 국내 업체를 제치고 국내에서도 동영상 스토리지 서비스로 가장 인기가 많은 곳이지요.
그런데 최근 이 유튜브가 기존의 영상 제공 서비스 방식을 변경하여 공유할 수 있도록 바뀌었습니다.

아마도 근래에 들어 스마트폰 등의 모바일 기기로 유튜브 사용량도 많아짐에 따라
인터넷 사용량의 60%가 모바일을 유지할정도로 사용량이 많아지자 유튜브 측에서도
모바일에서 유튜브 영상 재생 서비스를 좀더 폭 덟게 지원하고자 변경 한 것으로 추측됩니다.

사실... 바뀐건 좀 된 것 같습니다만.... 전 최근에 와서야 알게되서, 이제 와서 글을 쓰네요 -_-;;;
아무튼 뒤늦게 유튜뷰의 모바일 호환성 여부를 알아보고자 좀 몇가지를 조사해보게 되었습니다.

유튜브 동영상의 호환성 개선

2011년 이전 기존에 유튜브를 타 사이트에 첨부하기 위한 공유 소스코드는 다음과 같았습니다.

현재는 쓰이지 않는 방식인데, 과거에 IE 전용으로 사용되었던 <embed> 테그와 <object> 테그 그리고 <param> 테그로 이루어져 플레시 기반의 영상이 재생되는 방식입니다. (해당 코드를 찾기 어려울줄 알았는데... 제가 등록해두었던 영상들이 죄다 이 방식이더군요...) 그리고 올해 모바일을 지원하도록 바뀐 코드는 다음과 같습니다.

척 봐도 아시겠지만 기존에 <embed>를 과감히 버리고 <iframe> 테그로 갈아탔습니다. 그리고 별로 쓸모 없어보이는 코드들도 죄다 빼버려서 상당히 간결해졌습니다. 상당히 편해진 것처럼 보이지만 과거 <iframe> 테그가 수 많은 커뮤니티 사이트에서 악용되어 여러 안좋은 영향을 미친것을 감안 하면 그리 좋은 느낌은 들지 않더군요.

뭐 어쨌거나... 유튜브가 <embed>에서 <iframe>으로 갈아탄 건 결국 모바일 호환성을 개선하고자 하려는 것으로 보입니다. <embed> 의 경우 사실상 IE의 전유물에 가까운 멀티미디어 재생 방식이어서 상당히 논란이 되었고 모바일의 지원이 상당히 불충분 했지요. 특히 Adobe Flash를 지원하지 않는 브라우져 등에서는 유튜브 영상이 전혀 지원되지 않았다는 것을 감안하면 이런 변화는 상당히 큰 효과가 있어보입니다.

유튜브의 실제 모바일 호환성 분석

유튜브가 개선되면서 모바일 호환성이 바뀌었다고 하지만, 어떻게 되는지 정확히 몰랐기에 개인적으로 궁금한 것도 있기도 하고 근래에 들어 블로그의 모바일 검색량이 늘어남에 따라 이런 모바일 지원성에 대해 곰곰히 고려해보았기 때문에 몇몇 브라우저와 OS 그리고 플렛폼 종류별로 직접 비교를 해보고자 하였습니다.

개인적으로 <embed>코드와 <iframe> 코드 말고도 구글 API 기능과, HTML5 지원이 되는 <object>만 이용하는 기능등에 관심 있었기에 몇몇 코드들을 조합하여 테스트를 하였습니다. 하단은 실험을 내용입니다.

모바일 호환성 테스트 실험 코드 (클릭해서 각각 코드 확인 가능)

* 영상이 안나온다면 해당 코드는 사용중인 브라우저에서 지원되지 않는 것을 의미합니다.
참고로 크롬 기준으로 모든 영상 출력됩니다.

실험 대상 플렛폼, OS, 브라우저

PC: Windows - IE (인터넷 익스플로어), Chrome (크롬)
PC: Linux - Firefox (파이어 폭스)
태블릿: iPad Safari (사파리), iPad Chrome (크롬)
스마트폰: Android 4.1.2 (안드로이드 전용 웹브라우저), iPhone Safari (사파리)
기타: Nintendo 3DS (닌텐도 3DS 전용 웹브라우저)

8개의 플렛폼과 브라우저, OS에 대해서 실험한 결과와 상황에 따른 소개는 다음과 같습니다.

1. <embed> 코드

기존의 <embed> 코드는 Flash를 사용하는 PC 기반의 재생 코드입니다.
예상 했던 바이지만 PC와 iOS를 사용하는 모바일 기기에서 정상적으로 재생이 되었지만
안드로이드 OS를 이용하는 모바일 기기에서는 재생되지 않았습니다.
아마 Flash 미지원에 의한 영향으로 보입니다.

2. <object> 코드

HTML5 기반의 object 코드의 경우, Flash를 이용하지 않고 모바일에서도 재생 지원이 가능한 코드입니다.
밑의 <iframe>코드와 거의 유사하며 <iframe> 코드는 막아도 <object>는 사용 가능한 사이트가 많이 있어서
<iframe>코드가 막혔을 경우 <object> 코드를 이용하면 재생 가능하도록 할 수 있을 것 같습니다.
그러나 <object> 코드의 특성상 IE 지원이 상당히 애매하다보니 잘 지원되지 않는 경향이 있습니다.
iOS 기기, 안드로이드 OS기기에서 모두 재생되었지만 유독 IE (인터넷 익스플로어)에서만 재생되지 않습니다.

3. <iframe> 코드

HTML에 내부에 또다른 링크의 주소를 표시하는 방식의 <iframe> 코드는 사용자를 특정 다른 사이트로
유도하거나 하는 등의 보안상의 위험 문제가 있어서 자주 사용되지 않는 코드입니다.
그럼에도 유튜브가 이런 문제 많은 <iframe> 코드를 사용한 것은 의문이지만 어쨌거나 모든 기기에서 지원됩니다.
모든 기기의 작동 확인이 되었습니다만, 유일하게 Chrome에서만 '전체화면' 모드가 작동하지 않습니다.

4. <iframe + Google API> 기능

유튜브 플레이어 외의 다른 플레이어를 겸용하여 사용할 경우 HTML 5 기반에서 재생 가능한 코드입니다.
특정 API를 사용할 경우 재생이 가능한 것으로 보입니다만, 여전히 호환성 문제가 조금 있어 보이네요.
크롬과 파이어폭스 이외의 브라우저에서는 지원되지 않았습니다. (같은 크롬이라도 iPad용에서는 재생 불가)
아마도 현재로서는 PC 플렛폼 지원 정도가 한계인걸로 보입니다.

최종 실험 결과를 다시 표로 바꾸면 다음과 같습니다.

기종↘번호 [embed] [object] [iframe] [iframe+API]

[PC IE] O X O O

[PC Chrome] O O O* O

[PC Firefox] O O O O

[iPad Chrome] O O O* X

[iPad Safari] O O O X

[iPhone Safari] O O O X

[Android 4.1.2] X O O X

[Nintendo 3DS] X X X X

O* --> 재생은 지원되나, 전체화면 모드 작동하지 않음

* 닌텐도 3DS 브라우져의 경우 Flash 및 HTML 5
미지원으로 Youtube 영상 자체 재생 불가

유튜브의 모바일 호환성 테스트

여러 방식의 모바일 코드를 테스트 해본 결과 <iframe>을 쓰는 것이 결과적으로 가장 나았습니다.
그러나 유일하게 크롬에서만 전체화면이 지원되지 않는다는 문제가 있었기에 좀 신경이 쓰였죠.
저의 경우 크롬을 거의 애용하다보니 이 부분을 해결하고자 추가로 확인을 안 할 수 없었는데요.

해외 포럼을 살펴본 결과, 코드에 몇몇 추가 인자를 삽입하면 되는 것으로 보였습니다.
몇번의 시행 착오 끝에 테스트 해본 결과 구글 크롬에서도 전체화면까지 정상 지원~!

이쯤이면 유튜브를 HTML5를 지원하는 모든 기종의 모바일에서 플레이할 수 있게 되었군요.
유튜브를 가장 최적의 폭 넓은 호환성으로 사용하려면 다음 코드를 사용하시면 됩니다.

* 크롬에서 전체화면으로 보려면 mozallowfullscreen와 webkitallowfullscreen라는 인자와
영상 끝에 &fs=1 이라는 코드가 반드시 붙어있어야 합니다.

티스토리툴바