CN106294388B - 一种页面展示的方法及终端 - Google Patents

Abstract

一种页面展示的方法及终端，该方法包括：若该页面中包含视频文件，则获取该视频文件的播放图标的动画数据；按照该播放图标的动画数据在所述页面进行渲染，使得所述播放图标能够在该页面上动画显示，通过采用动画显示播放图标的方式，使得能够有效引起用户的注意，用户能够快速查看到视频文件，改善用户体验。

Description

一种页面展示的方法及终端

技术领域

本发明涉及通信技术领域，尤其涉及一种页面展示的方法及终端。

背景技术

网页是构成网站的基本元素，是承载各种网站应用的平台，文字、图片、视频、音频等等是构成网页的页面的元素。

目前，页面在进行展示时，该页面上展示的元素比较多，用户难以快速查看到想要查看的内容，特别是在页面上有视频时，用户容易忽略该视频或者花费较长的时间寻找，页面显示无重点，导致用户体验差。

发明内容

有鉴于此，本发明提供一种页面展示的方法及终端，用于现有技术中页面在展示时没有重点，导致用户体验差的问题。

本发明实施例提供的一种页面展示的方法，包括：

若页面中包含视频文件，则获取所述视频文件的播放图标的动画数据；

按照所述播放图标的动画数据在所述页面进行渲染，使得所述播放图标在所述页面上能够动画显示。

本发明实施例提供的终端，包括：

获取模块，用于若页面中包含视频文件，则获取所述视频文件的播放图标的动画数据；

渲染模块，用于按照所述播放图标的动画数据在所述页面进行渲染，使得所述播放图标在所述页面上能够动画显示。

从以上技术方案可以看出，本发明实施例具有以下优点：

终端在加载页面时，若该页面中包含视频文件，则获取该视频文件的播放图标的动画数据；按照该播放图标的动画数据在所述页面进行渲染，使得所述播放图标能够在该页面上动画显示，通过采用动画显示播放图标的方式，使得能够有效引起用户的注意，用户能够快速查看到视频文件，改善用户体验。

为让本发明的上述和其他目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附图式，作详细说明如下。

附图说明

图1为本发明实施例中终端的结构的一个示意图；

图2为本发明实施例中页面展示的方法的实施例的一个示意图；

图3为本发明实施例中页面展示的方法的实施例的一个示意图；

图4a为本发明实施例中播放图标的一个示意图；

图4b为本发明实施例中播放图标的另一示意图；

图4c为本发明实施例中播放图标的另一示意图；

图4d为本发明实施例中播放图标的另一示意图；

图5为本发明实施例中终端的结构的一个示意图；

图6为本发明实施例中终端的结构的另一示意图。

具体实施方式

为更进一步阐述本发明为实现预定发明目的所采取的技术手段及功效，以下结合附图及较佳实施例，对依据本发明的具体实施方式、结构、特征及其功效，详细说明如后。

本发明实施例提供一种页面展示的方法，终端在加载页面时，从服务器获取到该页面的数据包，若该页面中包含视频文件，则从该数据包中获取该视频文件的播放图标的动画数据，按照该播放图标的动画数据在页面进行渲染，使得播放图标在页面上能够动画显示，通过动画显示视频文件的播放图标的方式使得该播放图标能够有效的吸引用户的注意，避免用户忽略该视频文件或者查看不到该视频文件，能够有效改善用户体验。

在本发明实施例中，页面展示方式是由终端执行的，具体是在终端的浏览器或者其他应用程序上执行的，此处不做限定。为了更好的理解本发明实施例中执行页面展示的方法的终端，请参阅图1，为发明实施例中终端的结构的实施例，如图1所示，终端包括存储器102、存储控制器104，一个或多个(图中仅示出一个)处理器106、外设接口108、射频模块110、定位模块112、摄像模块114、音频模块116、触控屏幕118以及按键模块120。这些组件通过一条或多条通讯总线/信号线122相互通讯。

可以理解，图1所示的结构仅为示意，终端还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。图1中所示的各组件可以采用硬件、软件或其组合实现。

存储器102可用于存储软件程序以及模块，如本发明实施例中的在终端内字符输入方法及装置对应的程序指令/模块，处理器106通过运行存储在存储器102内的软件程序以及模块，从而执行各种功能应用以及数据处理，即实现上述的页面展示的方法。

