IPTV领域的EPG,多用于电视上网浏览。嵌入式浏览器的性能限制和电视机的显示特性,造成它与PC上的页面有很多不同。同时,EPG作为使用者直接接触的环节,其制作水平对IPTV系统的整体性能表现有着巨大的影响。 我从事嵌入式浏览器研究,也见过很多水平不一的EPG作品,从其中总结了一些IPTV领域EPG制作需要注意的事项,并将逐步增加。
1.CSS属性定义
如果使用CSS属性定义,推荐使用嵌入样式表的方式。即在HTML文档中的BODY标签之前定义<style type="text/css">...</style>。CSS属性定义的另外两种方式都不是很适合在IPTV领域使用: 1)链接外部样式表方式,在网络状况不稳定等情况下,导致整体网页解析速度很慢,除非多个页面都需要引用此CSS文件,否则不建议使用此种方式; 2)内联样式定义方式,导致浏览器在解析HTML文档的过程中,频繁切换CSS解析模块和HTML解析模块,尤其在这种定义较多的情况下,特别影响网页解析速度。
2.背景图片的使用
应避免使用小图片大量平铺的方式来定义背景图片。大量的repeat工作,会使浏览器变得很慢。
3.链接
嵌入式浏览器中,对图片链接,会在图片周围加一个黄框表示焦点位置;对文字链接,会在文字所在区域加黄色底色来表示焦点位置。所以如果链接面积很大,呈现在页面中的效果是很难看的。建议在页面中,限制图片链接的尺寸,对文字链接,也定义背景图片来提示焦点。
4.页面信息量的控制
在新闻页面或其它一些航班查询等页面,容易出现信息量过大的情况。页面总体高度很大,浏览器上下滚动比较费时,用户看起来也很吃力。建议分成多页显示。
5.视频引导页面
当用户点击视频播放按钮后,EPG将开启一个视频引导页面,在该页面中使用onload调用播放器播放视频节目。该引导页面,在没有背景颜色的定义时,会造成视频播放前的白屏现象。建议在该页面的body标签内定义背景颜色为黑色或直接定义为透明。
6.页面中INPUT标签的位置
应避免将INPUT标签放在页面中第一个焦点所在的位置。在嵌入式浏览器中,当遇到INPUT标签,会自动打开输入法窗口。如果页面刚呈现出来就有输入法窗口在那摆起,页面的整体效果当然很难看。
7.避免使用宽度为1px的细线
宽度为1px的细线,在电视上显示会出现抖动。比如图片中的某一部分使用到了金属拉丝效果,同样会产生抖动。
8.颜色的使用
一些颜色的重叠使用,会造成电视上显示的抖动。比如蓝底黄字、蓝底红字。
9.marquee的使用
marquee是字幕滚动效果最简洁的实现方式。但是同一个页面内使用多个marquee标签,会对嵌入式浏览器的刷新机制造成挑战,而出现滚动内容显示闪烁或内容滚动过程中一走一停顿的现象。同时,页面滚动的东西太多,给人杂乱无章的感觉。
10.汉字路径的使用
文件路径中最好避免使用汉字路径,汉字容易造成编码问题。如果浏览器没有实现对汉字路径的支持,会造成某些文件无法正常访问。
11.透明效果的使用
在视频节目播放过程中,使用局部网页提示一些信息的效果很炫。即网页body的背景透明,只在页面某一处有一些页面元素不透明,形成局部的提示信息。
12.body背景色的使用
页面默认的body的背景色为白色,在不同页面切换的过程中,会在一定程度上给用户一种白屏闪烁的不好效果,所以给页面body定义一个和该页面整体颜色相近的背景颜色可以有效缓解这个问题。
13.页面嵌入小窗口视频
页面嵌入小窗口视频,给人不错的感觉。但是不要让视频片段的内容跟随焦点的变换而变换,这样频繁的操作,需要播放器的不停的切换片源和退出,这些都需要一定的时间,所产生的效果反而不佳。
14.代码的精简
任何冗余代码,都要浏览器去解析执行。table的层层嵌套,iframe的层层嵌套等等,都会影响页面的呈现速度。嵌入式设备使用的EPG,应该力求代码简洁规范。
15.页面编码
页面编码混乱,就需要浏览器进行容错,降低了效率,并且很容易出错。在页面内指定编码格式是个不错的习惯。
16.视频播放退出后浏览器返回地址的指定
浏览器处于终端显示层的上一层,播放器处于终端显示层的下一层,当用户调用播放器播放视频,浏览器一层做透明处理,用户即可全屏观看视频节目。当用户退出视频播放,浏览器一层显示出来,并将停留在视频播放前最后一次显示的页面。这个过程中,建议网页作者在页面中指定视频退出后浏览器应该访问的返回地址。这样无论该过程中涉及到多少页面,浏览器都能够按照网页作者的意愿返回到指定页面,而避免了访问错误的页面。