SlideShare a Scribd company logo
1 of 13
| Page 1
19. March 2016
HbbTV Primer
Kai Mysliwiec
OTT Development
| Page 2
Follow me
@kaimys
I will post the links there
| Page 3
What is HbbTV?
It‘s a TV screen which is
overlaid by a web browser
controlled by your remote
control.
+
• Start URL is signaled via broadcast
• 1280x720px in XHTML!
• HTML contains specific <objects>
which expose the HbbTV API
• onKeyDown listens on special key
events of the remote control
| Page 4
Development
• Firefox with FireHbbTV
AddOn for development
• Buttons:
R = red, G = green,
Y = yellow, B = blue
• P = Play, S = Stop…
• FireBreathed VLC plugin
for video
• Don’t test with Firefox
because HbbTV usually
runs on WebKit or Opera
11 or 12 with Presto
engine
| Page 5
• Page size is always
1280x720
• Old TV sets and set top
boxes had large a
overscan
• Therefor all menus and
text must be placed in the
safe area
• But most modern TVs
show almost the the full
screen area
TV Screen, Overscan, Safe Area
| Page 6
Autostart Application
• Start URL is signaled in
the broadcast signal (AIT)
• The flash is hidden after
10 seconds
• The start page only listens
to the red button
• All other buttons are
handled by the TV
| Page 7
Typical App
• video/broadcast object
can be placed somewhere
on the page and it can be
scaled
• App can listen to all
buttons but the power
button, channel up/down
and manufacturer specific
buttons (Netflix, Samsung
SmartHub…)
• Use CSS3 navigation to
control curser navigation
| Page 8
Video
• Only one video/broadcast
object is allowed on the
page
• HbbTV 1.0  MP4
progressive download
(~60%)
• HbbTV 1.5  Adaptive
Streaming with MPEG
DASH but only ~40% of
the devices support 1.5
right now
• The video/broadcast
object is very tricky!
| Page 9
HTML Code
| Page 10
Source Code
| Page 11| Page 11
HbbTV Standard
| Page 12
Links
 Hello World, hbbtvlib.js, keycodes.js
http://hbbtv-extern.prosieben.de/psdtechnik/7hack/hello-world.html
 MIT-xperts Tests
http://itv.mit-xperts.com/hbbtvtest
 Opera TV Emulator
http://www.operasoftware.com/products/tv/tv-emulator
 BBCs TV Application Layer (TAL) for SmartTV and HbbTV
http://fmtvp.github.io/tal/index.html
 Specs
http://www.hbbtv.org/resource-library
http://www.oipf.tv
http://www.etsi.org

| Page 13
More Links
 Demos
http://tv-html.irt.de/
http://www.hbbig.com/
 HOWTOs
http://www.hbbtv-developer.com/
http://blog.sybit.de/2010/12/hbbtv-und-red-button-ein-kleiner-uberblick/
http://blog.sybit.de/2012/03/hbbtv-fur-anwendungs-entwickler-%E2%80%93-teil-1/
http://blog.sybit.de/2012/03/hbbtv-fur-anwendungs-entwickler-%E2%80%93-teil-2/
http://blog.sybit.de/2012/04/hbbtv-fur-anwendungs-entwickler-%E2%80%93-teil-3/
 MPEG DASH
http://stackoverflow.com/a/23499528/1496459
 Usability
http://www.usabilityblog.de/2012/04/navigation-am-fernsehgerat-usability-und-hbbtv/
 Facts and Figures for HbbTV and Addressable TV
https://www.sevenonemedia.de/downloads/ctv/basispraesentation

More Related Content

Viewers also liked

the fourier series
the fourier seriesthe fourier series
the fourier series
safi al amu
 
IIIrd Eye - Introduction (Group)
IIIrd Eye - Introduction (Group)IIIrd Eye - Introduction (Group)
IIIrd Eye - Introduction (Group)
Reza Jivani
 

Viewers also liked (15)

Catàleg d’experiències Nexus24 v1 2015
Catàleg d’experiències Nexus24 v1 2015Catàleg d’experiències Nexus24 v1 2015
Catàleg d’experiències Nexus24 v1 2015
 
Evolution of TV Measuring Across All Screens | Think With Google
Evolution of TV Measuring Across All Screens | Think With GoogleEvolution of TV Measuring Across All Screens | Think With Google
Evolution of TV Measuring Across All Screens | Think With Google
 
the fourier series
the fourier seriesthe fourier series
the fourier series
 
