비디오 클라우드의 비디오를 LG SmartTV에 HTML5로 퍼블리싱하기

작성자: Laura Lee  |  브라이트코브

브라이트코브에서는 LG전자의 SmartTV에서 비디오 서비스를 쉽게 할 수 있는 HTML5 기반의 앱 개발용 템플릿을 제공하고 있습니다.

비디오 클라우드에 비디오가 업로드 되어 있는 고객이면 누구나 이 템플릿을 사용해서 쉽고 빠르게 LG전자의 SmartTV 앱을 개발하고 퍼블리싱 하실 수 있는데, LG전자와 공동으로 개발되어 SmartTV에서 리모콘을 사용해서 비디오를 감상 하실 수 있습니다.

LG전자스마트TV 앱 화면

절차는 다음과 같습니다.

  1. 브라이트코브의 비디오 클라우드에 비디오를 업로드 합니다.
  2. TV에서 서비스하고자 하는 비디오들을 종류별로 나누어 플레이 리스트를 작성합니다.
  3. SmartTV용 템플릿을 다운받습니다.
  4. 템플릿을 사용해서 서비스하고자 하는 앱을 구성하고 테스트 합니다.
  5. 완성된 템플릿을 LGAppsTV Seller Lounge를 통해 퍼블리싱합니다.

1. 브라이트코브 비디오 클라우드에 비디오를 업로드 하기

  • 브라이트코브의 비디오 클라우드 스튜디오에 비디오를 업로드 합니다. 업로드 할 때는 비디오들을 구분하기 위한 태그를 비디오의 분류에 맞게 입력합니다.

2. 플레이 리스트 구성하기

  • 비디오의 업로드가 완료되면, 스튜디오의 미디어 모듈에서 비디오들을 태그별로 분류해서 플레이 리스트로 구성하거나, 수동 지정방식으로 플레이 리스트를 작성합니다. 최소 2개의 플레이 리스트가 구성되어야 합니다. 교육동영상의 'Media/Creating Playlist'를 참고하시기 바랍니다.

3. SmartTV용 앱 템플릿 다운로드

  • 브라이트코브 웹 사이트에서 최신 버전의 SmartTV용 앱 템플릿을 다운로드 받습니다. 
  • 템플릿은 기본적으로 다음과 같은 구성 요소로 이루어져 있습니다.
  • App_icon 이미지: 앱으로 퍼블리싱 할 때 앱 아이콘이 되는 이미지 입니다.
  • Index.html: 웹 표준 구조로 실제 앱 화면을 표시하는 메인 UX페이지 입니다.
  • Config.js: 앱의 기본적인 사용 환경을 설정하는 부분으로, 앱 서비스에서 사용할 비디오의 플레이 리스트 설정 밑 Google Analytics와 Yume 광고에 대한 Key 설정도 포함하고 있습니다.
  • Application.js: 데이터 로딩 및 화면 디스플레이에 관한 모든 기능을 관리하는 파일입니다.


    자세한 파일별 설정 내용은 템플릿 내에 포함된 Readme 파일을 참고하시기 바랍니다.

4. 템플릿을 이용한 앱 구성

  • Analytics 세팅: Google Analytics에 계정을 개설하고 속성ID를 복사해서 config.js의 ga_token에 세팅합니다.
  • Token 세팅: 비디오를 업로드한 브라이트코브 비디오 클라우드의 Account Settings에서 'Read token with URL access' 토큰을 복사해서 config.js의 token 필드에 입력합니다.
  • 앱 구성에 사용할 플레이 리스트들의 playlist ID를 config.js파일의 playlist_ids 필드에 추가합니다. 여러 개인의 경우 쉼표로 구분합니다.
  • Media_deliver: config.js에 http또는 http_ios를 입력합니다. http의 경우는 MP4 프로그레시브 다운로드 방식으로, http_ios의 경우는 HLS를 통한 멀티비트레이트 스트리밍을 사용 할 수 있습니다.
  • 광고 세팅: Yume 광고 서버의 도메인 ID를 복사해서 yume_domain_id 필드에 입력합니다.
  • 기본 UX 설정: 기본적인 템플릿의 구조를 그대로 사용하는 경우, app/imges 폴더내의 각 이미지들을 새로 디자인된 이미지들로 변경해서 사용할 수 있습니다.
  • 사용자가 원하는 UX를 새로 만들기를 원하는 경우, 템플릿 내의 application.js를 기본으로 HTML5, CSS3, Javascript, Jquery를 사용해서 새롭게 구성하실 수 있습니다.

    위 세팅만으로 기본적으로 앱을 세팅하고 퍼블리싱 하실 수 있습니다. 템플릿 내에 포함된 Readme 파일의 'How to Guide'를 참고하시면 더 세부적인 파라미터와 설정방법을 확인하실 수 있습니다.


5. 테스트 하기

  • HTML5 기반의 브라우저 앱은 개발/테스트 과정에서는 일반 웹 서버에 결과물을 호스팅하고, 개발자의 PC에서 WebKit 기반의 Safari5.x등의 웹 브라우저를 사용해서 개발 및 테스트 하실 수 있습니다.
  • 일단 PC에서 개발 및 테스트가 완료되면 LG SmartTV 또는 호환기기(Blue-ray Disc Player 등)의 USB 테스트 방식을 통해 디바이스 테스트를 하실 수 있습니다.
  • 테스트 하실 때는 결과물을 인터넷에서 접속 가능한 웹 서버에 설치 하신 후, USB 메모리의 Root 폴더에 'test_apps'이라는 폴더를 만들고, 그 안에 'app_info.txt'라는 파일을 만듭니다. 그리고 이 파일 안에 아래와 같이 3개의 라인을 입력합니다.
  • 위와 같이 파일을 만들어 USB에 넣은 후 TV 또는 호환기기의 USB에 연결하면, 앱 스토어에서 로딩된 것을 보실 수 있습니다.



더 자세한 테스트 과정이나 CP Box를 사용한 테스트 방법은 템플릿 내의 Readme파일에 포함된 'On the LG Box'를 참고하시기 바랍니다.

6. 퍼블리싱 하기