存储器102可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器102可进一步包括相对于处理器106远程设置的存储器，这些远程存储器可以通过网络连接至终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。处理器106以及其他可能的组件对存储器102的访问可在存储控制器104的控制下进行。

外设接口108将各种输入/输入装置耦合至处理器106以及存储器102。处理器106运行存储器102内的各种软件、指令以执行终端的各种功能以及进行数据处理。

在一些实施例中，外设接口108，处理器106以及存储控制器104可以在单个芯片中实现。在其他一些实例中，他们可以分别由独立的芯片实现。

射频模块110用于接收以及发送电磁波，实现电磁波与电信号的相互转换，从而与通讯网络或者其他设备进行通讯。射频模块110可包括各种现有的用于执行这些功能的电路元件，例如，天线、射频收发器、数字信号处理器、加密/解密芯片、用户身份模块(SIM)卡、存储器等等。射频模块110可与各种网络如互联网、企业内部网、无线网络进行通讯或者通过无线网络与其他设备进行通讯。上述的无线网络可包括蜂窝式电话网、无线局域网或者城域网。上述的无线网络可以使用各种通信标准、协议及技术，包括但并不限于全球移动通信系统(G lobal System for Mobile Communication，GSM)、增强型移动通信技术(Enhanced Data GSM Environment，EDGE)，宽带码分多址技术(wideband code divisionmultiple access，W－CDMA)，码分多址技术(Code division access，CDMA)、时分多址技术(timedivisionmultipleaccess，TDMA)，蓝牙，无线保真技术(Wireless，Fidelity，WiFi)(如美国电气和电子工程师协会标准IEEE 802.11a，IEEE 802.11b，IEEE 802.11g和/或IEEE 802.11n)、网络电话(Voiceoverinternet protocal，VoIP)、全球微波互联接入(Worldwide Interoperability for Microwave Access，Wi－Max)、其他用于邮件、即时通讯及短消息的协议，以及任何其他合适的通讯协议，甚至可包括那些当前仍未被开发出来的协议。

定位模块112用于获取终端的当前位置。定位模块112的实例包括但不限于全球卫星定位系统(GPS)、基于无线局域网或者移动通信网的定位技术。

摄像模块114用于拍摄照片或者视频。拍摄的照片或者视频可以存储至存储器102内，并可通过射频模块110发送。

音频模块116向用户提供音频接口，其可包括一个或多个麦克风、一个或者多个扬声器以及音频电路。音频电路从外设接口108处接收声音数据，将声音数据转换为电信息，将电信息传输至扬声器。扬声器将电信息转换为人耳能听到的声波。音频电路还从麦克风处接收电信息，将电信号转换为声音数据，并将声音数据传输至外设接口108中以进行进一步的处理。音频数据可以从存储器102处或者通过射频模块110获取。此外，音频数据也可以存储至存储器102中或者通过射频模块110进行发送。在一些实例中，音频模块116还可包括一个耳机播孔，用于向耳机或者其他设备提供音频接口。

触控屏幕118在终端与用户之间同时提供一个输出及输入界面。具体地，触控屏幕118向用户显示视频输出，这些视频输出的内容可包括文字、图形、视频、及其任意组合。一些输出结果是对应于一些用户界面对象。触控屏幕118还接收用户的输入，例如用户的点击、滑动等手势操作，以便用户界面对象对这些用户的输入做出响应。检测用户输入的技术可以是基于电阻式、电容式或者其他任意可能的触控检测技术。触控屏幕118显示单元的具体实例包括但并不限于液晶显示器或发光聚合物显示器。

按键模块120同样提供用户向终端进行输入的接口，用户可以通过按下不同的按键以使终端执行不同的功能。

请参阅图2，为本发明实施例中一种页面展示的方法的实施例，包括：

201、若页面中包含视频文件，则获取视频文件的播放图标的动画数据；

在本发明实施例中，终端在加载页面时，需要先从服务器侧获取该页面的数据包，并且按照该数据包中的数据对页面进行渲染，并在终端的显示界面上显示该页面。

其中，若页面中包含视频文件，则终端在对页面进行渲染时，将获取视频文件的播放图标的动画数据。其中，若页面中包含视频文件，是指页面的数据包中包含视频文件的相关的播放数据，例如，包含视频文件的统一资源定位符(URL，Uniform Resoure Locator)地址、播放视频文件的播放区域的大小、及该视频文件的播放区域在页面中的位置，播放视频文件时渲染该播放区域的数据、播放图标的动画数据等等。

