> Documentation-Index > Implementation Guide
Implementation Guideline
As the very first step we create a Video Player based on CE-HTML that meets the following preconditions:
The sample app prefers the CE-HTML video object because the HTML5 video element is only supported by some modern SmartTVs.
<!DOCTYPE html PUBLIC "-//HbbTV//1.1.1//EN" "http://www.hbbtv.org/dtd/HbbTV-1.1.1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Simple HbbTV App</title>
<meta http-equiv="Content-Type" content="application/vnd.hbbtv.xhtml+xml; charset=utf-8"/>
<script type="text/javascript" crossorigin="anonymous" src="js/main.js"></script>
</head>
<body>
<div class="videoplayer">
<div class="videoplayer__video" id="js-example-player">
<object type="video/mp4" id="myvid" data="https://bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4" width="640" height="480"></object>
</div>
</div>
</body>
</html>
Extract from the index.html :: Video object and Player API (main.js)
window.onload = function() {
// The CE-HTML VideoObject interface covers methods and properties to load, play and monitor a video.
// Therewith we have it already, that is the most simple Player API.
window.playerAPI = document.getElementById('myvid');
// Detects whether we run in a HbbTV channel and registers our sample app.
initHBBTV = function () {
var app = document.getElementById('oipfAppMan');
if (app && app.getOwnerApplication) app = app.getOwnerApplication(document);
if (app && app.show) app.show(); // needed to show the HbbTV app on screen
if (app && app.activate) app.activate();
if (app && app.privateData) app.privateData.keyset.setValue(0x33F); // color + nav + vcr + numeric + alpha
};
initHBBTV();
}
Extract from the main.js :: Simple Player API
Next: Installing the smartclientcore
Top: Implementation Guide Overview