브라이트코브에서는 LG전자의 SmartTV에서 비디오 서비스를 쉽게 할 수 있는 HTML5 기반의 앱 개발용 템플릿을 제공하고 있습니다.
비디오 클라우드에 비디오가 업로드 되어 있는 고객이면 누구나 이 템플릿을 사용해서 쉽고 빠르게 LG전자의 SmartTV 앱을 개발하고 퍼블리싱 하실 수 있는데, LG전자와 공동으로 개발되어 SmartTV에서 리모콘을 사용해서 비디오를 감상 하실 수 있습니다.
절차는 다음과 같습니다.
- 브라이트코브의 비디오 클라우드에 비디오를 업로드 합니다.
- TV에서 서비스하고자 하는 비디오들을 종류별로 나누어 플레이 리스트를 작성합니다.
- SmartTV용 템플릿을 다운받습니다.
- 템플릿을 사용해서 서비스하고자 하는 앱을 구성하고 테스트 합니다.
- 완성된 템플릿을 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. 퍼블리싱 하기
- 개발 및 테스트가 완료되면 LG 전자의 Seller Lounge에 판매자로 등록 하신 후 LG전자의 퍼블리싱 절차 안내에 따라 퍼블리싱 하시면 됩니다.