202、按照播放图标的动画数据在页面进行渲染，使得播放图标在页面上能够动画显示。

在本发明实施例中，终端将按照播放图标的动画数据在页面进行渲染，使得播放图标在页面上能够动画显示。

在本发明实施例中，终端在加载页面时，若该页面中包含视频文件，则获取该视频文件的播放图标的动画数据；按照该播放图标的动画数据在所述页面进行渲染，使得所述播放图标能够在该页面上动画显示，通过采用动画显示播放图标的方式，使得能够有效引起用户的注意，用户能够快速查看到视频文件，改善用户体验。

为了更好的理解本发明实施例中的页面展示方法，请参阅图3，为本发明实施例中页面展示的方法的实施例，包括：

301、从服务器获取页面的数据包；

在本发明实施例中，终端上的浏览器或者其他的应用程序在加载页面时，需要向服务器发送页面数据获取请求，该请求中包含该页面的网页地址，服务器接收到该页面数据获取请求之后，将按照该页面的网页地址获取到该网页的数据包，并该将数据包返回给终端。

其中，页面的数据包中包含显示该页面的所有数据，例如图片数据、文字数据、音频数据、视频数据、超链接等等其中的至少一个。

302、判断页面的数据包中是否包含视频文件的播放数据；

在本发明实施例中，终端在获取到页面的数据包之后，可按照该数据包中的数据对页面进行渲染并显示，其中，终端还可判断页面的数据包中是否包含视频文件的播放数据。

303、若页面中包含视频文件，则从视频文件的播放数据中获取播放图标的动画数据；

在本发明实施例中，若页面的数据包中包含视频文件的播放数据，则说明该页面中有视频播放的区域，可进行视频播放。其中，视频文件的播放数据包括但不限于视频文件的URL地址、播放视频文件的播放区域的大小、及该视频文件的播放区域在页面中的位置，播放视频文件时渲染该播放区域的数据、播放图标的动画数据等等。

304、在页面的视频文件的播放区域内插入浮层，将播放图标添加到浮层中；

在本发明实施例中，终端在获取到播放图标的动画数据之后，将确定页面的视频文件的播放区域，并在该播放区域内插入浮层，其中，可以再整个播放区域内插入浮层，也可以仅仅在预先设置的播放图标的位置插入与播放图标相同大小或者大于该播放图标一定比例的浮层。且在插入浮层之后，将播放图标添加到该浮层中。

其中，该浮层为DIV浮层。

305、在浮层中按照动画数据展示播放图标。

在本发明实施例中，终端在浮层中添加播放图标之后，在该浮层中按照播放图标的动画数据展示该播放图标，使得该播放图标能够采用动画形式展示，有效吸引用户的注意。

在本发明实施例中，动画数据包含动画属性、动画的持续时间，动画属性包括：缩放、旋转、平移、透明度渐变、亮度渐变，其中，缩放是指播放图标按照预先设置的频率进行缩小及放大，旋转是指播放图标按照一定的速度进行旋转，平移是指播放图标在预先设置的区域范围内移动，透明度渐变是指播放图标的透明度按照预先设置的变化规则进行改变以产生渐变的效果、亮度渐变是指整个播放图标或者部分播放图标的亮度按照预先设置的速度发生变化。其中，动画的持续时间可以根据需要设置，例如可以设置一直有动画效果，或者持续时间为30秒。

需要说明的是，本发明实施例中主要描述的是页面中的播放图标的展示方法，页面上的其他内容，例如文字、图片或者音频等等是按照现有技术中的技术方案进行展示的，此处不做限定。

在本发明实施例中，终端在通过动画方式展示播放图标之后，若检测到用户点击该动画展示的播放图标，则加载视频文件，进行视频文件的播放。

在本发明实施例中，终端在显示页面时，需要从服务器获取该页面的数据包，并利用页面的数据包显示页面，其中，终端可判断页面的数据包中是否包含视频文件的播放数据，若页面中包含视频文件，则终端从视频文件的播放数据中获取播放图标的动画数据，确定视频文件在页面上的播放区域，并在该区域内插入浮层，将播放图标添加到该浮层中，在该浮层中按照动画数据展示播放图标，通过在页面插入浮层并在浮层中放置播放图标并按照播放图标的动画数据显示播放图标，使得播放图标能够动画显示，能够有效吸引用户的注意，避免用户忽略该视频文件或者避免用户不易查看到该视频文件，有效改善用户体验。

