机顶盒开发框架 | 易学教程

ntv.js框架(第三章)

阅读更多关于 ntv.js框架(第三章)

UI设计：机顶盒的输出设备为电视机，电视机的图像重现率比计算机的显示器小，靠近边缘部分的文字与图像可能会在电视机中无法看到，所以在进行应用界面设计时，文字与图像尽量设计在屏幕中间的部位。为了保证页面上的内容可以完全显示在电视机上，需要设置一个安全显示区域。各种型号的电视机，其重现率都是不同的，因此对于安全显示区没有固定的大小，推荐的安全显示区域分辨率为1120×620，即左右各保留80，上下各保留50。 1. 机顶盒浏览器的显示分辨率是1280×720像素。 2. 设计图上下各保留25px，左右各保留40px的距离，不再安全显示距离的范围内摆放元素。 CSS样式：机顶盒支持基础的CSS样式属性和派生选择器，例如:margin, padding, float, position, line-height等，各厂商对于基础样式属性的渲染差异性也不大。不支持的CSS样式列表（这里只列举在PC平台浏览器上常用的CSS属性）： 1. 伪类，例如: ":active", ":focus", ":visited"等。机顶盒上使用的是遥控器，所以鼠标悬停之类的行为无效。 2. min-width/height, max-width/height 设置元素最大/最小宽带/高度的属性，无效。 3. display: inline, list-item, table等，不建议使用

ntv.js框架源码解读

阅读更多关于 ntv.js框架源码解读

1common.js源代码：全局 $ 对象，类似于jQuery框架的命名形式，用于缩短函数名，精简代码。此文件只包含提供全局作用域的常用对象。 var $ = function(selector){}; // Id选择器的函数封装。调用$("#Id")，$("TagName") $.ajax = function(o){}; // aJax功能的函数封装。调用$.ajax({type: POST, url: "...", data: {...}}); 2core.js源代码：全局 ntv 对象，包含2个部分，日志调试类和浏览器平台信息检测类。 var ntv = ntv || {}; // 每个ntv模块文件头都采用此方式来扩展对象。此方式表示如果上下文已存在ntv对象就返回已存在的ntv对象，如果不存在就创建一个空对象。这样的方式也不依赖于将一个对象写入多个文件在页面引用的前后顺序。 ntv.log类，调试模式的日志输出实现及调试模式的开启与关闭。 ntv.log.debug = boolean; // 是否开启调试模式。 ntv.log.console = function(str){}; // 输出日志。调用 ntv.log.console("调试信息"); ntv.log.filter = function(str){}; // 日志信息过滤类。

ntv.js框架(第四章)

阅读更多关于 ntv.js框架(第四章)

在我们编写Javscript时，首先要分清楚2个概念，1是使用W3C标准来处理HTML DOM元素（例如修改标签HTML、文本、状态、形状等），2是使用中间件规范接口来处理音视频等业务功能（例如播放音视频等）。 1. 使用W3C标准来处理HTML DOM元素一般在PC浏览器上我们使用例如jQuery框架来简化W3C标准的接口，但机顶盒内置的浏览器不支持jQuery框架的所有属性方法，ntv.js框架暂时只提供了一些主要的方法实现，暂未能提供jQuery框架的所有属性方法实现。代码示例： W3C标准写法： document.getElementById("div_id").innerHTML = "title"; document.getElementById("img_id").src = "http://ip/images/bg.png"; jQuery框架写法： $("#div_id").html("title"); $("#img_id").attr("src", "http://ip/images/bg.png"); ntv.js框架写法： $("#div_id").innerHTML = "title"; $("#img_id").src = "http://ip/images/bg.png"; 通过代码你可以看出，ntv

ntv.js框架源码解读

阅读更多关于 ntv.js框架源码解读

3key.js源代码： ntv.key类，遥控器键值和系统消息的监听代理接口及遥控器键值的绑定。 ntv.key = function(){}; ntv.key.init = function(){ this.listener_keyevent(); // 键值事件监听，监听遥控器键值动作（物理触发）。 this.listener_systemevent(); // 系统事件监听，监听系统发出的消息（系统虚拟触发）。 this.keycode_set(); // 键值码绑定。 }; 1. 键值事件监听，主要函数说明： ntv.key.keypress() 函数就是监听键值事件的函数。其中对一些键值进行了处理，例如将上/下/左/右确定/刷新/返回等系统控制类（操作类）事件转发到了ntv.navigation类的move()函数进行处理。同样也将所有键值事件透传到了ntv.key.keypress_handle()函数，你可以通过重写 ntv.key.keypress_handle()函数来对键值事件进行处理。 ntv.key.keypress = function(event){ var key_event = event ? event : window.Event; var key_code = key_event.which ? key_event.which :

ntv.js框架(第二章)

阅读更多关于 ntv.js框架(第二章)

源代码目录结构： css // 包含一些标签默认样式重置、常用class、组件所需的css样式 images // 包含了2张透明图，具体用处后续介绍（可选目录） js // 框架核心代码 js/effect // 框架提供的效果插件，例如滚动div、滑动菜单 js文件结构： 1common.js // 公共函数类。例如：将document.getElementById(id)封装为 $("#id")函数，$.ajax()等函数。 2core.js // 核心类。包括调试模式、机顶盒平台信息检测。 3key.js // 机顶盒键值处理类。键值的定义、键值触发和系统消息事件的代理函数类和键值控制的对外接口。 4navigation.js // 机顶盒焦点控制类。页面的焦点控制，例如上下左右的焦点移动、焦点边界检测和焦点控制接口。 5page.js // 页面的处理类。页面的载入、离开、打开新页面、刷新页面及页面URL的一些处理类。 6ngb_h.js // NGB-H规范接口类。含所有NGB-H规范的接口调用。 6ipanel.js // iPanel私有规范接口类。含所有iPanel规范的接口调用。 6shdv.js // SHDV私有规范接口类。含所有SHDV规范的接口调用。 6pc.js // PC平台模拟接口类。PC平台上的浏览器模拟机顶盒的接口调用（PC调试所用）。

ntv.js框架源码解读

阅读更多关于 ntv.js框架源码解读

4navigation.js源代码： ntv.navigation类，处理页面焦点移动和确认、刷新等操作动作。在讲解框架处理焦点移动前，先讲解下机顶盒上焦点移动的工作原理，以便开发者能更好的了解框架采用这种方式的目的和优点。机顶盒浏览器上页面的焦点移动(控制)原理：在PC平台上我们可以通过鼠标来直观的操作页面，而在机顶盒上采用的是遥控器操作，这就面临像页面滚动、页面元素选择等问题。在机顶盒平台上，解决这部分问题需要浏览器与页面通过一些代码来配合处理。下面将详细讲解这部分处理： ‍ 1. 焦点选择 ‍ 常规的处理方法是通过在页面代码上将希望获取焦点的元素包裹在 <a /> 标签内，如文字、图片。浏览器可识别出这些 <a /> 元素，并且通过这些 <a /> 元素在页面的距离位置来响应遥控器的焦点移动操作。代码示例A： <!DOCTYPE html> <html> <head> <title>Example</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="page-view-size" content="1280*720"> <link rel="stylesheet" href="ntv.css"> <style> .list{margin