讓 HTML5 走進 IPTV Framework

Jollen Chen <jollen@jollen.org>
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⽇日星期⼆二

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-TV

Google TV with Chrome

• 電視內建瀏覽器（TV Browser）來執⾏行
HTML5 App，易於整合網路服務
• 以 HTML5 來開發 TV App 或 TV Service，
雖然說這不⼀一定是強制的標準，但可能是
最能創造商業價值的標準

Google’s
Ecosystem
GoogleTV
Chrome App
Youtube 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
Remote
Controller
WiFi Direct and
Miracast

Android
WebOS
Firefox OS
Any HTML5 OS

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 apps
TV user experience and use scenario

可以安裝 App (Content)。
⼀一家⼈人坐在客廳沙發上，將不只是對著
SmartTV 看節⺫⽬目。⼈人類的客廳與居家⽣生活形
態也將產⽣生很⼤大的變化。
SDK 與開發者，⼜又將成為客廳⼤大戰的催⼿手。
創業家也將在客廳裡，創造出更多的商業模
式

Mini PC

差異
Phone/Tablet TV
Touch Panel
Remote
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
Education

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 andYour Cloud

Standalone
Ecosystem
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" />


media="screen and (max-width: 720px) and (min-width: 481px)"
href="css/800.css"

type="text/css" />


media="screen and (max-width: 800px) and (min-width: 721px)"
href="css/800.css"

type="text/css" />


media="screen and (min-width: 801px)"
href="css/800.css"

type="text/css" />

讓 HTML5 走進 IPTV Framework

Recommandé

Recommandé

Contenu connexe

Similaire à 讓 HTML5 走進 IPTV Framework

Similaire à 讓 HTML5 走進 IPTV Framework (20)

Plus de Jollen Chen

Plus de Jollen Chen (20)

讓 HTML5 走進 IPTV Framework