一种浏览器页面显示方法及浏览器与流程

1.本公开涉及计算机网络技术领域，尤其涉及浏览器页面的显示方案。


背景技术：

2.浏览器是万维网服务的客户端浏览程序，可以对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。其中，在浏览器网页端的视频播放场景中，最注重的是视频内容本身，同一视频在不同页面、不同网站或平台，其播放效果是完全一致的。
3.在视音频制作中，页面元素，通常是由电脑软件制作出的现实中一般不会出现的特殊效果。目前来说，几乎所有视频播放中的页面元素都是预先置入到视频中的。这样，页面元素也属于视频内容的一部分(相当于页面元素固定在视频中)，在不同平台播放视频时，均呈现一样的页面元素。并且，一旦页面元素制作完成布到平台，便无法修改。若是想修改页面元素，只能重新发布新的视频来替换旧视频。此外，也不允许作者在线编辑视频，视频编辑的硬件成本非常高。
4.因此，亟需一种能够浏览器页面的显示方案，来解决上述问题。


技术实现要素：

5.本公开提供了一种浏览器页面显示方法及浏览器，以力图解决或者至少缓解上面存在的至少一个问题。
6.根据本公开的一个方面，提供了一种浏览器页面显示方法，包括步骤：获取记录页面元素的信息的配置文件，页面元素信息与浏览器中待播放的视频相关联；对配置文件进行预处理，生成视频对应的页面元素列表；在播放视频的过程中，基于页面元素列表，判断当前时刻是否有待显示的页面元素；若有，则基于待显示页面元素的信息，在浏览器页面上显示。
7.可选地，在根据本公开的方法中，页面元素的信息包括页面元素被触发时刻、显示时长、显示位置、以及元素种类。
8.可选地，在根据本公开的方法中，对配置文件进行预处理，生成视频对应的页面元素列表的步骤包括：针对配置文件中的每一条页面元素信息，按照页面元素被触发时刻的先后顺序，对各页面元素进行排序，生成视频对应的页面元素列表。
9.可选地，在根据本公开的方法中，在播放视频的过程中，基于页面元素列表，判断当前时刻是否有待显示的页面元素的步骤包括：在播放视频的过程中，判断当前时刻与页面元素列表中页面元素被触发时刻是否一致；若一致，则确认被触发时刻对应的页面元素为待显示的页面元素。
10.可选地，在根据本公开的方法中，基于待显示页面元素的信息，在浏览器页面上显示的步骤包括：动态创建页面容器，以显示页面元素；在容器中设置基础样式；基于页面元素的显示位置，在容器中设置页面元素的位置信息；将容器置入页面中；在所置入的容器中设置页面元素样式；基于页面元素显示的时间长度，设置定时器，以便在显示结束后移除容
器。
11.可选地，在根据本公开的方法中，显示位置包括参考坐标点及偏移量；以及参考坐标点包括：视频播放窗口的顶点、浏览器窗口的顶点。
12.可选地，根据本公开的方法还包括步骤：预先生成记录页面元素的信息的配置文件。
13.根据本公开的另一方面，提供了一种浏览器，包括：接收单元，适于获取记录页面元素的信息的配置文件，页面元素的信息与浏览器中待播放的视频相关联；页面元素处理单元，适于对配置文件进行预处理，生成视频对应的页面元素列表；页面元素加载单元，适于在播放视频的过程中，基于页面元素列表，判断当前时刻是否有待显示的页面元素，并在判断当前时刻有待显示的页面元素时，加载页面元素；页面呈现单元，适于在浏览器页面上显示所述页面元素。
14.根据本公开的再一方面，提供了一种计算设备，包括：一个或多个处理器存储器；一个或多个程序，其中所述一个或多个程序存储在存储器中并被配置为由一个或多个处理器执行，一个或多个程序包括用于执行如上任一方法的指令。
15.根据本公开的再一方面，提供了一种存储一个或多个程序的计算机可读存储介质，一个或多个程序包括指令，指令在被计算设备执行时，使得计算设备执行如上所述的任一方法。
16.综上所述，根据本公开的方案，通过设置视频对应的页面元素及其信息，实现了在浏览器窗口内任意位置、在视频播放的任意时间点、均可以显示各种类型的页面元素。
17.此外，将页面元素的生成与显示，均放到了每个客户端浏览器下单独实现，大幅减轻服务器的运算压力。并且，页面元素并不固定在视频内容中。在浏览器页面上播放视频时，通过网页层来调用相应的页面元素来显示。根据本公开的方案，能够大幅降低视频特效制作、修改的成本，省却了重新剪片、渲染、上传、更新等工作环节。
附图说明
18.为了实现上述以及相关目的，本文结合下面的描述和附图来描述某些说明性方面，这些方面指示了可以实践本文所公开的原理的各种方式，并且所有方面及其等效方面旨在落入所要求保护的主题的范围内。通过结合附图阅读下面的详细描述，本公开的上述以及其它目的、特征和优势将变得更加明显。遍及本公开，相同的附图标记通常指代相同的部件或元素。
19.图1示出了根据本公开一些实施例的计算设备100的示意图；
20.图2示出了根据本公开一些实施例的浏览器页面显示方法200的流程示意图；
21.图3示出了根据本公开一些实施例的编辑页面元素的示意图；以及
22.图4示出了根据本公开一些实施例的浏览器400的结构示意图。
具体实施方式
23.下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围
完整的传达给本领域的技术人员。
24.当前视频网站风行的“弹幕”，其实现原理是在视频播放区域，单独建立透明层，再通过网页javascript技术动态打进该层实现的。该方案的缺点是：一、弹幕需要体现在视频播放区域，弹幕的展示区域被严格限制住了；二、弹幕属于ugc(user generated content，用户生成内容，即用户原创内容)范畴，并不是视频创作者可以控制的，无法给视频创作者和视频内容提供帮助和增益；三、由于弹幕数量及算法的关系，弹幕总是不能全部显示出来，同一时间段的弹幕与视频画面无法严格对应，总是会产生对不齐的问题。
25.根据本公开的实施方式，提供了一种浏览器页面显示方法，将视频与网页上的页面元素相结合，区别于上述“弹幕”显示。
26.在根据本公开的实施例中，页面元素包含让网页看起来生动活泼的各种元素，在视频制作/显示中，通常称之为“特效”。视频创作者可以通过视频特效后台，在视频的任意时间节点添加各种特效，但是特效并不固定在视频内容中。之后，当在浏览器页面上播放视频时，通过网页层来调用相应特效。根据本公开的方案，能够大幅降低视频特效制作、修改的成本。
27.根据本公开的实施方式，通过计算设备来执行浏览器页面显示方法。图1是示例性的计算设备100的构造图。
28.如图1所示，在基本配置102中，计算设备100典型地包括系统存储器106和一个或者多个处理器104。存储器总线108可以用于在处理器104和系统存储器106之间的通信。
29.取决于期望的配置，处理器104可以是任何类型的处理，包括但不限于：微处理器(μp)、微控制器(μc)、数字信息处理器(dsp)或者它们的任何组合。处理器104可以包括诸如一级高速缓存110和二级高速缓存112之类的一个或者多个级别的高速缓存、处理器核心114和寄存器116。示例的处理器核心114可以包括运算逻辑单元(alu)、浮点数单元(fpu)、数字信号处理核心(dsp核心)或者它们的任何组合。示例的存储器控制器118可以与处理器104一起使用，或者在一些实现中，存储器控制器118可以是处理器104的一个内部部分。
30.取决于期望的配置，系统存储器106可以是任意类型的存储器，包括但不限于：易失性存储器(诸如ram)、非易失性存储器(诸如rom、闪存等)或者它们的任何组合。计算设备中的物理内存通常指的是易失性存储器ram，磁盘中的数据需要加载至物理内存中才能够被处理器104读取。系统存储器106可以包括操作系统120、一个或者多个应用122以及程序数据124。在一些实施方式中，应用222可以布置为在操作系统上由一个或多个处理器104利用程序数据124执行指令。操作系统120例如可以是linux、windows等，其包括用于处理基本系统服务以及执行依赖于硬件的任务的程序指令。应用122包括用于实现各种用户期望的功能的程序指令，应用122例如可以是浏览器、即时通讯软件、软件开发工具(例如集成开发环境ide、编译器等)等，但不限于此。当应用122被安装到计算设备100中时，可以向操作系统120添加驱动模块。
31.在计算设备100启动运行时，处理器104会从存储器106中读取操作系统120的程序指令并执行。应用122运行在操作系统120之上，利用操作系统120以及底层硬件提供的接口来实现各种用户期望的功能。当用户启动应用122时，应用122会加载至存储器106中，处理器104从存储器106中读取并执行应用122的程序指令。
32.计算设备100还包括存储设备132，存储设备132包括可移除存储器136和不可移除
存储器138，可移除存储器136和不可移除存储器138均与存储接口总线134连接。
33.计算设备100还可以包括有助于从各种接口设备(例如，输出设备142、外设接口144和通信设备146)到基本配置102经由总线/接口控制器130的通信的接口总线140。示例的输出设备142包括图形处理单元148和音频处理单元150。它们可以被配置为有助于经由一个或者多个a/v端口152与诸如显示器153或者扬声器之类的各种外部设备进行通信。示例外设接口144可以包括串行接口控制器154和并行接口控制器156，它们可以被配置为有助于经由一个或者多个i/o端口158和诸如输入设备(例如，键盘、鼠标、笔、语音输入设备、触摸输入设备)或者其他外设(例如打印机、扫描仪等)之类的外部设备进行通信。示例的通信设备146可以包括网络控制器160，其可以被布置为便于经由一个或者多个通信端口164与一个或者多个其他计算设备162通过网络通信链路的通信。
34.网络通信链路可以是通信介质的一个示例。通信介质通常可以体现为在诸如载波或者其他传输机制之类的调制数据信号中的计算机可读指令、数据结构、程序模块，并且可以包括任何信息递送介质。“调制数据信号”可以是这样的信号，它的数据集中的一个或者多个或者它的改变可以在信号中编码信息的方式进行。作为非限制性的示例，通信介质可以包括诸如有线网络或者专线网络之类的有线介质，以及诸如声音、射频(rf)、微波、红外(ir)或者其它无线介质在内的各种无线介质。这里使用的术语计算机可读介质可以包括存储介质和通信介质二者。
35.计算设备100还包括与总线/接口控制器130相连的存储接口总线134。存储接口总线134与存储设备132相连，存储设备132适于进行数据存储。示例的存储设备132可以包括可移除存储器136(例如cd、dvd、u盘、可移动硬盘等)和不可移除存储器138(例如硬盘驱动器hdd等)。
36.在根据本公开的计算设备100中，应用122包括用于执行本公开的浏览器页面显示方法200的指令。上述指令可以指示处理器104执行本公开的方法200。
37.图2示出了根据本公开一些实施例的浏览器页面显示方法200的流程示意图。如图2所示，方法200始于步骤s210。
38.在步骤s210中，获取记录页面元素的信息的配置文件。
39.根据本公开的实施方式，浏览器页面加载后，初始化视频播放器，包括播放器ui界面、加载视频内容等。之后，计算设备100访问服务器，从服务器上获取视频对应的页面元素的信息，即获取配置文件。
40.在一种实施例中，页面元素的信息与浏览器中待播放的视频相关联。例如，针对每段视频，设置相应的页面元素信息，可以在页面元素信息中增加标识视频的标识符，本公开对此不作过多限制。
41.页面元素的信息至少包括：页面元素被触发时刻、显示时长、显示位置、元素种类中的一种或多种。
42.在一种实施例中，显示位置包括参考坐标点及偏移量。其中，参考坐标点包括：视频播放窗口的顶点、浏览器窗口的顶点。通常，视频播放窗口和浏览器窗口都是方形的，分别具有4个顶点，分别记作：左上角顶点、左下角顶点、右上角顶点、右下角顶点。偏移量是相对于参考坐标点的偏移，通常包含水平方向(x轴)的偏移坐标和垂直方向(y轴)的偏移坐标。
43.元素种类可以是简单的或复杂的动画、音效、留资表单等，例如礼花特效、翻页特效、欢呼特效等。甚至，元素种类也可以是通过浏览器api来实现计算设备震动等。
44.根据本公开的一种实施方式，方法200还包括步骤：预先生成记录页面元素的信息的配置文件。
45.在一种实施例中，视频创作者可以通过视频编辑后台，编辑页面元素，包括不限于，增加、删除、修改页面元素。计算设备100根据所编辑的页面元素，生成对应的配置文件。
46.为便于视频创作者更为直观简便地在视频中编辑页面元素，来生成配置文件，图3示出了根据本公开一些实施例的编辑页面元素的界面示意图。
47.如图3所示，在显示界面中设置有视频播放区域302，以供视频创作者预览视频。此外，还设置有页面元素列表区域304和页面元素编辑区域306。视频创作者可以在区域306编辑页面元素的信息(如图3中所示的新添加特效)。在一种实施例中，可以以表单的形式来输入页面元素的信息。如图3，设置页面元素被触发的时间点、元素种类(即，“特效”)、显示位置(即参考坐标点、偏移量)等。之后，点击“添加”按钮，该页面元素便会添加到区域304中。在区域304中，以列表形式展示当前视频所添加的页面元素及其信息。同样，当视频创作者点击“新添特效”按钮，便会跳转到区域306，以供视频创作者编辑页面元素。
48.应当了解，图3仅作为示例，以便于辅助说明根据本公开的方法200，本公开对此并不局限于此。
49.如下示出了一种配置文件的基础结构，其中包含2条页面元素的信息：
50.speffects＝[
[0051]
{time:0.8,duration:2,type:
‘
firework’,pos:
‘
topright’,offset:0,0},
[0052]
{time:4.4,duration:3,type:
‘
slide’,pos:
‘
topleft’,offset:10,10},
[0053]
]
[0054]
其中，time表示被触发时刻；duration表示显示时长；type表示元素种类，在上例中，firework表示页面元素为烟花，slide表示页面元素为滑动；pos表示显示位置中的参考坐标点，offset表示显示位置中的偏移量；在上例中，“pos:
‘
topright’,offset:0,0”表示显示位置为：窗口右上角顶点，“pos:
‘
topleft’,offset:10,10”表示显示位置为：在水平方向和垂直方向上，分别偏移窗口左上角顶点10个坐标的点。特别地，在视频显示中，1个坐标相当于1个像素。
[0055]
应当了解，以上仅作为示例，本公开对此不作限制。在另一些实施例中，视频播放窗口仅作为浏览器页面的一部分，此时，还可以增加针对参考坐标点的说明，以进一步明确作为参考点的顶点，是视频播放窗口的顶点、还是浏览器窗口的顶点。可选地，
[0056]
这样，根据本公开的浏览器页面显示方案，没有视频播放窗口大小的限制，整个浏览器窗口都可以严格来响应视频播放进度，施放特效。
[0057]
随后，在步骤s220中，对配置文件进行预处理，生成视频对应的页面元素列表。
[0058]
根据本公开的实施例，服务器返回的数据结构，通常是按照视频创造者编辑的先后顺序，未必是按照页面元素被触发时刻的先后顺序来排列的。因此，对配置文件的预处理包括：针对配置文件中的每一条页面元素信息，按照页面元素被触发时刻的先后顺序，对各页面元素进行排序，生成该视频对应的页面元素列表。
[0059]
随后在步骤s230中，在播放视频的过程中，基于页面元素列表，判断当前时刻是否
有待显示的页面元素。
[0060]
根据一种实施例，在播放视频的过程中，判断当前时刻与页面元素列表中的页面元素被触发时刻是否一致。若当前时刻与页面元素列表中的页面元素被触发时刻一致，则确认该被触发时刻对应的页面元素为当前时刻要显示的页面元素。
[0061]
在另一些实施例中，若当前时刻稍早于页面元素被触发时刻，则认为当前时刻与页面元素被触发时刻一致。根据一种实施例，“当前时刻稍早于页面元素被触发时刻”，定义为，当前时刻早于页面元素被触发时刻的时间差在100ms以内。
[0062]
根据本公开的一种实施例，为播放器添加timeupdate事件监控，使播放过程中始终执行showeffectbox函数进行判断，如下：
[0063]
videobox.addeventlistener('timeupdate',showeffectbox)；
[0064]
showeffectbox函数中，取当前视频播放时间点videobox.currenttime与页面元素列表中第一项的被触发时刻speffects[0].time做对比。如果时间一致，则将该条记录弹出数组并运行showeffect函数执行特效。用代码表示如下：
[0065][0066]
其中，第一个if判断为：当页面元素列表不为空且当前时刻与页面元素被触发时刻一致时，执行特效。
[0067]
第二个if判断为：当页面元素列表为空时，解绑事件监听，清理cpu与内存占用。
[0068]
若当前时刻有待显示的页面元素，则在随后的步骤s240中，基于待显示页面元素的信息，在浏览器页面上显示。
[0069]
如前文所述，在一种实施例中，使用showeffect函数来执行网页特效。具体步骤为。
[0070]
1)动态创建页面容器，以显示页面元素。
[0071]
2)在容器中设置基础样式。需要说明的是，该基础样式是针对所有页面元素而言的，所有页面元素的基础样式是统一的。
[0072]
3)基于页面元素的显示位置，在容器中设置页面元素的位置信息。关于显示位置，可参考前文中的相关描述，此处不再赘述。
[0073]
4)将经过步骤2)和步骤3)处理后的容器，置入浏览器页面中。在一种实施例中，是
将该容器置入到浏览器页面对应的源码中，以便其在浏览器网页中显示。
[0074]
5)在所置入的容器中设置页面元素样式。在一种实施例中，页面元素样式与页面元素的元素种类相关，例如，若元素种类是烟花，则需要设置页面元素样式能够像烟花一样动起来。
[0075]
6)基于页面元素显示的时间长度，设置定时器，以便在显示结束后移除容器。
[0076]
使用showeffect函数来执行网页特效的代码表示如下：
[0077][0078]
其中，effectbox表示容器，effect表示基础样式，pos表示位置信息，type表示元素种类，effect-${type}表示页面元素样式，duration表示显示时长。
[0079]
根据本公开的实施方式，重复迭代步骤s230和步骤s240，直到视频播放结束或页面元素列表被执行完毕。
[0080]
在一些实施例中，当页面元素列表被执行完毕时，还会移除播放器的timeupdate事件监听，即，不再执行步骤s230，以减轻cpu与内存占用。如下：
[0081][0082]
本公开提供了一种浏览器页面的显示方案，通过设置视频对应的页面元素及其信息，实现了在浏览器窗口内任意位置、在视频播放的任意时间点、均可以显示各种类型的页面元素。由于特效生产方只有视频创作者一人，区别于弹幕这种对实时交互强烈依赖的产品，本方案只在视频播放前访问一次服务器即可，不必频繁访问服务器或与服务器保持长
连接等，有效降低了计算设备(浏览器)、网络、服务器三方的资源占用，一次访问，一次处理即可完成全部的功能。
[0083]
此外，本方案将页面元素的生成与处理，均放到了每个客户端浏览器下单独实现，大幅减轻服务器的运算压力。并且，页面元素并不固定在视频内容中。在浏览器页面上播放视频时，通过网页层来调用相应的页面元素来显示。根据本公开的方案，能够大幅降低视频特效制作、修改的成本，省却了重新剪片、渲染、上传、更新等工作环节。同时，页面元素均属于常见web网页特效，视频创作者可以很方便地对视频的关键时间点进行特效设定，提升了视频生产效率、降低了视频生产难度。
[0084]
此外，本公开还具有以下特性：(1)服务于视频创作者，可以使作者通过特效后台方便地对自己视频内容中的各类关键点，如：亮点、爆点、笑点等做出多种特效的调整等；(2)特效的设置包括：特效的种类，出现位置，展示大小，持续时间，都可以个性化设置；(3)降低视频创作者的制作和修改成本，一些简单特效可以在后台简单配置即可；(4)页面元素并不限制仅在视频播放窗口上显示，整个浏览器窗口都可以严格来响应视频播放进度，显示页面元素；(5)页面元素多元化，可以是简单动画、复杂动画、音效、留资表单、甚至未来可以通过浏览器api实现设备震动等复杂交互。
[0085]
图4示出了根据本公开一些实施例的浏览器400的结构示意图。根据本公开的实施方式，该浏览器可以布置在计算设备(如前述计算设备100)中。应当了解，浏览器400与浏览器页面显示方法200互为补充，鉴于此，相同之处不再重复，方法200的相关描述与浏览器400的相关描述，相互补充说明。
[0086]
除期望的配置外，浏览器400至少包括：接收单元410、页面元素处理单元420、页面元素加载单元430和页面呈现单元440。
[0087]
接收单元410获取记录页面元素的信息的配置文件。页面元素的信息与浏览器中待播放的视频相关联。
[0088]
页面元素处理单元420对配置文件进行预处理，生成视频对应的页面元素列表。
[0089]
页面元素加载单元430在播放所述视频的过程中，基于页面元素列表，判断当前时刻是否有待显示的页面元素，并在判断当前时刻有待显示的页面元素时，加载页面元素。
[0090]
页面呈现单元440在浏览器页面上显示页面元素。
[0091]
在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本公开的实施例可以在没有这些具体细节的情况下被实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。
[0092]
类似地，应当理解，为了精简本公开并帮助理解各个公开方面中的一个或多个，在上面对本公开的示例性实施例的描述中，本公开的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本公开要求比在每个权利要求中所明确记载的特征更多特征。更确切地说，如下面的权利要求书所反映的那样，公开方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本公开的单独实施例。
[0093]
本领域那些技术人员应当理解在本文所公开的示例中的设备的模块或单元或组件可以布置在如该实施例中所描述的设备中，或者可替换地可以定位在与该示例中的设备
不同的一个或多个设备中。前述示例中的模块可以组合为一个模块或者此外可以分成多个子模块。
[0094]
本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。
[0095]
此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本公开的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。
[0096]
此外，所述实施例中的一些在此被描述成可以由计算机系统的处理器或者由执行所述功能的其它装置实施的方法或方法元素的组合。因此，具有用于实施所述方法或方法元素的必要指令的处理器形成用于实施该方法或方法元素的装置。此外，装置实施例的在此所述的元素是如下装置的例子：该装置用于实施由为了实施该公开的目的的元素所执行的功能。
[0097]
如在此所使用的那样，除非另行规定，使用序数词“第一”、“第二”、“第三”等等来描述普通对象仅仅表示涉及类似对象的不同实例，并且并不意图暗示这样被描述的对象必须具有时间上、空间上、排序方面或者以任意其它方式的给定顺序。
[0098]
尽管根据有限数量的实施例描述了本公开，但是受益于上面的描述，本技术领域内的技术人员明白，在由此描述的本公开的范围内，可以设想其它实施例。此外，应当注意，本说明书中使用的语言主要是为了可读性和教导的目的而选择的，而不是为了解释或者限定本公开的主题而选择的。因此，在不偏离所附权利要求书的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。对于本公开的范围，对本公开所做的公开是说明性的，而非限制性的，本公开的范围由所附权利要求书限定。