IoT Platform Meetup - FlowBox
IoT Platform Meetup - FlowBoxIoT Platform Meetup - FlowBox
IoT Platform Meetup - FlowBox
 
IoT Platform Meetup - Sensolus
IoT Platform Meetup - SensolusIoT Platform Meetup - Sensolus
IoT Platform Meetup - Sensolus
 
6 nagra xavier
6 nagra xavier6 nagra xavier
6 nagra xavier
 
Mautilus – HbbTV projects & solutions
Mautilus – HbbTV projects & solutionsMautilus – HbbTV projects & solutions
Mautilus – HbbTV projects & solutions
 
Corporate Venture Capital - Les chiffres clés et bonnes pratiques
Corporate Venture Capital - Les chiffres clés et bonnes pratiquesCorporate Venture Capital - Les chiffres clés et bonnes pratiques
Corporate Venture Capital - Les chiffres clés et bonnes pratiques
 
IoT Platform Meetup - Sigfox
IoT Platform Meetup - SigfoxIoT Platform Meetup - Sigfox
IoT Platform Meetup - Sigfox
 
IoT Platform Meetup - mySCADA
IoT Platform Meetup - mySCADAIoT Platform Meetup - mySCADA
IoT Platform Meetup - mySCADA
 
IIIrd Eye - Introduction (Group)
IIIrd Eye - Introduction (Group)IIIrd Eye - Introduction (Group)
IIIrd Eye - Introduction (Group)
 
IoT Platform Meetup - InteliGlue
IoT Platform Meetup - InteliGlueIoT Platform Meetup - InteliGlue
IoT Platform Meetup - InteliGlue
 
Icareus Solutions HbbTV
Icareus Solutions HbbTVIcareus Solutions HbbTV
Icareus Solutions HbbTV
 
GGV Capital Jenny Lee: Next Gen Wearables, Transportation and Robotics June 2016
GGV Capital Jenny Lee: Next Gen Wearables, Transportation and Robotics June 2016GGV Capital Jenny Lee: Next Gen Wearables, Transportation and Robotics June 2016
GGV Capital Jenny Lee: Next Gen Wearables, Transportation and Robotics June 2016
 
IoT Platform Meetup - Oracle
IoT Platform Meetup - OracleIoT Platform Meetup - Oracle
IoT Platform Meetup - Oracle
 

Similar to HbbTV Primer for 7HACK

Flash platform fitc
Flash platform fitcFlash platform fitc
Flash platform fitc
Mark Doherty
 

Similar to HbbTV Primer for 7HACK (20)

Web and TV Workshp : Technology viewpoint
Web and TV Workshp : Technology viewpointWeb and TV Workshp : Technology viewpoint
Web and TV Workshp : Technology viewpoint
 
Cloud Video Streaming without Plug-Ins
Cloud Video Streaming without Plug-InsCloud Video Streaming without Plug-Ins
Cloud Video Streaming without Plug-Ins
 
From desktop to big screens
From desktop to big screens From desktop to big screens
From desktop to big screens
 
Twisted broadcating
Twisted broadcatingTwisted broadcating
Twisted broadcating
 
IBC Content Everywhere Hub Presentation: HTML5 And Fastest Encoding
IBC Content Everywhere Hub Presentation: HTML5 And Fastest EncodingIBC Content Everywhere Hub Presentation: HTML5 And Fastest Encoding
IBC Content Everywhere Hub Presentation: HTML5 And Fastest Encoding
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?
 
Html5video
Html5videoHtml5video
Html5video
 
HbbTV - Quick Glance
HbbTV - Quick GlanceHbbTV - Quick Glance
HbbTV - Quick Glance
 
Flash platform fitc
Flash platform fitcFlash platform fitc
Flash platform fitc
 
BigBlueButton Platform Components
BigBlueButton Platform ComponentsBigBlueButton Platform Components
BigBlueButton Platform Components
 
Krakow video
Krakow videoKrakow video
Krakow video
 
Vilnius py video
Vilnius py videoVilnius py video
Vilnius py video
 
Gdg lublin video
Gdg lublin videoGdg lublin video
Gdg lublin video
 
Wwx2014 - Todd Kulick "Shipping One Million Lines of Haxe to (Over) One Milli...
Wwx2014 - Todd Kulick "Shipping One Million Lines of Haxe to (Over) One Milli...Wwx2014 - Todd Kulick "Shipping One Million Lines of Haxe to (Over) One Milli...
Wwx2014 - Todd Kulick "Shipping One Million Lines of Haxe to (Over) One Milli...
 
