Your SlideShare is downloading. ×
0
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

2,269

Published on

Published in: Technology

Transcript of "讓 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⽇日星期⼆二
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×