需要说明的是，在本发明实施例中，是以对播放图标进行动画展示的方式表明在页面上吸引用户注意力的方式，在实际应用中，还可以将动画展示的方式用在其他的元素上，例如图片，文字等等，此处不做限定。可以理解的，在显示界面上以动画方式展示元素的方案都属于本发明保护的范围。

为了更好的应用本发明实施例中的技术方案，下面将介绍一个具体的应用场景，请参阅图4a至图4d，图4a至图4b均为播放图标的示意图，且图4a至图4b中播放图标的亮度是不一样的，播放图标可以按照图4a至图4d的顺序按照一定的时间间隔动画显示已达到亮度渐变的效果，以实现动画显示。

请参阅图5，为本发明实施例中终端的结构的实施例，包括：

获取模块501，用于若页面中包含视频文件，则获取所述视频文件的播放图标的动画数据；

渲染模块502，用于按照所述播放图标的动画数据在所述页面进行渲染，使得所述播放图标在所述页面上能够动画显示。

在本发明实施例中，终端在加载页面时，若页面中包含视频文件，则获取模块501获取视频文件的播放图标的动画数据，并由渲染模块502按照播放图标的动画数据在页面进行渲染，使得播放图标在页面上能够动画显示。

在本发明实施例中，终端在加载页面时，若该页面中包含视频文件，则获取该视频文件的播放图标的动画数据；按照该播放图标的动画数据在所述页面进行渲染，使得所述播放图标能够在该页面上动画显示，通过采用动画显示播放图标的方式，使得能够有效引起用户的注意，用户能够快速查看到视频文件，改善用户体验。

为了更好的理解本发明实施例中的技术方案，请参阅图6，为本发明实施例中终端的结构的实施例，包括：如图5所示实施例中描述的获取模块501及渲染模块502，且与图5所示实施例中描述的技术方案相似，此处不做赘述。

在本发明实施例中，渲染模块502包括：

插入模块601，用于在所述页面的所述视频文件的播放区域内插入浮层，将所述播放图标添加到所述浮层中；

展示模块602，用于在所述浮层中按照所述动画数据展示所述播放图标。

在本发明实施例中，动画数据包含动画属性、动画的持续时间，其中，动画属性包括：缩放、旋转、平移、透明度渐变、亮度渐变。其中，缩放是指播放图标按照预先设置的频率进行缩小及放大，旋转是指播放图标按照一定的速度进行旋转，平移是指播放图标在预先设置的区域范围内移动，透明度渐变是指播放图标的透明度按照预先设置的变化规则进行改变以产生渐变的效果、亮度渐变是指整个播放图标或者部分播放图标的亮度按照预先设置的速度发生变化。其中，动画的持续时间可以根据需要设置，例如可以设置一直有动画效果，或者持续时间为30秒。

在本发明实施例中，终端还包括：

数据获取模块603，用于从服务器获取所述页面的数据包；

判断模块604，用于判断所述页面的数据包中是否包含所述视频文件的播放数据。

在本发明实施例中，获取模块501具体用于从所述视频文件的播放数据中获取所述播放图标的动画数据。

在本发明实施例中，终端上的浏览器或者其他的应用程序在加载页面时，需要向服务器发送页面数据获取请求，该请求中包含该页面的网页地址，服务器接收到该页面数据获取请求之后，将按照该页面的网页地址获取到该网页的数据包，并该将数据包返回给终端，即数据获取模块603获取页面的数据包。

其中，页面的数据包中包含显示该页面的所有数据，例如图片数据、文字数据、音频数据、视频数据、超链接等等其中的至少一个。

在本发明实施例中，若页面的数据包中包含视频文件的播放数据，则说明该页面中有视频播放的区域，可进行视频播放。其中，视频文件的播放数据包括但不限于视频文件的URL地址、播放视频文件的播放区域的大小、及该视频文件的播放区域在页面中的位置，播放视频文件时渲染该播放区域的数据、播放图标的动画数据等等。