Rija js video
Rija js videoRija js video
Rija js video
 
Webcasting 2.0
Webcasting 2.0Webcasting 2.0
Webcasting 2.0
 
Warsawclouddays video
Warsawclouddays videoWarsawclouddays video
Warsawclouddays video
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High Performance
 
Overview of webSpoon @ Pentaho Bay Area Meetup
Overview of webSpoon @ Pentaho Bay Area MeetupOverview of webSpoon @ Pentaho Bay Area Meetup
Overview of webSpoon @ Pentaho Bay Area Meetup
 
Introduction to Cross-Platform Hybrid Mobile App Development
Introduction to Cross-Platform Hybrid Mobile App DevelopmentIntroduction to Cross-Platform Hybrid Mobile App Development
Introduction to Cross-Platform Hybrid Mobile App Development
 

Recently uploaded

Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Recently uploaded (20)

Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 

HbbTV Primer for 7HACK

  • 1. | Page 1 19. March 2016 HbbTV Primer Kai Mysliwiec OTT Development
  • 2. | Page 2 Follow me @kaimys I will post the links there
  • 3. | Page 3 What is HbbTV? It‘s a TV screen which is overlaid by a web browser controlled by your remote control. + • Start URL is signaled via broadcast • 1280x720px in XHTML! • HTML contains specific <objects> which expose the HbbTV API • onKeyDown listens on special key events of the remote control
  • 4. | Page 4 Development • Firefox with FireHbbTV AddOn for development • Buttons: R = red, G = green, Y = yellow, B = blue • P = Play, S = Stop… • FireBreathed VLC plugin for video • Don’t test with Firefox because HbbTV usually runs on WebKit or Opera 11 or 12 with Presto engine
  • 5. | Page 5 • Page size is always 1280x720 • Old TV sets and set top boxes had large a overscan • Therefor all menus and text must be placed in the safe area • But most modern TVs show almost the the full screen area TV Screen, Overscan, Safe Area
  • 6. | Page 6 Autostart Application • Start URL is signaled in the broadcast signal (AIT) • The flash is hidden after 10 seconds • The start page only listens to the red button • All other buttons are handled by the TV
  • 7. | Page 7 Typical App • video/broadcast object can be placed somewhere on the page and it can be scaled • App can listen to all buttons but the power button, channel up/down and manufacturer specific buttons (Netflix, Samsung SmartHub…) • Use CSS3 navigation to control curser navigation
  • 8. | Page 8 Video • Only one video/broadcast object is allowed on the page • HbbTV 1.0  MP4 progressive download (~60%) • HbbTV 1.5  Adaptive Streaming with MPEG DASH but only ~40% of the devices support 1.5 right now • The video/broadcast object is very tricky!
  • 11. | Page 11| Page 11 HbbTV Standard
  • 12. | Page 12 Links  Hello World, hbbtvlib.js, keycodes.js http://hbbtv-extern.prosieben.de/psdtechnik/7hack/hello-world.html  MIT-xperts Tests http://itv.mit-xperts.com/hbbtvtest  Opera TV Emulator http://www.operasoftware.com/products/tv/tv-emulator  BBCs TV Application Layer (TAL) for SmartTV and HbbTV http://fmtvp.github.io/tal/index.html  Specs http://www.hbbtv.org/resource-library http://www.oipf.tv http://www.etsi.org 
  • 13. | Page 13 More Links  Demos http://tv-html.irt.de/ http://www.hbbig.com/  HOWTOs http://www.hbbtv-developer.com/ http://blog.sybit.de/2010/12/hbbtv-und-red-button-ein-kleiner-uberblick/ http://blog.sybit.de/2012/03/hbbtv-fur-anwendungs-entwickler-%E2%80%93-teil-1/ http://blog.sybit.de/2012/03/hbbtv-fur-anwendungs-entwickler-%E2%80%93-teil-2/ http://blog.sybit.de/2012/04/hbbtv-fur-anwendungs-entwickler-%E2%80%93-teil-3/  MPEG DASH http://stackoverflow.com/a/23499528/1496459  Usability http://www.usabilityblog.de/2012/04/navigation-am-fernsehgerat-usability-und-hbbtv/  Facts and Figures for HbbTV and Addressable TV https://www.sevenonemedia.de/downloads/ctv/basispraesentation