IPTV内嵌操作系统和软件的特性上的前端开发

重庆帝一网络建设专家 http://www.diy88.com.cn

IPTV，全名网络协议电视（Internet Protocol Television），是宽带电视（Broadband TV）的一种。IPTV是用宽带网 络作为介质传送电视信息的一种系统，将广播节目透过宽带上的网际协议向订户传递数码电视服务。由于需要使用互联网，IPTV服务供应商经常会一并提供连接互联网及IP电话等相关服务，也可称为“三重服务”或“三合一服务”（Triple Play）。IPTV是数码电视的一种，因此普通电视机需要配合相应的机顶盒接收频道，也因此供应商通常会向客户同时提供自选影像服务。

上文中所提及的“三重服务”或“三合一服务”，其实就是我们通常所说的“三网融合”，是“物联网”发展中很重要的一步。

好了，基本概念普及到这里，需要了解更多，可以移步百度百科或维基百科等各种百科来查看相关介绍。

你应该已经清楚，IPTV最重要的两个部件是“机顶盒”与“电视机”，机顶盒负责处理用户与IPTV的交互事件、解析网页、处理IP数据和视频流以及视频的解码等功能，相当于PC中的主机；而电视机最主要的作用是显示视频图像，相当于显示器。我们要做的网页，是要经过机顶盒中的浏览器进行解析处理，然后输出给显示器来显示的，所以机顶盒是决定了我们开发过程的关键因素。

其实，机顶盒的软件技术架构，与移动设备有很多相似的地方，因为都具有相似的特性：迷你、便携、特定功能，因此注定了其内嵌的操作系统和软件。在设计和开发之前，我们务必要搞清楚，这些内嵌的操作系统和软件的特性，摸清楚这些，我们才可以有针对性地进行最完整设计和开发。下面是一个相对理想化的前端开发步骤模型：

基本UA探测+研究技术规范白皮书（关键）

指导UI设计

前端开发

兼容性测试+调试

我们可以发现，这个步骤与我们“Mobile WEB前端研发”步骤非常相似。其实，对于一个未知的跨平台的设备领域，我们都可以采取这个步骤来做开发，它可以保证最终开发的结果是最具针对性和兼容性的。因此，第一步的研究阶段是最关键的。

基本UA探测

回到正题，我们开始第一步，进行基本的UA探测（很多时候，技术规范文档中写的东西并没有我们直接亲自探测来的靠谱和实在）。对于UA探测方法和源文件，网上有很多，在这里不赘述。下面是探测结果：

UA串：

Mozilla/5.0 (Unknown; U; Linux mips, zh-CN) WebKit/525.1 + (KHTML, like Gecho, demo/525.1)..

Accept MIME：

application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,’/';q=0.5

通过上面一些信息，我们可以总结出以下基本特性：

操作系统：Linux/mips

浏览器：基于WebKit/525.1内核

支持的MIME类型：application/xml,application/xhtml+xml,text/html

通过这个浏览器的内核版本号，经过简单的查找，我们可以知道一些辅助信息：该浏览器特性类似于“Safari 3.0”，疑似Linux下的Midori浏览器。再通过这些，我们可以得知这个浏览器都支持或不支持什么前端特性。当然，在此之前，我们要先看一下技术规范文档是否已经说明清楚这些点，避免重复劳动。

研究技术规范白皮书

索取并仔细查看这个设备的技术规范文档（这次所做的IPTV项目，由于商业保密性，具体型号等信息这里无法给出），下面是它的浏览器所支持的一些基本规范：

W3C：

HTML：HTML 4.01/XHTML 1.1/XML 1.1/XSLT 1.0/WML 1.3

DOM：DOM Level 1/DOM Level 2(大部分)/DOM Level 3（小部分）

CSS：CSS1/CSS2（大部分）/CSS3（小部分）

Script：ECMAScript-262 3rd/javascript 1.3/javascript 1.5

协议：HTTP 1.1/FTP/SSL 3.0/TLS 1.0…

媒体：GIF/JPEG/BMP/PNG/MP3/WMA/MIDI/MPG4/AVI/WMV/不支持：Flash

字符集：Unicode(UTF-16,UTF-8)/ASCII,ISO/GB

TV显示：TV resolutions/宽屏16:9,常规4:3/TV优化字体/隔行抗闪烁过滤控制器

其它：远程控制/历史记录/Cookies/Cache/不支持：指针浏览、收藏夹、自动完成功能