在本发明实施例中，终端在加载页面时，数据获取模块603从服务器获取页面的数据包，并由判断模块604判断页面的数据包是否包含视频文件的播放数据。若页面的数据包中包含视频文件的播放数据，则获取模块501从视频文件的播放数据中获取视频文件的播放图标的动画数据，并由渲染模块502按照播放图标的动画数据在页面进行渲染，使得播放图标在页面上能够动画显示。具体的，渲染模块502中的插入模块601在所述页面的所述视频文件的播放区域内插入浮层，将所述播放图标添加到所述浮层中；并由渲染模块502中的展示模块602在所述浮层中按照所述动画数据展示所述播放图标。

在本发明实施例中，终端在显示页面时，需要从服务器获取该页面的数据包，并利用页面的数据包显示页面，其中，终端可判断页面的数据包中是否包含视频文件的播放数据，若页面中包含视频文件，则终端从视频文件的播放数据中获取播放图标的动画数据，确定视频文件在页面上的播放区域，并在该区域内插入浮层，将播放图标添加到该浮层中，在该浮层中按照动画数据展示播放图标，通过在页面插入浮层并在浮层中放置播放图标并按照播放图标的动画数据显示播放图标，使得播放图标能够动画显示，能够有效吸引用户的注意，避免用户忽略该视频文件或者避免用户不易查看到该视频文件，有效改善用户体验。

以上所述，仅是本发明的较佳实施例而已，并非对本发明作任何形式上的限制，虽然本发明已以较佳实施例揭露如上，然而并非用以限定本发明，任何熟悉本专业的技术人员，在不脱离本发明技术方案范围内，当可利用上述揭示的技术内容做出些许更动或修饰为等同变化的等效实施例，但凡是未脱离本发明技术方案内容，依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化与修饰，均仍属于本发明技术方案的范围内。

Claims (4)

1.一种页面展示的方法，其特征在于，包括：

终端在加载页面时，从服务器获取到所述页面的数据包，所述页面上的页面元素包括图片和视频；

若所述页面的数据包中包含视频文件的播放数据，则终端在对所述页面进行渲染时，执行如下处理：

从所述视频文件的播放数据中，获取所述视频文件的播放图标的动画数据，其中，所述视频文件的播放数据包括所述视频文件的统一资源定位符地址、播放所述视频文件的播放区域的大小、所述视频文件的播放区域在所述页面中的位置、播放所述视频文件时渲染所述播放区域的数据、以及所述播放图标的动画数据；

确定所述页面上所述视频文件的播放区域；

在所述播放区域内，在预先设置的所述播放图标的位置，插入大于所述播放图标预定比例的浮层，所述浮层为分区DIV浮层；

将所述播放图标添加到所述浮层中；

按照所述播放图标的动画数据，在所述浮层中将所述播放图标进行缩放、透明度渐变或者亮度渐变；

在通过动画方式展示所述播放图标之后，若检测到用户点击动画展示的播放图标，则加载所述视频文件，进行所述视频文件的播放。

2.一种终端，其特征在于，包括：

数据获取模块，用于终端在加载页面时，从服务器获取到所述页面的数据包，所述页面上的页面元素包括图片和视频；

判断模块，用于判断所述页面的数据包中是否包含视频文件的播放数据；

获取模块，用于若所述页面的数据包中包含所述视频文件的播放数据，则终端在对所述页面进行渲染时，从所述视频文件的播放数据中，获取所述视频文件的播放图标的动画数据，其中，所述视频文件的播放数据包括所述视频文件的统一资源定位符地址、播放所述视频文件的播放区域的大小、所述视频文件的播放区域在所述页面中的位置、播放所述视频文件时渲染所述播放区域的数据、以及所述播放图标的动画数据；

插入模块，用于确定所述页面上所述视频文件的播放区域；在所述播放区域内，在预先设置的所述播放图标的位置，插入大于所述播放图标预定比例的浮层，所述浮层为分区DIV浮层；将所述播放图标添加到所述浮层中；

展示模块，用于按照所述播放图标的动画数据，在所述浮层中将所述播放图标进行缩放、透明度渐变或者亮度渐变；在通过动画方式展示所述播放图标之后，若检测到用户点击动画展示的播放图标，则加载所述视频文件，进行所述视频文件的播放。

3.一种计算机可读存储介质，其特征在于，所述计算机存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被处理器执行时，执行如权利要求1所述的方法。

4.一种计算机设备，其特征在于，包括：处理器和存储器；其中，所述存储器存储有计算机程序，所述计算机程序适于由所述处理器加载并执行如权利要求1所述的方法。

Images