View
2.216
Download
7
Category
Preview:
Citation preview
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) 標準
能做什麼事？
13年4月23⽇日星期⼆二
13年4月23⽇日星期⼆二
13年4月23⽇日星期⼆二
13年4月23⽇日星期⼆二
BML+CSS
• LIME-CSS (H.763-1)
• Selectors
• Universal selector
• Type selectors
• Class selectors
• ‘:active’ and ‘:focus’
13年4月23⽇日星期⼆二
13年4月23⽇日星期⼆二
LIME-DOM
• document.getElementById()
• document.currentEvent
• document.currentFocus
• Native objects (Object, Boolean, Array...)
• Browser APIs (sleep(), setInterval(), ...)
13年4月23⽇日星期⼆二
IPTV Methods
• launchIPTVContent()
• getIPTVLicense()
• getIPTVLicenseInfo()
• getDRMID()
• setContentPackageInfo()
• ...
13年4月23⽇日星期⼆二
13年4月23⽇日星期⼆二
13年4月23⽇日星期⼆二
• 以 H.762 來說，這是⼀一個多媒體互動 App 的標準，⽽而 H.762 便是採⽤用了 HTML5 技術。
13年4月23⽇日星期⼆二
• 機上盒無法觀看網路電視• 安裝 PPS.TV 的 App，連網看電影
13年4月23⽇日星期⼆二
我家的電視也可以上網！
13年4月23⽇日星期⼆二
13年4月23⽇日星期⼆二
13年4月23⽇日星期⼆二
13年4月23⽇日星期⼆二
13年4月23⽇日星期⼆二
13年4月23⽇日星期⼆二
13年4月23⽇日星期⼆二
13年4月23⽇日星期⼆二
不能滿⾜足我的需求
13年4月23⽇日星期⼆二
• 以 Moko365 為例，我們有⾮非常多獨家課程，我們是 content maker (content provider)
• 什麼 infrasturcture / ecosystem 最 Moko365 最有利？
13年4月23⽇日星期⼆二
LG announced it acquired webOS from HP to be used in its brand of Smart TVs
13年4月23⽇日星期⼆二
Web-to-TV13年4月23⽇日星期⼆二
Google TV with Chrome13年4月23⽇日星期⼆二
13年4月23⽇日星期⼆二
• 電視內建瀏覽器（TV Browser）來執⾏行 HTML5 App，易於整合網路服務
• 以 HTML5 來開發 TV App 或 TV Service，雖然說這不⼀一定是強制的標準，但可能是最能創造商業價值的標準
13年4月23⽇日星期⼆二
Google’s Ecosystem
GoogleTV
Chrome AppYoutube videos
13年4月23⽇日星期⼆二
現在，應該是考慮 Google TV 的時刻了！
NO
13年4月23⽇日星期⼆二
don’t be evil
13年4月23⽇日星期⼆二
⼤大家怎麼做？
13年4月23⽇日星期⼆二
13年4月23⽇日星期⼆二
HTML5 雲端應⽤用架構
(C) 2013 Go8Panel.com
13年4月23⽇日星期⼆二
13年4月23⽇日星期⼆二
(C) 2013 Go8Panel.com
Over Internet
13年4月23⽇日星期⼆二
13年4月23⽇日星期⼆二
Presentation (UI) by HTML5 and JavaScript
Go8Panel SDK
Android WebView
Native APIs
Photo2TV App
(C) 2013 Go8Panel.com
RemoteController
WiFi Direct andMiracast
13年4月23⽇日星期⼆二
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
13年4月23⽇日星期⼆二
Smartphone SDK =TV SDK
13年4月23⽇日星期⼆二
• SmartPhone 有了 SDK 後，開啟⼿手機⼤大戰時代
• TV 也有 SDK、App store
13年4月23⽇日星期⼆二
How H.762 Works
13年4月23⽇日星期⼆二
Getting Started
• LIME - Lightweight Interactive Multimedia Environment
• Using W3C CSS for TV device (CSS TV 1.0)
• BML - Broadcast Markup Language
13年4月23⽇日星期⼆二
h3 { display: inline; display: run-in; }
13年4月23⽇日星期⼆二
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 }
13年4月23⽇日星期⼆二
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
13年4月23⽇日星期⼆二
<?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" ?>
13年4月23⽇日星期⼆二
<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>
13年4月23⽇日星期⼆二
Web Practice
• HTML5
• CSS3
• JavaScript and DOM
13年4月23⽇日星期⼆二
H.762+
13年4月23⽇日星期⼆二
Go8Panel SDK Easy to create UI for TV appsTV user experience and use scenario
13年4月23⽇日星期⼆二
可以安裝 App (Content)。
⼀一家⼈人坐在客廳沙發上，將不只是對著
SmartTV 看節⺫⽬目。⼈人類的客廳與居家⽣生活形態也將產⽣生很⼤大的變化。
SDK 與開發者，⼜又將成為客廳⼤大戰的催⼿手。創業家也將在客廳裡，創造出更多的商業模式
13年4月23⽇日星期⼆二
Mini PC
13年4月23⽇日星期⼆二
差異
Phone/Tablet TV
Touch PanelRemote
Controller
Rich UI Widgets Display Contents
13年4月23⽇日星期⼆二
Go8Panel SDK
• ⺫⽬目標不是在創造新標準• ⽽而是提供更簡單製作 TV App 的環境
• 標準只是⼀一個更具體的 TV app programming 依據
• H.762: NOT for TV app programming
• H.762+: IS for TV app programming
13年4月23⽇日星期⼆二
Go8Panel SDK
• Improve UI
• Improve use scenario
• Improve UX
• Easy to deliver (broadcast) contents to TV
13年4月23⽇日星期⼆二
TV App = App 2.0
Game
Movie
Education13年4月23⽇日星期⼆二
Go8Panel.com 計畫TV Applications
Presentation (UI)
(C) 2013 Go8Panel.com
G8Panel Framework
H.762 H.763
G8Panel SDK
WebSocket
Android WebView
Native Webkit
...
13年4月23⽇日星期⼆二
• 標準本⾝身並不重要• TV App 相關標準的發展，勢必落後應⽤用
3~5 年
• WebTV (Web-to-TV)
• Android Mini PC + HDMI Output + TV Minitor
• 還有更多
13年4月23⽇日星期⼆二
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
13年4月23⽇日星期⼆二
(1)Set-top-box / Cable TV
(2)GoogleTV / Youtube / Chrome Store
(3)LeTV Store / ...
(4)Your App and Your Cloud
13年4月23⽇日星期⼆二
StandaloneEcosystem
Create your own Web TV channel
Create standalone TV app
13年4月23⽇日星期⼆二
<!DOCTYPE html ><html><head> <meta charset="UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- This is the Go8Panel SDK ---> <link rel="stylesheet" href="css/base.css" type="text/css" /> <link rel="stylesheet" href="css/common.css" type="text/css" /> <!-- This is based on ITU-T H.763.1 ---> <link rel="stylesheet" href="css/lime/default.css" type="text/css" />
13年4月23⽇日星期⼆二
<!-- This is the Go8Panel SDK for screens (TV, tablet…) ---> <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" />
13年4月23⽇日星期⼆二
<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>
13年4月23⽇日星期⼆二
Recommended