OK，好在这个规范文档整理得非常全面，对于前端特性的支持方面，我们也不必大费周章地去Google了。根据W3C支持列表中，我们可以比较清晰地看出它支持的范围，至于具体支持到哪种程度，可以在DEMO开发过程中进行摸索。对于一些不支持的特性，需要在设计开发过程中特别小心地避免。例如不支持Flash、不支持指针浏览等特性。

下面是这个设备的特性：

不支持字体设置

支持多分辨率：720×576/1280×720(Current)/1920×1080

安全边框：页面需要预留50px安全距离。

前两点很好理解。关于第三点“安全边框”，这个是做IPTV项目一个很有特色的值得注意的地方。什么是“安全边框”呢？

以720*576大小的网页内容为例，即576*462范围的内容在任何电视上均可见，576*462以外648*520以内的边缘内容在大部分电视上均可见，648*520以外720*576以内的边缘内容在低分辨率电视上不可见，因此，为了保证网页在大部分电视上的可见性，需将重要的数据信息放在576*462以内，576*462以外648*520以内的范围放入标识性的图片，648*520以外720*576以内的范围放入修饰性的图片或背景色：

Content < 576×462 任何设备可见

576×462 < Content < 648×520 大部分设备可见

648×520 < Content < 720×576 低分辨率设备不可见

因此，一般情况下，页面四周需要预留50px安全距离。

另外，在实际测试中，发现该系统内存较小，浏览较大网页时很容易发生崩溃现象。

知道了以上所有这些特性和限制，我们心中有了一个大概的设计轮廓。有很多设计时就需要注意的点，我们需要马上告诉设计师们。

指导UI设计

我们需要告诉他们什么？经过之前的这些记录，我们总结出以下这些需要注意的要点：

考虑到电视的使用场景，为了增加易用性，网页中的元素要设计成大元素，并且交互效果需要非常明显。

目前推荐的分辨率1280×720，四个边要留出50-60像素的安全边框。

首要考虑宽度自适应布局，以尽可能适应更多的分辨率。

不支持自定义字体，只提供一种固定字体（类似微软雅黑）。

根据设备的操作特性（例如焦点式浏览方式），增加一些易用性细节设计。

支持CSS3和javascript，可以增加更多视觉和交互设计效果。

实测内存较小，稳定性差。因此需要注意控制页面的大小，不要使用大图片。

前端开发+兼容性测试

好了，终于到了我们大显身手的时候！等等，在开发之前，除了给UI设计的那些点需要注意以外，还有以下这些点是要先考虑的：

需要设置body背景色为黑色#000，以避免大分辨率电视上四周的空白。

因为内存较小和稳定性差的原因，我们不能使用CSS Sprites。

可以定义一个“微软雅黑”供PC上测试效果，不需要设置其它自定义字体。测试完可以删除这个字体定义。

因为焦点式的浏览方式，我们需要明显的焦点反馈。在超链接上使用:focus伪类，并设置高亮背景色。不需要:hover这个东东。

可使用tab键在PC中模拟焦点测试。

好了，我们开始前端开发并随时进行调试。在调试过程中，我发现了它所支持的一些CSS3特性：

旋转 -webkit-transform

圆角 -webkit-border-radius

文本阴影 -webkit-text-shadow

渐变 -webkit-gradient

盒阴影 -webkit-box-shadow

其余的特性，由于时间关系，没有再一一测试。在这整个的前端开发和测试过程中，我们可以随时将一些有意思的灵感和小技巧通过渐进增强等方式加入在页面中。例如，页面刷新后，将焦点设置在搜索框内；在悬停时，加入适当旋转效果，会使用户在使用的时候，感觉更有乐趣（当然了，这些小trick需要跟设计师沟通后才可以最终决定是否采用）

值得一提的是，文本阴影在设置之后，由于电视屏幕刷新率、分辨率等原因，发现实际效果并不像PC中显示的那样理想，反而会给人感觉很模糊很脏的效果，所以实际使用的时候去除了。

OK，在经过一系列的折腾和调试之后，我们的页面搞定了。可以看到，它在我们的电视机上显示效果还是挺不错的：）

（是的，画面中的那是一台电视机，不是电脑显示器）

好了，以上就是这次IPTV上的前端开发的一些总结分享。需要你注意的是，文中所提到的设备特性等信息，只适用于该项目。现在支持IPTV的厂商已经很多了，不同的厂商可能会有自己不同的技术规范，所以基本上不会是通用的。但是整个跨平台开发过程还有一些设备共同点和行业规范（例如50px安全边距）这些通用性是相对较强的。