讓 HTML5 走進 IPTV Framework

Jollen Chen <[email protected]>http://www.jollen.org/blog

IP-TV 論壇：Advent of a New Age of IP-TV

台北數位學堂 / 2013.4.16

讓 HTML5 走進 IPTV Framework

HTML5 in IPTV Framework

Copyright (C) 2013 Jollen Chen. All rights reserved.

This work is licensed under a Creative Commons Attribution-NoDerivs 3.0 Unported License.

13年4月23⽇日星期⼆二

mailto:[email protected]

mailto:[email protected]

http://www.jollen.org/blog

http://www.jollen.org/blog

H.762 (IPTV) 標準

能做什麼事？





BML+CSS

• LIME-CSS (H.763-1)

• Selectors

• Universal selector

• Type selectors

• Class selectors

• ‘:active’ and ‘:focus’



LIME-DOM

• document.getElementById()

• document.currentEvent

• document.currentFocus

• Native objects (Object, Boolean, Array...)

• Browser APIs (sleep(), setInterval(), ...)


IPTV Methods

• launchIPTVContent()

• getIPTVLicense()

• getIPTVLicenseInfo()

• getDRMID()

• setContentPackageInfo()

• ...




• 以 H.762 來說，這是⼀一個多媒體互動 App 的標準，⽽而 H.762 便是採⽤用了 HTML5 技術。


• 機上盒無法觀看網路電視• 安裝 PPS.TV 的 App，連網看電影


我家的電視也可以上網！









不能滿⾜足我的需求


• 以 Moko365 為例，我們有⾮非常多獨家課程，我們是 content maker (content provider)

• 什麼 infrasturcture / ecosystem 最 Moko365 最有利？


LG announced it acquired webOS from HP to be used in its brand of Smart TVs


Web-to-TV13年4月23⽇日星期⼆二

Google TV with Chrome13年4月23⽇日星期⼆二


• 電視內建瀏覽器（TV Browser）來執⾏行 HTML5 App，易於整合網路服務

• 以 HTML5 來開發 TV App 或 TV Service，雖然說這不⼀一定是強制的標準，但可能是最能創造商業價值的標準


Google’s Ecosystem

GoogleTV

Chrome AppYoutube videos


現在，應該是考慮 Google TV 的時刻了！

NO


don’t be evil


⼤大家怎麼做？



HTML5 雲端應⽤用架構

(C) 2013 Go8Panel.com




Over Internet



Presentation (UI) by HTML5 and JavaScript

Go8Panel SDK

Android WebView

Native APIs

Photo2TV App


RemoteController

WiFi Direct andMiracast


AndroidWebOSFirefox OS

Any HTML5 OS13年4月23⽇日星期⼆二

Rikomagic MK802 III Dual Core Android 4.1 Jelly Bean Mini PC RK3066 1.6Ghz Cortex A9 1GB RAM 4G ROM HDMI Black

Rockchip RK3066 dual core up to 1.6GHz,cotex A9,quad-core Mali 400 GPU


Smartphone SDK =TV SDK


• SmartPhone 有了 SDK 後，開啟⼿手機⼤大戰時代

• TV 也有 SDK、App store


How H.762 Works


Getting Started

• LIME - Lightweight Interactive Multimedia Environment

• Using W3C CSS for TV device (CSS TV 1.0)

• BML - Broadcast Markup Language


h3 { display: inline; display: run-in; }


1 #content { 2 width: 100%; 3 } 4 5 @media screen { 6 img { 7 } 8 } 9 10 @media tv { 11 img { 12 width: 300px; 13 } 14 }


BML

• Developed by Japanese ARIB Association

• Digital TV broadcasting

• Derived from XHTML 1.0 strict, CSS 1, CSS 2 and ECMAScript (JavaScript)

• Now toward HTML5


<?xml version="1.0" encoding="EUC-JP" ?><!DOCTYPE bml PUBLIC "+//ARIB STD-B24:1999//DTD BML Document//JA" "bml_1_0.dtd"><?bml bml-version="1.0" ?>


<bml><head><style>a:active{! font-size: 32px;}</style></head><body></body></bml>

<html><head><style>a:active{! font-size: 32px;}</style></head><body></body></html>


Web Practice

• HTML5

• CSS3

• JavaScript and DOM


H.762+


Go8Panel SDK Easy to create UI for TV appsTV user experience and use scenario


可以安裝 App (Content)。

⼀一家⼈人坐在客廳沙發上，將不只是對著

SmartTV 看節⺫⽬目。⼈人類的客廳與居家⽣生活形態也將產⽣生很⼤大的變化。

SDK 與開發者，⼜又將成為客廳⼤大戰的催⼿手。創業家也將在客廳裡，創造出更多的商業模式


Mini PC


差異

Phone/Tablet TV

Touch PanelRemote

Controller

Rich UI Widgets Display Contents


Go8Panel SDK

• ⺫⽬目標不是在創造新標準• ⽽而是提供更簡單製作 TV App 的環境

• 標準只是⼀一個更具體的 TV app programming 依據

• H.762: NOT for TV app programming

• H.762+: IS for TV app programming


Go8Panel SDK

• Improve UI

• Improve use scenario

• Improve UX

• Easy to deliver (broadcast) contents to TV


TV App = App 2.0

Game

Movie

Education13年4月23⽇日星期⼆二

Go8Panel.com 計畫TV Applications

Presentation (UI)


G8Panel Framework

H.762 H.763

G8Panel SDK

WebSocket

Android WebView

Native Webkit

...


• 標準本⾝身並不重要• TV App 相關標準的發展，勢必落後應⽤用

3~5 年

• WebTV (Web-to-TV)

• Android Mini PC + HDMI Output + TV Minitor

• 還有更多


Why H.762+Standardize APIs (Application Programming Interface)

H.762 goes to developers community

More and more apps, and contents

Easy development

Helping the new App 2.0

Use standard HTML5 browsers for TV runtime


(1)Set-top-box / Cable TV

(2)GoogleTV / Youtube / Chrome Store

(3)LeTV Store / ...

(4)Your App and Your Cloud


StandaloneEcosystem

Create your own Web TV channel

Create standalone TV app


<!DOCTYPE html ><html><head> <meta charset="UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  <link rel="stylesheet" href="css/base.css" type="text/css" /> <link rel="stylesheet" href="css/common.css" type="text/css" />  <link rel="stylesheet" href="css/lime/default.css" type="text/css" />


 <link rel="stylesheet" media="screen and (max-width: 480px)" href="css/800.css" type="text/css" /> <link rel="stylesheet" media="screen and (max-width: 720px) and (min-width: 481px)" href="css/800.css" type="text/css" /> <link rel="stylesheet" media="screen and (max-width: 800px) and (min-width: 721px)" href="css/800.css" type="text/css" /> <link rel="stylesheet" media="screen and (min-width: 801px)" href="css/800.css" type="text/css" />


<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="js/jquery.iptv.js" type="text/javascript"></script> <script src="js/jquery.webrtc.js" type="text/javascript"></script>

<script>$(document).ready(function() { $.IPTVButtonRed(start()); $.IPTVButtonBlue(nextPage()); $.IPTVButtonYellow(lastPage()); });</script>

Technology

讓 HTML5 走進 IPTV Framework