HbbTV - Hybrid brodcast-broadband
TV
Index
General
|
|
Estàndards / Standards
|
|||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||
Proves /Tests |
|||||||||||||||||||||||||||||||||||||||||||||
Exemples / Examples |
|
Programari / Software |
|
Receptors / Receivers |
|
Desenvolupament / Development
- 8. Browser application environment
- 8.1 OIPF
- Annex A: OIPF DAE specification profile
reference in DAE
embedded object / classes
methods
HTML
OIPF vol5: DAE
7.2 Application management APIs
7.2.1 The application/oipfApplicationManager embedded object getApplicationVisualizationMode()
getOwnerApplication()(returns an application)
getChildApplicationsgetChildApplicationsinstallWidgetuninstallWidget
<object type="application/oipfApplicationManager" id="oipfAppMan"></object>7.2.2 The Application class
7.2.5 The Keyset class setValue(value, otherKeys)
7.3 Configuration and settings APIs
7.3 The application/oipfConfiguration embedded object
<object type="application/oipfConfiguration" id="oipfConfig"></object>
7.3.2 The Configuration class
...
7.13 Scheduled content and hybrid tuner APIs
7.13.1 The video/broadcast embedded object getChannelConfig()bindToCurrentChannel()createChannelObject()setChannel()prevChannel()nextChannel()stop()setFullScreen()setVolume()getVolume()release()- added by HbbTV:
addStreamEventListener(...)removeStreamEventListener(...)StreamEvent
<object type="video/broadcast" id="broadcast"></object>7.14 Media playback APIs
7.14.1 The CEA 2014 A/V Control embedded object (CEA-2014-A, sec.5.7.1)
play(speed)stop()setSource()
<object type="video/mpeg" id="video_mpeg"></object>
<object type="video/mp4" id="video_mp4"></object>
<object type="application/dash+xml" id="video_dash"></object>
- 8.2 Defined Javascript APIs (additional methods for video/broadcast)
- 8.2.1 Acquisition of DSM-CC stream events
- 8.2.2 Carousel objects access with XMLHttpRequest
| MitXperts (mitxp) |
IRT |
sunglim | |||||
|---|---|---|---|---|---|---|---|
| HbbTV-Testsuite |
HbbTV_Application_Template | HbbTV_Demo_App | |||||
| Basic |
Advanced |
Samples / redbutton_app | |||||
| base.js | hbbtvlib.js | - |
hbbtvlib.js | hbbtvlib.js |
base.js | video_base.js | |
var app =
document.getElementById('appmgr').getOwnerApplication(document); |
initApp() | hbbtvlib_show() | (html) |
hbbtvlib_red_initialize() | hbbtvlib_red_initialize() | initApp() (call to setKeyset(0x1...)) |
initApp()
(call to setKeyset(0x1...)) |
app.activate(); |
|||||||
var app =
document.getElementById('appmgr').getOwnerApplication(document); |
setKeyset(mask) | hbbtvlib_setKeysets() | hbbtvlib_red_initialize() | hbbtvlib_red_initialize() | setKeyset(mask) | setKeyset(mask) | |
document.addEventListener("keydown",
function(e) { |
registerKeyEventListener() | registerKeyEventListener() | registerKeyEventListener() | ||||
document.getElementById('video').bindToCurrentChannel(); |
initVideo() | initVideo() | initVideo() | ||||
| ... |
|||||||
...
| Ohana-Revuelta | IRT | MIT-Experts |
RTVE |
|||
|---|---|---|---|---|---|---|
| common |
js
files |
hbbtvlib.js |
hbbtvlib.js
|
base.js
|
hbbtvlib.js
(IRT) |
hbbtv.js / hbbtv_prueba.js
|
| keycodes.js |
keycodes.js |
keycodes.js |
constants.js | |||
| application
specific |
js |
base.js | main.js
|
settings.js |
main.js
|
|
| css |
global.css
|
|||||
| index.html |
doctype |
|
<?xml version="1.0"
encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//HbbTV//1.1.1//EN" "http://www.hbbtv.org/dtd/HbbTV-1.1.1.dtd"> |
|||
| html |
<html
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
|||||
| head |
<meta http-equiv="content-type" content="application/vnd.hbbtv.xhtml+xml;charset=UTF-8"/> | |||||
tests.php
|
base.php
|
index.php
|
index.html
|
|||
|
||||||
| <script
type="text/javascript"> ... </script> |
<script
type="text/javascript"> function init() { try { hbbtv_init(); hbbtv_show(); ... } </script> |
|||||
| <link rel="stylesheet" type="text/css" href="hbbtv.css"/> | ||||||
|
||||||
| body |
tests/index.php
|
base.php index.php
|
index.php
|
|||
|
||||||
- Programming for HbbTV [closed]
- TAL (TV
Application Layer) (BBC)
- Exemples / Examples
- Simple HbbTV HTML
- ...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//HbbTV//1.2.1//EN" "http://www.hbbtv.org/dtd/HbbTV-1.2.1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>HbbTV DASH</title>
<meta http-equiv="content-type" content="application/vnd.hbbtv.xhtml+xml;charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="css/hbbtv.css"/>
<script type="text/javascript" src="js/hbbtv.js"></script>
<script type="text/javascript">
function init() {
try {
...
}
}
</script>
</head>
<body onload="init();">
<div style="visibility: hidden; display: none;">
<object type="application/oipfApplicationManager" id="oipfAppMan"></object>
<object type="application/oipfConfiguration" id="oipfConfig"></object>
</div>
<div id="safe_area">
<object id="video_dash" type ="application/dash+xml" style="width:640px; height: 360px;"></object>
<ul>
<li>Primer element</li>
<li>Segon element</li>
</ul>
</div>
</body>
</html>
- Client behaviour:
- href focus highlight:
- Samsung: not shown
- Engel: shown
- host vs hostname in Javascript
- Video
function reprodueix(adreca_absoluta)
{
var videoElem = document.getElementById("video");
videoElem.stop();
videoElem.data = adreca_absoluta;
videoElem.play(1);
}
<object id="broadcast" type="video/broadcast" style="position: absolute; top: 100px; left: 400px; width: 600px; height: 300px;"></object><object id="video" type="video/mp4" style="position: absolute; top: 100px; left: 400px; width: 600px; height: 300px;"></object><object id="video" type="video/mpeg" style="position: absolute; top: 100px; left: 400px; width: 600px; height: 300px;"></object><object id="video" type="application/dash+xml" style="position: absolute; top: 100px; left: 400px; width: 600px; height: 300px;"></object><a href="javascript:reprodueix(location.protocol+'//'+location.host+'/path/to/toto.mp4')">toto sequence</a>- PIP
- Standard TS 102 796 v1.2.1, page 72
- "Terminals shall only support one active instance of
a video/broadcast object at any time."
- Llançadora / Launcher
<head>
<script type='text/javascript' language='javascript'>
function init() {
...
window.setTimeout (function(){
hbbtv_hide();
document.getElementById("splash_image").style.visibility = "hidden";
}, 5000);
...
}
</script>
</head>
<body>
<div id="splash_image">
<img src="imatge.png"/>
</div>
</body>
- Focus
- document.getElementById("primer").focus();
- DVB signalling:
- "Single appliaction location descriptor" (TS 102 809: 5.3.7) cannot be empty: at least "/" (for root documents)
- KeySet
values (OIPF vol5 7.2.5):
constant name
numeric value
use
RED
0x1
- VK_RED
GREEN
0x2 - VK_GREEN
YELLOW
0x4 - VK_YELLOW
BLUE
0x8 - VK_BLUE
NAVIGATION
0x10
- VK_UP
- VK_DOWN
- VK_LEFT
- VK_RIGHT
- VK_ENTER
- VK_BACK
VCR
0x20
- VK_PLAY
- VK_PAUSE
- VK_STOP
- VK_NEXT
- VK_PREV
- VK_FAST_FWD
- VK_REWIND
- VK_PLAY_PAUSE
SCROLL
0x40
- VK_PAGE_UP
- VK_PAGE_DOWN
INFO
0x80
- VK_INFO
NUMERIC
0x100
- 0..9
ALPHA
0x200
- alphabetic
OTHER
0x400
CE-HTML
- Simple CE-HTML (wp)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"ce-html-1.0-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CE-HTML</title>
</head>
<body onload="document.getElementById('myvid').play(1);">
CE-HTML a/v object:<br/>
<object type="video/mp4" id="myvid" data="myvideo.mp4" width="640" height="360"></object>
</body>
</html>
http://www.francescpinyol.cat/hbbtv.html
Primera versió: / First version: 17.III.2012
Darrera modificació: 24 d'octubre de 2014 / Last update: 24th October 2014
Cap a casa / Back home.