讓 HTML5 走進 IPTV Framework

  • 2,112 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,112
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
85
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. H.762 (IPTV) 標準能做什麼事?13年4月23⽇日星期⼆二
  • 3. 13年4月23⽇日星期⼆二
  • 4. 13年4月23⽇日星期⼆二
  • 5. 13年4月23⽇日星期⼆二
  • 6. BML+CSS• LIME-CSS (H.763-1)• Selectors• Universal selector• Type selectors• Class selectors• ‘:active’ and ‘:focus’13年4月23⽇日星期⼆二
  • 7. 13年4月23⽇日星期⼆二
  • 8. LIME-DOM• document.getElementById()• document.currentEvent• document.currentFocus• Native objects (Object, Boolean,Array...)• Browser APIs (sleep(), setInterval(), ...)13年4月23⽇日星期⼆二
  • 9. IPTV Methods• launchIPTVContent()• getIPTVLicense()• getIPTVLicenseInfo()• getDRMID()• setContentPackageInfo()• ...13年4月23⽇日星期⼆二
  • 10. 13年4月23⽇日星期⼆二
  • 11. 13年4月23⽇日星期⼆二
  • 12. • 以 H.762 來說,這是⼀一個多媒體互動 App的標準,⽽而 H.762 便是採⽤用了 HTML5 技術。13年4月23⽇日星期⼆二
  • 13. • 機上盒無法觀看網路電視• 安裝 PPS.TV 的 App,連網看電影13年4月23⽇日星期⼆二
  • 14. 我家的電視也可以上網!13年4月23⽇日星期⼆二
  • 15. 13年4月23⽇日星期⼆二
  • 16. 13年4月23⽇日星期⼆二
  • 17. 13年4月23⽇日星期⼆二
  • 18. 13年4月23⽇日星期⼆二
  • 19. 13年4月23⽇日星期⼆二
  • 20. 13年4月23⽇日星期⼆二
  • 21. 13年4月23⽇日星期⼆二
  • 22. 不能滿⾜足我的需求13年4月23⽇日星期⼆二
  • 23. • 以 Moko365 為例,我們有⾮非常多獨家課程,我們是 content maker (contentprovider)• 什麼 infrasturcture / ecosystem 最 Moko365最有利?13年4月23⽇日星期⼆二
  • 24. LG announced it acquired webOS from HP to be usedin its brand of Smart TVs13年4月23⽇日星期⼆二
  • 25. Web-to-TV13年4月23⽇日星期⼆二
  • 26. Google TV with Chrome13年4月23⽇日星期⼆二
  • 27. 13年4月23⽇日星期⼆二
  • 28. • 電視內建瀏覽器(TV Browser)來執⾏行HTML5 App,易於整合網路服務• 以 HTML5 來開發 TV App 或 TV Service,雖然說這不⼀一定是強制的標準,但可能是最能創造商業價值的標準13年4月23⽇日星期⼆二
  • 29. Google’sEcosystemGoogleTVChrome AppYoutube videos13年4月23⽇日星期⼆二
  • 30. 現在,應該是考慮 Google TV 的時刻了!NO13年4月23⽇日星期⼆二
  • 31. don t be evil13年4月23⽇日星期⼆二
  • 32. ⼤大家怎麼做?13年4月23⽇日星期⼆二
  • 33. 13年4月23⽇日星期⼆二
  • 34. HTML5 雲端應⽤用架構(C) 2013 Go8Panel.com13年4月23⽇日星期⼆二
  • 35. 13年4月23⽇日星期⼆二
  • 36. (C) 2013 Go8Panel.comOver Internet13年4月23⽇日星期⼆二
  • 37. 13年4月23⽇日星期⼆二
  • 38. Presentation (UI) byHTML5 and JavaScriptGo8Panel SDKAndroid WebViewNative APIsPhoto2TV App(C) 2013 Go8Panel.comRemoteControllerWiFi Direct andMiracast13年4月23⽇日星期⼆二
  • 39. AndroidWebOSFirefox OSAny HTML5 OS13年4月23⽇日星期⼆二
  • 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. Smartphone SDK =TV SDK13年4月23⽇日星期⼆二
  • 42. • SmartPhone 有了 SDK 後,開啟⼿手機⼤大戰時代• TV 也有 SDK、App store13年4月23⽇日星期⼆二
  • 43. How H.762 Works13年4月23⽇日星期⼆二
  • 44. Getting Started• LIME - Lightweight Interactive MultimediaEnvironment• Using W3C CSS for TV device (CSS TV 1.0)• BML - Broadcast Markup Language13年4月23⽇日星期⼆二
  • 45. h3 {display: inline;display: run-in;}13年4月23⽇日星期⼆二
  • 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. 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. <?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. <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. Web Practice• HTML5• CSS3• JavaScript and DOM13年4月23⽇日星期⼆二
  • 51. H.762+13年4月23⽇日星期⼆二
  • 52. Go8Panel SDKEasy to create UI for TV appsTV user experience and use scenario13年4月23⽇日星期⼆二
  • 53. 可以安裝 App (Content)。⼀一家⼈人坐在客廳沙發上,將不只是對著SmartTV 看節⺫⽬目。⼈人類的客廳與居家⽣生活形態也將產⽣生很⼤大的變化。SDK 與開發者,⼜又將成為客廳⼤大戰的催⼿手。創業家也將在客廳裡,創造出更多的商業模式13年4月23⽇日星期⼆二
  • 54. Mini PC13年4月23⽇日星期⼆二
  • 55. 差異Phone/Tablet TVTouch PanelRemoteControllerRich UI Widgets Display Contents13年4月23⽇日星期⼆二
  • 56. Go8Panel SDK• ⺫⽬目標不是在創造新標準• ⽽而是提供更簡單製作 TV App 的環境• 標準只是⼀一個更具體的 TV appprogramming 依據• H.762: NOT for TV app programming• H.762+: IS for TV app programming13年4月23⽇日星期⼆二
  • 57. Go8Panel SDK• Improve UI• Improve use scenario• Improve UX• Easy to deliver (broadcast) contents to TV13年4月23⽇日星期⼆二
  • 58. TV App = App 2.0GameMovieEducation13年4月23⽇日星期⼆二
  • 59. Go8Panel.com 計畫TV ApplicationsPresentation (UI)(C) 2013 Go8Panel.comG8Panel FrameworkH.762 H.763G8Panel SDKWebSocketAndroid WebViewNative Webkit...13年4月23⽇日星期⼆二
  • 60. • 標準本⾝身並不重要• TV App 相關標準的發展,勢必落後應⽤用3~5 年• WebTV (Web-to-TV)• Android Mini PC + HDMI Output + TVMinitor• 還有更多13年4月23⽇日星期⼆二
  • 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. (1)Set-top-box / Cable TV(2)GoogleTV /Youtube / Chrome Store(3)LeTV Store / ...(4)Your App andYour Cloud13年4月23⽇日星期⼆二
  • 63. StandaloneEcosystemCreate your own Web TV channelCreate standalone TV app13年4月23⽇日星期⼆二
  • 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. <!-- 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. <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⽇日星期⼆二