专利名称：网络电视嵌入式浏览器下的页面动感效果的实现方法
技术领域：
本发明涉及一种本发明涉及一种IPTV中基于嵌入式浏览器的EPG (Electronic program guide,电子节目指南)页面的展示才支术，具体i兌，涉 及一种网络电视嵌入式浏览器下的页面动感效果的实现方法。
背景技术：
随着网络电视(IPTV)走进千家万户，使更多的人体验到宽带带来的 乐趣，使人们的生活质量得到提高。IPTV系统中音频视频解码技术、流媒 体传送技术、宽带接入网络技术、IP机顶盒技术都得到了快速的发展。
而由于受制于IPTV终端展示中所使用的嵌入式浏览器的一些先天缺 陷，例如，浏览器支持的WEB特性相对较弱， 一般只是支持有限的超文本 置标语言(HTML, Hyper Text Markup Language )和功能非常有限的脚本语 言，且页面之间的迁移关系往往不同于普通PC上的有鼠标配合的浏览器的 展示，从而导致了直接面对客户的IPTV的用户界面展示不能像普通PC机 上的浏览器那样展示具有动画(FLASH)特效的页面，从而使页面的美观性 大打折扣，并且只能实现简单的页面切换。展现给终端用户的EPG界面如果能够美观、动感并且多样化，将会大 大提高用户视觉上的沖击和愉悦性，而 一个枯燥单调的页面则会大大降低用 户页面操作的兴趣，甚至可能影响用户对IPTV的兴趣
发明内容
本发明所解决的技术问题是提供一种网络电视嵌入式浏览器下的页面 动感效果的实现方法，能够使使EPG页面展示动感效果。技术方案如下
一种网络电视嵌入式浏览器下的页面动感效果的实现方法，步骤包括(1) 在模版中定义用户动作或者页面位置的触发条件；(2) 当焦点在页面上移动时，通过嵌入式浏览器所提供的脚本功能捕 捉所述焦点的用户动作或者页面位置；(3) 当所述用户动作满足所述触发条件时，更改页面链接的图片；或 者，当所述焦点的页面位置满足所述触发条件时，进行翻页操作。进一步，步骤(l)中，在所述模版的JS函数中定义所述触发条件。进一步，步骤(3)中，在JS函数中，通过获取用户触发的页面元素的 编号来获取所述页面元素的实体，再通过修改所述实体的属性来实时更改页 面链接的图片。进一步，步骤(l)中，网络电视的模版中，界面链接响应的所述用户 动作的动作状态包括获取焦点、失去焦点、点击状态，在页面中定义动作状 态触发的JS函数，在所述JS函数中判断用户的触发动作。进一步，步骤(3)中，判断所述动作状态，当所述动作状态为获取焦 点时，更换为获取焦点时的图片；当所述动作状态为失去焦点时，更换为失 去焦点时的图片；当所述动作状态为点击状态时，更换为点击焦点时的图片。进一步，步骤(1)中，在模版的JS函数中，自定义JS函数，取代默 认的机顶盒按键处理。进一步，步骤(2)中，当焦点移动时，调用所述自定义的JS函数， 在所述自定义JS函数中，调用所述机顶盒所提供的按键截获接口截获遥控 器的按键操作，用所述自定义JS函数取代默认的机顶盒按键处理。进一步，步骤(3)中，在JS函数中，判断所述焦点的位置是否在表格 的边沿元素上；如果是则强行触发页面的翻页操作，否则，调用默认的机顶 盒按键处理。本发明利用IPTV嵌入式浏览器实现了页面动感效果，当用户浏览和操 作EPG页面时，使EPG页面能够展示给用户动感效果。本发明通过嵌入式 浏览器所提供的有限的脚本功能捕捉用户的动作，根据不同的动作，更换不 同的按钮图片来实现简单的FLASH特效，很好地开发出美观、动感、交互 性强的页面。通过本发明技术方案，可以实现EPG页面展示时的FLASH动感效果 和扩展用户对页面的特殊操作方式，从而大大提高了页面的可观赏性和可扩 展性，打破了 EPG页面固有的展示方式。
图1是EPG模版框架示意图；图2、通过图片更迭实现FLASH效果的流程图；图3、通过捕捉焦点位置实现页面自动跳转的流程图；图4、利用按键截获技术实现首页迷你菜单用例流程图。
具体实施方式
IPTV的模版为运行于web服务器上的web应用程序，是由Java服务 器页面(JSP , Java Server Page)、图片文件、模版配置文件所组成的。客 户端运行于嵌入式的浏览器中。模版客户端的JSP展示与一般PC机上的网 页展示有很大的区别，模版一般通过机顶盒展示于电视机或类似的播放媒介 上，界面展示直观、清晰、简洁、大方，用户的操作是通过机顶盒遥控器来 控制的，所以页面展示元素要求比较大。下面参照附图，对本发明的优选实施例做详细描述。参照图l所示，对EPG模版框架做详细描述。其中机顶盒用于展示IPTV的JSP页面，模版是为IPTV用户提供交互 界面的web应用程序，EPG后台提供模版访问数据库的后台接口， EPG后 台数据库为运行在web服务器上的本地数据库，用于存放IPTV业务的部分 数据。CDN为IPTV的内容分发网络，负责IPTV播放内容及部分业务数据 的管理。接口机负责IPTV系统与其他系统的对接。Portal为展示和操作IPTV 业务数据的web服务器。参照图2所示，对通过图片更迭实现FLASH效果做详细描述。
FLASH的动态效果的基本原理也是通过大量图片的更迭来实现的，本 实施例中，通过捕捉用户焦点动作进行图片更迭和图片更换，实现基本 FLASH特效。步骤S201,在模版中定义用户动作的触发条件。IPTV的模版中，界面链接响应的用户动作一般有三种操作类型(动作 状态)，包括获取焦点、失去焦点、点击状态。在页面中定义这三种状态 触发的JS函数(Java Script函数)，在该JS函数中判断用户的触发动作。步骤S202,用户在页面上移动焦点。步骤S203,通过嵌入式浏览器所提供的有限的脚本功能捕捉用户焦点 的动作(OnFocus、 OnBlur)。步骤S204，判断用户动作的操作类型，当用户动作满足触发条件时， 执行用户动作。获取用户触发的页面元素id,通常为img标签的id，通过该id获耳又该 元素的实体，再通过修改实体的属性(通常为img标签的src属性)则可以 实时更改页面链接的图片，更改的效果可以实时展示在界面上，从而可以起 到FLASH效果。id是页面元素的编号，在一个页面中是唯一的。当用户动作的操作类型为获取焦点时，执行步骤S205;当用户动作的 操作类型为失去焦点时，执行步骤S206;当用户动作的操作类型为点击状 态时，执行步骤S207。步骤S205，当用户动作的操作类型为获取焦点时，更换为获取焦点时 的图片。步骤S206，当用户动作的操作类型为失去焦点时，更换为失去焦点时 的图片。步骤S207,当用户动作的操作类型为点击状态时，更换为点击焦点时 的图片。参照图3所示，对通过捕捉焦点位置实现页面自动跳转的过程做详细描述。本实施例中，利用嵌入式浏览器所提供的脚本捕捉用户焦点的位置来实
现页面展示内容的自动翻页。步骤S301,截获用户的上、下、左、右键操作。在模版的JS函数中，调用机顶盒所提供的按键截获接口截获用户对遥 控器的上、下、左、右键操作(该功能应用于EPG后台，获取的内容通过 TABLE (HTML语言中的表格)形式展示)，当用户移动焦点时则会调用 页面自定义的JS函数。步骤S302，用户自定义JS函数取代默认的机顶盒按键处理。步骤S303,获取用户焦点当前所在的页面位置。通常展示内容的翻页必须手动触发"上一页"、"下一页"按钮来实现， 而本实施例中，通过捕捉用户目前焦点的位置实现翻页。当焦点位于显示内 容表格的边缘区域(最上面、最下面、最左面、最右面)时，如果此时用户 继续将焦点向显示区域外移动时，则自动触发翻页操作。步骤S304,判断用户的焦点移动是否要超出内容键时区域。如果超出，执行步骤S305;否则，执行步骤S306。步骤S305,触发页面的自动翻页。在截获用户焦点移动时指定的处理函数中，判断用户当前焦点的位置是 否在TABLE的最上面或者最下面元素上。如果是且此时用户是触发向上或 者向下焦点移动，则可以强行触发页面的翻页梯:作。。步骤S306,调用默认的机顶盒按键处理。参照图4所示，用户按键截获技术的应用做详细描述。按键截获技术是利用嵌入式浏览器所提供的按键截获接口捕捉用户所 按的遥控器按钮信息，实现页面的对用户触发按键按钮的处理。在页面自动 翻页的时候已经用到了该技术，还可以实现很多其他的特殊的页面操作方 式，下面举一个实例来i!L明。因为机顶盒对遥控器的每个按钮都有相应的默认操作。为了实现页面的 特殊操作效果，可以通过利用嵌入式浏览器所提供的按键截获接口来替换 EPG页面的相应的默认的按钮响应函数，从而转到页面自定义的JS函数， 在自定义的JS函数中可以根据具体的需求实现不同的功能，从而可以打破 常规的页面响应按钮的操作方式。机顶盒默认的菜单键的处理是返回模版的首页面(一级菜单的展示)， 从而刷新原来页面的内容，而现在可以通过按键截获技术改变这种页面操作 方式。步骤S401,首先开发一个迷你首页菜单，实现了首页的一级菜单功能， 可以在每个模版页面的边缘区域展示。制作迷你首页菜单代替首页面，用于展示在该模版每个JSP页面上，默 认处于非激活状态。步骤S402,截获用户菜单键操作(在每个JSP页面上截获菜单键)， 转向自定义用户菜单键的JS函数处理。步骤S403,用户触发菜单键。步骤S404,判断此时的迷你菜单状态。当处于非激活状态，执行步骤S405;当处于激活状态，执行步骤S407。步骤S405,当处于非激活状态，激活迷你菜单，将焦点移动到迷你菜 单上。步骤S406,利用按键截获技术，使焦点只能在迷你菜单上移动。步骤S407，当处于激活状态，注销迷你菜单，隐藏迷你菜单链接。当用户按下菜单键时，界面导入迷你菜单首页，在页面的边缘区域展示， 并不更改页面其他内容的展示，这样就可以改变传统的模版页面的展示方 式，增加了用户的体验性和模版页面开发的可扩展性。
权利要求
1、一种网络电视嵌入式浏览器下的页面动感效果的实现方法，步骤包括(1)在模版中定义用户动作或者页面位置的触发条件；(2)当焦点在页面上移动时，通过嵌入式浏览器所提供的脚本功能捕捉所述焦点的用户动作或者页面位置；(3)当所述用户动作满足所述触发条件时，更改页面链接的图片；或者，当所述焦点的页面位置满足所述触发条件时，进行翻页操作。
2、 根据权利要求1所述的网络电视嵌入式浏览器下的页面动感效果的 实现方法，其特征在于，步骤(l)中，在所述模版的JS函数中定义所述触 发条件。
3、 根据权利要求2所述的网络电视嵌入式浏览器下的页面动感效果的 实现方法，其特征在于，步骤(3)中，在JS函数中，通过获取用户触发的 页面元素的编号来获取所述页面元素的实体，再通过修改所述实体的属性来 实时更改页面《连《接的图片。
4、 根据权利要求1所述的网络电视嵌入式浏览器下的页面动感效果的 实现方法，其特征在于，步骤(l)中，网络电视的模版中，界面链接响应 的所述用户动作的动作状态包括获取焦点、失去焦点、点击状态，在页面中 定义动作状态触发的JS函数，在所述JS函数中判断用户的触发动作。
5、 根据权利要求4所述的网络电视嵌入式浏览器下的页面动感效果的 实现方法，其特征在于，步骤(3)中，判断所述动作状态，当所述动作状 态为获取焦点时，更换为获取焦点时的图片；当所述动作状态为失去焦点时， 更换为失去焦点时的图片；当所述动作状态为点击状态时，更换为点击焦点 时的图片。
6、 根据权利要求1所述的网络电视嵌入式浏览器下的页面动感效果的实现方法，其特征在于，步骤(l)中，在模版的JS函数中，自定义JS函 数，取代默认的机顶盒按键处理。
7、 根据权利要求6所述的网络电视嵌入式浏览器下的页面动感效果的 实现方法，其特征在于，步骤(2)中，当焦点移动时，调用所述自定义的 JS函数，在所述自定义JS函数中，调用所述机顶盒所提供的按键截获接口 截获遥控器的按键操作，用所述自定义JS函数取代默认的机顶盒按键处理。
8、 根据权利要求7所述的网络电视嵌入式浏览器下的页面动感效果的 实现方法，其特征在于，步骤(3)中，在JS函数中，判断所述焦点的位置 是否在表格的边沿元素上；如果是则强行触发页面的翻页操作，否则，调用 默认的机顶盒按键处理。
全文摘要
本发明公开了一种网络电视嵌入式浏览器下的页面动感效果的实现方法，步骤包括在模版中定义用户动作或者页面位置的触发条件；当焦点在页面上移动时，通过嵌入式浏览器所提供的脚本功能捕捉所述焦点的用户动作或者页面位置；当所述用户动作满足所述触发条件时，更改页面链接的图片；或者，当所述焦点的页面位置满足所述触发条件时，进行翻页操作。本发明利用IPTV嵌入式浏览器实现了页面动感效果，当用户浏览和操作EPG页面时，使EPG页面能够展示给用户动感效果。
文档编号H04N5/00GK101119476SQ200710145888
公开日2008年2月6日 申请日期2007年9月4日 优先权日2007年9月4日
发明者任建华, 刘学安, 朱兴昌 申请人:中兴通讯股份有限公司