Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Jollen Chen <jollen@jollen.org>http://www.jollen.org/blogIP-TV 論壇:Advent of a New Age of IP-TV台北數位學堂 / 2013.4.16讓	 HTML5	 ...
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.....
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 (contentprovider)• 什麼 infrasturcture / ecosystem 最 Moko365最有利?13年4月23⽇日星期⼆二
LG announced it acquired webOS from HP to be usedin its brand of Smart TVs13年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’sEcosystemGoogleTVChrome AppYoutube videos13年4月23⽇日星期⼆二
現在,應該是考慮 Google TV 的時刻了!NO13年4月23⽇日星期⼆二
don t be evil13年4月23⽇日星期⼆二
⼤大家怎麼做?13年4月23⽇日星期⼆二
13年4月23⽇日星期⼆二
HTML5 雲端應⽤用架構(C) 2013 Go8Panel.com13年4月23⽇日星期⼆二
13年4月23⽇日星期⼆二
(C) 2013 Go8Panel.comOver Internet13年4月23⽇日星期⼆二
13年4月23⽇日星期⼆二
Presentation (UI) byHTML5 and JavaScriptGo8Panel SDKAndroid WebViewNative APIsPhoto2TV App(C) 2013 Go8Panel.comRemoteContr...
AndroidWebOSFirefox OSAny HTML5 OS13年4月23⽇日星期⼆二
Rikomagic MK802 III Dual Core Android 4.1 Jelly Bean Mini PC RK3066 1.6GhzCortex A9 1GB RAM 4G ROM HDMI BlackRockchip RK30...
Smartphone SDK =TV SDK13年4月23⽇日星期⼆二
• SmartPhone 有了 SDK 後,開啟⼿手機⼤大戰時代• TV 也有 SDK、App store13年4月23⽇日星期⼆二
How H.762 Works13年4月23⽇日星期⼆二
Getting Started• LIME - Lightweight Interactive MultimediaEnvironment• Using W3C CSS for TV device (CSS TV 1.0)• BML - Bro...
h3 {display: inline;display: run-in;}13年4月23⽇日星期⼆二
1 #content {2 width: 100%;3 }45 @media screen {6 img {7 }8 }910 @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 2and ECMAS...
<?xml version="1.0" encoding="EUC-JP" ?><!DOCTYPE bml PUBLIC "+//ARIB STD-B24:1999//DTD BML Document//JA" "bml_1_0.dtd"><?...
<bml><head><style>a:active{! font-size: 32px;}</style></head><body></body></bml><html><head><style>a:active{! font-size: 3...
Web Practice• HTML5• CSS3• JavaScript and DOM13年4月23⽇日星期⼆二
H.762+13年4月23⽇日星期⼆二
Go8Panel SDKEasy to create UI for TV appsTV user experience and use scenario13年4月23⽇日星期⼆二
可以安裝 App (Content)。⼀一家⼈人坐在客廳沙發上,將不只是對著SmartTV 看節⺫⽬目。⼈人類的客廳與居家⽣生活形態也將產⽣生很⼤大的變化。SDK 與開發者,⼜又將成為客廳⼤大戰的催⼿手。創業家也將在客廳裡,創造出更多的商業模式...
Mini PC13年4月23⽇日星期⼆二
差異Phone/Tablet TVTouch PanelRemoteControllerRich UI Widgets Display Contents13年4月23⽇日星期⼆二
Go8Panel SDK• ⺫⽬目標不是在創造新標準• ⽽而是提供更簡單製作 TV App 的環境• 標準只是⼀一個更具體的 TV appprogramming 依據• H.762: NOT for TV app programming• H....
Go8Panel SDK• Improve UI• Improve use scenario• Improve UX• Easy to deliver (broadcast) contents to TV13年4月23⽇日星期⼆二
TV App = App 2.0GameMovieEducation13年4月23⽇日星期⼆二
Go8Panel.com 計畫TV ApplicationsPresentation (UI)(C) 2013 Go8Panel.comG8Panel FrameworkH.762 H.763G8Panel SDKWebSocketAndroi...
• 標準本⾝身並不重要• TV App 相關標準的發展,勢必落後應⽤用3~5 年• WebTV (Web-to-TV)• Android Mini PC + HDMI Output + TVMinitor• 還有更多13年4月23⽇日星期⼆二
Why H.762+Standardize APIs (Application Programming Interface)H.762 goes to developers communityMore and more apps, and co...
(1)Set-top-box / Cable TV(2)GoogleTV /Youtube / Chrome Store(3)LeTV Store / ...(4)Your App andYour Cloud13年4月23⽇日星期⼆二
StandaloneEcosystemCreate your own Web TV channelCreate standalone TV app13年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 for screens (TV, tablet…) --->	 <link rel="stylesheet"	 media="screen and (max-width: 480px)...
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><script src="js/jquery-1.8.3.min.js"...
Upcoming SlideShare
Loading in …5
×

讓 HTML5 走進 IPTV Framework

3,015 views

Published on

Published in: Technology

讓 HTML5 走進 IPTV Framework

  1. 1. Jollen Chen <jollen@jollen.org>http://www.jollen.org/blogIP-TV 論壇:Advent of a New Age of IP-TV台北數位學堂 / 2013.4.16讓 HTML5 走進 IPTV FrameworkHTML5 in IPTV FrameworkCopyright (C) 2013 Jollen Chen. All rights reserved.This work is licensed under a Creative Commons Attribution-NoDerivs 3.0 Unported License.13年4月23⽇日星期⼆二
  2. 2. H.762 (IPTV) 標準能做什麼事?13年4月23⽇日星期⼆二
  3. 3. 13年4月23⽇日星期⼆二
  4. 4. 13年4月23⽇日星期⼆二
  5. 5. 13年4月23⽇日星期⼆二
  6. 6. BML+CSS• LIME-CSS (H.763-1)• Selectors• Universal selector• Type selectors• Class selectors• ‘:active’ and ‘:focus’13年4月23⽇日星期⼆二
  7. 7. 13年4月23⽇日星期⼆二
  8. 8. LIME-DOM• document.getElementById()• document.currentEvent• document.currentFocus• Native objects (Object, Boolean,Array...)• Browser APIs (sleep(), setInterval(), ...)13年4月23⽇日星期⼆二
  9. 9. IPTV Methods• launchIPTVContent()• getIPTVLicense()• getIPTVLicenseInfo()• getDRMID()• setContentPackageInfo()• ...13年4月23⽇日星期⼆二
  10. 10. 13年4月23⽇日星期⼆二
  11. 11. 13年4月23⽇日星期⼆二
  12. 12. • 以 H.762 來說,這是⼀一個多媒體互動 App的標準,⽽而 H.762 便是採⽤用了 HTML5 技術。13年4月23⽇日星期⼆二
  13. 13. • 機上盒無法觀看網路電視• 安裝 PPS.TV 的 App,連網看電影13年4月23⽇日星期⼆二
  14. 14. 我家的電視也可以上網!13年4月23⽇日星期⼆二
  15. 15. 13年4月23⽇日星期⼆二
  16. 16. 13年4月23⽇日星期⼆二
  17. 17. 13年4月23⽇日星期⼆二
  18. 18. 13年4月23⽇日星期⼆二
  19. 19. 13年4月23⽇日星期⼆二
  20. 20. 13年4月23⽇日星期⼆二
  21. 21. 13年4月23⽇日星期⼆二
  22. 22. 不能滿⾜足我的需求13年4月23⽇日星期⼆二
  23. 23. • 以 Moko365 為例,我們有⾮非常多獨家課程,我們是 content maker (contentprovider)• 什麼 infrasturcture / ecosystem 最 Moko365最有利?13年4月23⽇日星期⼆二
  24. 24. LG announced it acquired webOS from HP to be usedin its brand of Smart TVs13年4月23⽇日星期⼆二
  25. 25. Web-to-TV13年4月23⽇日星期⼆二
  26. 26. Google TV with Chrome13年4月23⽇日星期⼆二
  27. 27. 13年4月23⽇日星期⼆二
  28. 28. • 電視內建瀏覽器(TV Browser)來執⾏行HTML5 App,易於整合網路服務• 以 HTML5 來開發 TV App 或 TV Service,雖然說這不⼀一定是強制的標準,但可能是最能創造商業價值的標準13年4月23⽇日星期⼆二
  29. 29. Google’sEcosystemGoogleTVChrome AppYoutube videos13年4月23⽇日星期⼆二
  30. 30. 現在,應該是考慮 Google TV 的時刻了!NO13年4月23⽇日星期⼆二
  31. 31. don t be evil13年4月23⽇日星期⼆二
  32. 32. ⼤大家怎麼做?13年4月23⽇日星期⼆二
  33. 33. 13年4月23⽇日星期⼆二
  34. 34. HTML5 雲端應⽤用架構(C) 2013 Go8Panel.com13年4月23⽇日星期⼆二
  35. 35. 13年4月23⽇日星期⼆二
  36. 36. (C) 2013 Go8Panel.comOver Internet13年4月23⽇日星期⼆二
  37. 37. 13年4月23⽇日星期⼆二
  38. 38. Presentation (UI) byHTML5 and JavaScriptGo8Panel SDKAndroid WebViewNative APIsPhoto2TV App(C) 2013 Go8Panel.comRemoteControllerWiFi Direct andMiracast13年4月23⽇日星期⼆二
  39. 39. AndroidWebOSFirefox OSAny HTML5 OS13年4月23⽇日星期⼆二
  40. 40. Rikomagic MK802 III Dual Core Android 4.1 Jelly Bean Mini PC RK3066 1.6GhzCortex A9 1GB RAM 4G ROM HDMI BlackRockchip RK3066 dual core up to 1.6GHz,cotex A9,quad-core Mali 400 GPU13年4月23⽇日星期⼆二
  41. 41. Smartphone SDK =TV SDK13年4月23⽇日星期⼆二
  42. 42. • SmartPhone 有了 SDK 後,開啟⼿手機⼤大戰時代• TV 也有 SDK、App store13年4月23⽇日星期⼆二
  43. 43. How H.762 Works13年4月23⽇日星期⼆二
  44. 44. Getting Started• LIME - Lightweight Interactive MultimediaEnvironment• Using W3C CSS for TV device (CSS TV 1.0)• BML - Broadcast Markup Language13年4月23⽇日星期⼆二
  45. 45. h3 {display: inline;display: run-in;}13年4月23⽇日星期⼆二
  46. 46. 1 #content {2 width: 100%;3 }45 @media screen {6 img {7 }8 }910 @media tv {11 img {12 width: 300px;13 }14 }13年4月23⽇日星期⼆二
  47. 47. BML• Developed by Japanese ARIB Association• Digital TV broadcasting• Derived from XHTML 1.0 strict, CSS 1, CSS 2and ECMAScript (JavaScript)• Now toward HTML513年4月23⽇日星期⼆二
  48. 48. <?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⽇日星期⼆二
  49. 49. <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⽇日星期⼆二
  50. 50. Web Practice• HTML5• CSS3• JavaScript and DOM13年4月23⽇日星期⼆二
  51. 51. H.762+13年4月23⽇日星期⼆二
  52. 52. Go8Panel SDKEasy to create UI for TV appsTV user experience and use scenario13年4月23⽇日星期⼆二
  53. 53. 可以安裝 App (Content)。⼀一家⼈人坐在客廳沙發上,將不只是對著SmartTV 看節⺫⽬目。⼈人類的客廳與居家⽣生活形態也將產⽣生很⼤大的變化。SDK 與開發者,⼜又將成為客廳⼤大戰的催⼿手。創業家也將在客廳裡,創造出更多的商業模式13年4月23⽇日星期⼆二
  54. 54. Mini PC13年4月23⽇日星期⼆二
  55. 55. 差異Phone/Tablet TVTouch PanelRemoteControllerRich UI Widgets Display Contents13年4月23⽇日星期⼆二
  56. 56. Go8Panel SDK• ⺫⽬目標不是在創造新標準• ⽽而是提供更簡單製作 TV App 的環境• 標準只是⼀一個更具體的 TV appprogramming 依據• H.762: NOT for TV app programming• H.762+: IS for TV app programming13年4月23⽇日星期⼆二
  57. 57. Go8Panel SDK• Improve UI• Improve use scenario• Improve UX• Easy to deliver (broadcast) contents to TV13年4月23⽇日星期⼆二
  58. 58. TV App = App 2.0GameMovieEducation13年4月23⽇日星期⼆二
  59. 59. Go8Panel.com 計畫TV ApplicationsPresentation (UI)(C) 2013 Go8Panel.comG8Panel FrameworkH.762 H.763G8Panel SDKWebSocketAndroid WebViewNative Webkit...13年4月23⽇日星期⼆二
  60. 60. • 標準本⾝身並不重要• TV App 相關標準的發展,勢必落後應⽤用3~5 年• WebTV (Web-to-TV)• Android Mini PC + HDMI Output + TVMinitor• 還有更多13年4月23⽇日星期⼆二
  61. 61. Why H.762+Standardize APIs (Application Programming Interface)H.762 goes to developers communityMore and more apps, and contentsEasy developmentHelping the new App 2.0Use standard HTML5 browsers for TV runtime13年4月23⽇日星期⼆二
  62. 62. (1)Set-top-box / Cable TV(2)GoogleTV /Youtube / Chrome Store(3)LeTV Store / ...(4)Your App andYour Cloud13年4月23⽇日星期⼆二
  63. 63. StandaloneEcosystemCreate your own Web TV channelCreate standalone TV app13年4月23⽇日星期⼆二
  64. 64. <!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⽇日星期⼆二
  65. 65. <!-- 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⽇日星期⼆二
  66. 66. <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⽇日星期⼆二

×