WO2018161811A1 - H5-based page displaying method and terminal - Google Patents

H5-based page displaying method and terminal Download PDF

Info

Publication number
WO2018161811A1
WO2018161811A1 PCT/CN2018/077183 CN2018077183W WO2018161811A1 WO 2018161811 A1 WO2018161811 A1 WO 2018161811A1 CN 2018077183 W CN2018077183 W CN 2018077183W WO 2018161811 A1 WO2018161811 A1 WO 2018161811A1
Authority
WO
WIPO (PCT)
Prior art keywords
video content
page
visible window
video
webpage
Prior art date
Application number
PCT/CN2018/077183
Other languages
French (fr)
Chinese (zh)
Inventor
梁宇轩
Original Assignee
腾讯科技(深圳)有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Priority to CN201710142492.1 priority Critical
Priority to CN201710142492.1A priority patent/CN106919707B/en
Application filed by 腾讯科技(深圳)有限公司 filed Critical 腾讯科技(深圳)有限公司
Publication of WO2018161811A1 publication Critical patent/WO2018161811A1/en

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING; COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • GPHYSICS
    • G06COMPUTING; CALCULATING; COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces

Abstract

The embodiments of the invention disclose a H5-based page displaying method and terminal to reduce web page development costs, increase web page development efficiency, and implement a smooth video playback. In one embodiment of the invention, the H5-based page displaying method comprises: displaying, on a display screen of a terminal, a hypertext markup language 5 (H5) web page comprising a H5 page visible window and a video player button floating thereon; inserting video content to be displayed into the H5 page, wherein the video content is displayed in the H5 page visible window; and upon triggering display of the video content, displaying, in the H5 page visible window, the video content, and hiding the video player button on the H5 page visible window.

Description

一种基于H5的页面显示方法和终端H5-based page display method and terminal
本申请要求于2017年03月10日提交中国专利局、申请号为2017101424921、发明名称为“一种基于H5的页面显示方法和终端”的中国专利申请的优先权,其全部内容通过引用结合在本申请中。The present application claims priority to Chinese Patent Application No. 2017101424921, entitled "H5-based Page Display Method and Terminal", filed on March 10, 2017, the entire contents of which are incorporated by reference. In this application.
技术领域Technical field
本发明涉及计算机技术领域,尤其涉及一种基于H5的页面显示方法和终端。The present invention relates to the field of computer technologies, and in particular, to a H5-based page display method and terminal.
背景技术Background technique
随着社会与互联网的发展,基于终端的页面也越来越多。页面的访问用户庞大且各种用户操作的终端种类繁多,面对使用不同终端的用户群体,目前的页面开发过程主要基于传统的移动网页实现展示类的用户需求,从而可以实现基于移动网页的信息展示。例如通过移动网页播放视频内容,用户通过操作终端,观看终端上安装的视频播放器展示的视频内容,获取视频制作者需要传播的信息。With the development of society and the Internet, there are more and more pages based on terminals. The page has a large number of access users and various types of terminals operated by various users. Facing the user groups using different terminals, the current page development process is mainly based on the traditional mobile webpage to realize the user requirements of the display class, thereby realizing the information based on the mobile webpage. Show. For example, by playing a video content on a mobile webpage, the user operates the terminal to view the video content displayed by the video player installed on the terminal, and obtains information that the video producer needs to transmit.
现有技术中,可以基于传统的移动网页制作动画,来实现交互类的复杂动作,但是这需要在页面上添加大量的元素再通过局部的多元素拼合来完成动画制作,这会存在网页制作成本较高、制作时间长、显示不流畅的问题。分析说明如下,离散的页面元素拼合会造成用户体验差的问题,例如局部的多元素在网页中表现的是多个区块元素,不同的区块都会消耗内存进行渲染以及逻辑代码控制。多元素在开发控制上也比较复杂,多元素开发完成后的调试过程也很复杂,元素过多会消耗较多的内存,特别是在终端的网页上内存以及性能的消耗非常重要,从而导致动画播放不流畅的问题。In the prior art, animations can be created based on traditional mobile webpages to implement complex actions of interactive classes, but this requires adding a large number of elements on the page and then performing animation by partial multi-element stitching, which may result in webpage production costs. Higher, longer production time, and less smooth display. The analysis shows that the discrete page element flattening will cause poor user experience. For example, local multi-element will represent multiple block elements in the webpage, and different blocks will consume memory for rendering and logic code control. Multi-element is also more complicated in development control. The debugging process after multi-element development is also very complicated. Too many elements will consume more memory, especially in the terminal's webpage, and the memory consumption is very important, which leads to animation. Play a problem that is not smooth.
以现有技术中的FLASH制作为例进行说明,需要一名设计师设计基础图片文件,需要一名动画设计师使用动画设计软件进行图片帧的扩展,然后再需要一名开发工程师对其进行反馈函数的动态效果编写,存在网页制作成本较高、制作时间长的问题。而且动画类的元素拼接对于开发工程师来调整也较麻烦,元素分离拼接比较多,例如层叠样式表(Cascading Style Sheet,CSS)3动画或者帧动画,由于其元素的节点行过多,需要重复渲染,会造成动画的卡顿,从而导致动画播放不流畅的问题。Taking FLASH production in the prior art as an example, a designer needs to design a basic image file, and an animation designer needs to use animation design software to expand the image frame, and then a development engineer needs feedback. The dynamic effect of the function is written, which has the problem of high cost of web page production and long production time. Moreover, the element splicing of the animation class is more troublesome for the development engineer to adjust, and the element separation and splicing is more, such as Cascading Style Sheet (CSS) 3 animation or frame animation, because the element has too many node rows, it needs to be repeatedly rendered. , it will cause the animation to be stuck, which will cause the animation to play smoothly.
发明内容Summary of the invention
本发明实施例提供了一种基于H5的页面显示方法和终端,用于减少网页制作成本,提高网页制作效率,实现视频的流畅显示。The embodiment of the invention provides a page display method and a terminal based on H5, which are used for reducing webpage production cost, improving webpage production efficiency, and realizing smooth display of video.
为解决上述技术问题,本发明实施例提供以下技术方案:To solve the above technical problem, the embodiment of the present invention provides the following technical solutions:
第一方面,本发明实施例提供一种基于H5的页面显示方法,包括:In a first aspect, an embodiment of the present invention provides a page display method based on H5, including:
在终端的显示屏幕上加载第五代超文本标记语言H5网页,所述H5网页包括:H5页面可视窗口和浮动在所述H5页面可视窗口上的视频播放器按钮;Loading a fifth generation hypertext markup language H5 webpage on a display screen of the terminal, the H5 webpage comprising: an H5 page visible window and a video player button floating on the H5 page visible window;
在所述H5网页上插入待显示的视频内容,所述视频内容显示在所述H5页面可视窗口上;Inserting video content to be displayed on the H5 webpage, the video content being displayed on the H5 page visible window;
当所述视频内容被触发播放时,在所述H5页面可视窗口上播放所述视频内容,并在所述H5页面可视窗口上隐藏所述视频播放器按钮。When the video content is triggered to play, the video content is played on the H5 page visible window, and the video player button is hidden on the H5 page visible window.
第二方面,本发明实施例还提供一种终端,包括:In a second aspect, the embodiment of the present invention further provides a terminal, including:
网页加载模块,用于在终端的显示屏幕上加载第五代超文本标记语言H5网页,所述H5网页包括:H5页面可视窗口和浮动在所述H5页面可视窗口上的视频播放器按钮;a webpage loading module, configured to load a fifth generation hypertext markup language H5 webpage on a display screen of the terminal, the H5 webpage comprising: a H5 page visible window and a video player button floating on the H5 page visible window ;
视频插入模块,用于在所述H5网页上插入待显示的视频内容,所述视频内容显示在所述H5页面可视窗口上;a video insertion module, configured to insert video content to be displayed on the H5 webpage, where the video content is displayed on the H5 page visible window;
显示控制模块,用于当所述视频内容被触发播放时,在所述H5页面可视窗口上播放所述视频内容,并在所述H5页面可视窗口上隐藏所述视频播放器按钮。And a display control module, configured to play the video content on the H5 page visible window when the video content is triggered to play, and hide the video player button on the H5 page visible window.
第三方面,本发明实施了提供了一种终端,包括:存储器及处理器;In a third aspect, the present invention provides a terminal, including: a memory and a processor;
所述存储器用于存储程序;The memory is used to store a program;
所述处理器用于执行所述程序,具体包括如下步骤:The processor is configured to execute the program, and specifically includes the following steps:
在终端的显示屏幕上加载第五代超文本标记语言H5网页,所述H5网页包括:H5页面可视窗口和浮动在所述H5页面可视窗口上的视频播放器按钮;Loading a fifth generation hypertext markup language H5 webpage on a display screen of the terminal, the H5 webpage comprising: an H5 page visible window and a video player button floating on the H5 page visible window;
在所述H5网页上插入待显示的视频内容,所述视频内容显示在所述H5页面可视窗口上;Inserting video content to be displayed on the H5 webpage, the video content being displayed on the H5 page visible window;
当所述视频内容被触发播放时,在所述H5页面可视窗口上播放所述视频内容,并在所述H5页面可视窗口上隐藏所述视频播放器按钮。When the video content is triggered to play, the video content is played on the H5 page visible window, and the video player button is hidden on the H5 page visible window.
第四方面,本发明实施了提供了一种计算机可读存储介质,所述计算机可读存储介质中存储有指令,当其在计算机上运行时,使得计算机执行上述各方面所述的方法。In a fourth aspect, the present invention provides a computer readable storage medium having instructions stored therein that, when executed on a computer, cause the computer to perform the methods described in the above aspects.
从以上技术方案可以看出,本发明实施例具有以下优点:It can be seen from the above technical solutions that the embodiments of the present invention have the following advantages:
在本发明实施例中,在终端的显示屏幕上加载第五代超文本标记语言H5网页,H5网页包括:H5页面可视窗口和浮动在H5页面可视窗口上的视频播放器按钮,在H5网页上插入待显示的视频内容,视频内容显示在H5页面可视窗口上,当视频内容被触发播放时,在H5页面可视窗口上播放视频内容,并在H5页面可视窗口上隐藏视频播放器按钮。本发明实施例通过在H5网页上插入视频内容来实现H5页面的制作,不需要使用多个页面元素,不存在页面拼合的问题,降低了网页制作的成本和制作时间,另外,本发明实施例在播放视频内容的时候,可以将视频播放器按钮屏蔽,则用户在浏览H5页面时,不会感觉自己在看视频而是H5页面在活动,让用户可以沉浸在视频内容所要传播的场景,提升用户体验。In the embodiment of the present invention, the fifth generation hypertext markup language H5 webpage is loaded on the display screen of the terminal, and the H5 webpage includes: a H5 page visible window and a video player button floating on the H5 page visible window, in the H5 The video content to be displayed is inserted on the webpage, and the video content is displayed on the H5 page visible window. When the video content is triggered to play, the video content is played on the H5 page visible window, and the video playback is hidden on the H5 page visible window. Button. The embodiment of the present invention implements the creation of the H5 page by inserting the video content on the H5 webpage, does not need to use multiple page elements, does not have the problem of page flattening, reduces the cost of webpage production and the production time, and further, the embodiment of the present invention When the video content is played, the video player button can be shielded. When the user browses the H5 page, the user does not feel that he is watching the video but the H5 page is active, so that the user can immerse in the scene to be spread by the video content, and improve user experience.
附图说明DRAWINGS
为了更清楚地说明本发明实施例中的技术方案,下面将对实施例描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域的技术人员来讲,还可以根据这些附图获得其他的附图。In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the drawings used in the description of the embodiments will be briefly described below. It is obvious that the drawings in the following description are only some embodiments of the present invention. Other drawings may also be obtained from those skilled in the art from the drawings.
图1为本发明实施例提供的一种基于H5的页面显示方法的流程方框示意图;1 is a schematic block diagram of a method for displaying a page based on H5 according to an embodiment of the present invention;
图2为本发明实施例提供的基于H5的流程交互示意图;2 is a schematic diagram of a process interaction based on H5 according to an embodiment of the present invention;
图3为本发明实施例提供的一种在H5网页上插入视频内容的实现场景示意图;FIG. 3 is a schematic diagram of an implementation scenario of inserting video content on an H5 webpage according to an embodiment of the present invention;
图4为本发明实施例提供的隐藏视频播放器按钮的实现场景示意图;4 is a schematic diagram of an implementation scenario of a hidden video player button according to an embodiment of the present invention;
图5-a为本发明实施例提供的一种终端的组成结构示意图;FIG. 5-a is a schematic structural diagram of a terminal according to an embodiment of the present disclosure;
图5-b为本发明实施例提供的另一种终端的组成结构示意图;FIG. 5-b is a schematic structural diagram of another terminal according to an embodiment of the present disclosure;
图6为本发明实施例提供的基于H5的页面显示方法应用于终端的组成结构示意图。FIG. 6 is a schematic structural diagram of a component of a H5-based page display method applied to a terminal according to an embodiment of the present invention.
具体实施方式detailed description
本发明实施例提供了一种基于H5的页面显示方法和终端,用于减少网页制作成本,提高网页制作效率,实现视频的流畅显示。The embodiment of the invention provides a page display method and a terminal based on H5, which are used for reducing webpage production cost, improving webpage production efficiency, and realizing smooth display of video.
本发明的说明书和权利要求书及上述附图中的术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,以便包含一系列单元的过程、方法、系统、产品或设备不必限于那些单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它单元。The terms "comprising" and "having", and any variations thereof, are intended to cover a non-exclusive inclusion to include a series of units of processes, methods, systems, or products. The devices are not necessarily limited to those units, but may include other units not explicitly listed or inherent to such processes, methods, products, or devices.
本发明实施例提供的基于H5的页面显示方法可以应用于终端,由于在微信客户端、手机QQ客户端等应用程序上传播第五代超文本标记语言(Hyper Text Markup Language 5,H5)网页已经成为一种主流的视频共享方式,则将本实施例中的基于H5的页面显示方法应用于终端,用户通过终端上安装的应用程序对视频内容进行共享,可以让更多的用户看到视频内容,提升视频的浏览量。The H5-based page display method provided by the embodiment of the present invention can be applied to a terminal, and the fifth-generation Hypertext Markup Language 5 (H5) webpage has been propagated on an application such as a WeChat client or a mobile QQ client. As a mainstream video sharing method, the H5-based page display method in this embodiment is applied to the terminal, and the user shares the video content through the application installed on the terminal, so that more users can see the video content. , improve the number of views of the video.
下面对本发明实施了中的基于H5的页面显示方法进行介绍,请参阅图1所示,本发明一个实施例提供的基于H5的页面显示方法,可以包括如下步骤:The H5-based page display method in the implementation of the present invention is described below. Referring to FIG. 1 , an H5-based page display method according to an embodiment of the present invention may include the following steps:
101、在终端的显示屏幕上加载H5网页,H5网页包括:H5页面可视窗口和浮动在H5页面可视窗口上的视频播放器按钮。101. Load an H5 webpage on the display screen of the terminal, and the H5 webpage includes: a H5 page visible window and a video player button floating on the H5 page visible window.
本发明实施例中,终端的操作系统中安装HTML5(后续简称为H5)网页程序,该终端具体可以手机终端或者平板电脑等移动设备,用户可以点击运行终端中的H5网页,在终端的显示屏幕上加载H5网页,H5网页包括:H5页面可视窗口和浮动在H5页面可视窗口上的视频播放器按钮,其中,H5页面可视窗口是用户能够在H5网页上看到的显示窗口,H5网页的内容在该H5页面可视窗口中加载并显示,H5网页支持视频元素的插入,在H5网页上还设置有视频播放器按钮,该视频播放器按钮用于控制视频的播放,视频播放器上通常显示有视频播放控制组件,用户对视频播放器的操作通常包括:点击播放开始按钮、暂停按钮、快进按钮、后退按钮等,在本发明实施例中H5网页中包括的视频播放器按钮浮动于H5页面可视窗口上,因此视频播放器按钮与H5页面可视窗口之间的位置关系可以做灵活调整,详见后续实施例中在视频 内容播放时对视频播放器按钮的隐藏操作。In the embodiment of the present invention, an HTML5 (hereinafter abbreviated as H5) webpage program is installed in the operating system of the terminal, and the terminal may be a mobile device such as a mobile phone terminal or a tablet computer, and the user may click on the H5 webpage in the running terminal to display the display screen of the terminal. The H5 webpage is loaded, and the H5 webpage includes: a H5 page visible window and a video player button floating on the H5 page visible window, wherein the H5 page visible window is a display window that the user can see on the H5 webpage, H5 The content of the webpage is loaded and displayed in the visual window of the H5 page, the H5 webpage supports the insertion of the video element, and the video player button is also set on the H5 webpage, the video player button is used to control the video playing, the video player The video playback control component is usually displayed on the user. The user's operation on the video player usually includes: clicking a play start button, a pause button, a fast forward button, a back button, etc., in the embodiment of the present invention, the video player button included in the H5 webpage. Floating on the H5 page visible window, so the positional relationship between the video player button and the H5 page visible window can For flexible adjustment, see the hidden operation of the video player button during video content playback in the subsequent embodiments.
在本发明的一些实施例中,步骤101在终端的显示屏幕上加载第五代超文本标记语言H5网页,包括:In some embodiments of the present invention, step 101 loads a fifth generation hypertext markup language H5 web page on a display screen of the terminal, including:
A1、检测终端的显示屏幕上产生的触摸事件;A1: detecting a touch event generated on a display screen of the terminal;
A2、根据触摸事件在显示屏幕上加载H5网页。A2. Loading the H5 webpage on the display screen according to the touch event.
其中,用户可以触发终端显示屏幕,从而终端可以检测到用户发送的触摸事件,举例说明,用户触摸页面上的任意位置,在H5网页的制作过程中,终端的操作系统规定了用户没有主动触摸页面则不允许预先载入视频,提高载入速度,一般情况会在页面上贴一个小指纹示意用户吸引用户兴趣的点击一下,当用户点击之后,可以产生触摸事件,接下来可以根据触摸事件在显示屏幕上加载H5网页。The user can trigger the terminal display screen, so that the terminal can detect the touch event sent by the user. For example, the user touches any position on the page. During the production process of the H5 webpage, the operating system of the terminal stipulates that the user does not actively touch the page. It is not allowed to preload the video to improve the loading speed. Generally, a small fingerprint is posted on the page to indicate that the user is interested in clicking the user. When the user clicks, a touch event can be generated, and then the touch event can be displayed according to the touch event. The H5 web page is loaded on the screen.
102、在H5网页上插入待显示的视频内容,视频内容显示在H5页面可视窗口上。102. Insert the video content to be displayed on the H5 webpage, and the video content is displayed on the H5 page visible window.
在本发明实施例中,在终端的显示屏幕上加载H5网页之后,可以根据用户所选择的需要播放的视频文件提取出待显示的视频内容,在H5网页上插入该视频内容,其中,该视频内容可以由用户制作,也可以由用户提供下载地址,根据该下载地址进行视频内容的获取,该视频内容可以模拟多种场景,例如视频内容可以对商品进行展示和介绍,也可以讲述游戏程序的操作技巧,或者模拟用户浏览网页,或者模拟用户在页面上的操作,或者模拟用户播放音乐等,具体此处不做限定。在本发明实施例中,视频内容插入到H5网页之后,该视频内容可以显示在H5页面可视窗口上。其中,视频元素对应HTML5中的视频(VIDEO)标签,HTML5技术允许在网页中插入视频元素,因此可以把视频内容放入网页中播放与展现,因为是浏览器支持的HTML5技术而不需要额外安装消耗过多内存的视频播放器,性能上浏览器与W3C组织已经做了优化。In the embodiment of the present invention, after the H5 webpage is loaded on the display screen of the terminal, the video content to be displayed may be extracted according to the video file that the user selects to play, and the video content is inserted on the H5 webpage, where the video is inserted. The content can be created by the user, or the user can provide a download address, and the video content can be obtained according to the download address. The video content can simulate various scenarios, for example, the video content can display and introduce the product, and can also describe the game program. Operation skills, or simulate the user browsing the webpage, or simulate the user's operation on the page, or simulate the user to play music, etc., which is not limited here. In the embodiment of the present invention, after the video content is inserted into the H5 webpage, the video content may be displayed on the H5 page visible window. Among them, the video element corresponds to the video (VIDEO) tag in HTML5. HTML5 technology allows video elements to be inserted into the webpage, so the video content can be played and displayed in the webpage, because it is HTML5 technology supported by the browser without additional installation. The video player that consumes too much memory, the performance on the browser and the W3C organization has been optimized.
在本发明的一些实施例中,待显示的视频内容的高度大于视频内容的宽度,即该视频内容需要竖屏显示,这与用户通常竖屏手持终端进行操作完全适配,在竖屏场景下,视频内容的高度大于视频内容的宽度。步骤102在H5网页上插入待显示的视频内容,包括:In some embodiments of the present invention, the height of the video content to be displayed is greater than the width of the video content, that is, the video content needs to be displayed in a vertical screen, which is completely compatible with the operation of the user's usual vertical screen handheld terminal, in the vertical screen scene. The height of the video content is greater than the width of the video content. Step 102 inserts the video content to be displayed on the H5 webpage, including:
B1、将待显示的视频内容插入到H5页面可视窗口;B1, inserting the video content to be displayed into the H5 page visible window;
B2、按照H5页面可视窗口的宽度对视频内容的宽度进行缩放,并按照缩放后的视频内容的宽度等比例缩放视频内容的高度。B2. The width of the video content is scaled according to the width of the H5 page visible window, and the height of the video content is scaled according to the width of the scaled video content.
其中,在用户进入H5网页时,将视频内容插入到H5网页上的H5页面可视窗口,横向100%缩放,纵向等比自适应的跟随横向缩放,从而将视频内容等比例的缩放到与H5页面可视窗口相同的尺寸,使得该视频内容在H5页面可视窗口能够正常显示,不会存在视频内容的部分图像丢失,本发明实施例中插入视频内容是指在H5页面可视窗口中插入视频内容,具体可以通过HTML5技术与java script控制逻辑在用户载入H5网页后插入视频内容,该视频内容可以通过视频Video标签的方式插入到H5网页上。Wherein, when the user enters the H5 webpage, the video content is inserted into the H5 page visible window on the H5 webpage, horizontally 100% zoomed, and the vertical aspect ratio adaptively follows the horizontal zoom, thereby scaling the video content to the same scale as H5. The same size of the page visible window, so that the video content can be displayed normally in the H5 page visible window, and there is no partial image loss of the video content. In the embodiment of the present invention, inserting the video content means inserting in the H5 page visible window. Video content, specifically through HTML5 technology and java script control logic, after the user loads the H5 webpage, the video content is inserted, and the video content can be inserted into the H5 webpage by means of the video Video tag.
103、当视频内容被触发播放时,在H5页面可视窗口上播放视频内容,并在H5页面可视窗口上隐藏视频播放器按钮。103. When the video content is triggered to play, the video content is played on the H5 page visible window, and the video player button is hidden on the H5 page visible window.
在本发明实施例中,视频内容插入到H5网页之后,可以由用户点击终端的显示屏幕来触发视频内容的播放,也可以按照预定的触发条件来触发视频内容的播放,例如在视频内容插入到H5网页后等待预置的时间长度后就可以自动进行播放,或者终端的摄像头检测用户的手势或者面部动作,从而触发视频内容播放,本发明实施例中可以在H5页面可视窗口上播放视频内容,并在H5页面可视窗口上隐藏视频播放器按钮。本发明实施例中在H5网页上视频播放器按钮浮动于H5页面可视窗口,当有视频内容播放时,该视频播放器按钮自动的从H5页面可视窗口上隐藏掉,这与现有技术中视频播放器上的控制组件在视频播放器上当用户点击全屏播放时隐藏该控制组件是完全不相同的,通常视频播放器上的控制组件需要用户操作后隐藏起来,当用户再次操作视频播放器时再显示出来。本发明实施例中是在H5网页的H5页面可视窗口上隐藏视频播放器按钮,该视频播放器按钮和H5页面可视窗口都是H5页面的组成部分,当视频播放器按钮隐藏起来时,在H5网页上只显示全屏的H5页面可视窗口,该H5页面可视窗口中播放的视频内容在用户侧看来,并不是在播放视频内容,而是整个H5页面在全屏活动,使得用户沉浸在视频内容所要展示的场景中,提升用户沉浸感,而通过H5网页展示视频内容,便于用户对内容进行共享,从而提升视频的浏览量。In the embodiment of the present invention, after the video content is inserted into the H5 webpage, the user may click on the display screen of the terminal to trigger the playback of the video content, or may trigger the playback of the video content according to a predetermined trigger condition, for example, inserting the video content into the video content. After the H5 web page is waiting for the preset length of time, the video can be automatically played, or the camera of the terminal detects the user's gesture or facial motion, thereby triggering the video content to be played. In the embodiment of the present invention, the video content can be played on the H5 page visible window. And hide the video player button on the H5 page visible window. In the embodiment of the present invention, the video player button floats on the H5 page visible window on the H5 webpage, and when the video content is played, the video player button is automatically hidden from the H5 page visible window, which is related to the prior art. The control component on the video player on the video player hides the control component when the user clicks on the full-screen playback. The control component on the video player usually needs to be hidden after the user operates, when the user operates the video player again. It will be displayed again. In the embodiment of the present invention, the video player button is hidden on the H5 page visible window of the H5 webpage, and the video player button and the H5 page visible window are all components of the H5 page, when the video player button is hidden, On the H5 webpage, only the full-screen H5 page visible window is displayed. The video content played in the visible window of the H5 page is not in the video content, but the entire H5 page is in full-screen activity, which makes the user immersive. In the scenes to be displayed in the video content, the user is immersed, and the video content is displayed through the H5 webpage, so that the user can share the content, thereby improving the video browsing amount.
在本发明的一些实施例中,步骤103中的在H5页面可视窗口上隐藏视频 播放器按钮,包括:In some embodiments of the invention, the video player button is hidden on the H5 page visible window in step 103, including:
C1、在显示屏幕上将H5页面可视窗口放大,并按照放大后的H5页面可视窗口调整视频播放器按钮在H5网页的位置,使得调整后的视频播放器按钮的位置超出显示屏幕之外。C1, enlarge the H5 page visible window on the display screen, and adjust the position of the video player button on the H5 webpage according to the enlarged H5 page visible window, so that the adjusted video player button position is beyond the display screen. .
其中,本发明实施例中可以使用HTML5代码与错位截断的方式隐藏视频播放器按钮,将播放视频的H5页面可视窗口放大,刚好使得视频播放器按钮在H5网页的位置比例超出H5页面可视窗口,视频播放器按钮在H5页面可视窗口之外,因此在H5网页上是看不到的,相当于H5页面可视窗口将视频播放器按钮截断了,用户通过H5页面可视窗口可以全屏的看到视频内容的播放,通过隐藏视频播放器按钮,使得用户感觉整个H5网页再跟用户互动,而并不是简单的视频播放。In the embodiment of the present invention, the HTML5 code and the misalignment truncation can be used to hide the video player button, and the H5 page visible window of the played video is enlarged, which just makes the position of the video player button in the H5 webpage exceed the H5 page. Window, video player button is outside the H5 page visible window, so it is not visible on the H5 webpage. It is equivalent to the H5 page visual window to cut off the video player button. The user can full screen through the H5 page visible window. By seeing the playback of the video content, by hiding the video player button, the user feels that the entire H5 webpage interacts with the user, rather than a simple video playback.
在本发明的一些实施例中,步骤103中的在H5页面可视窗口上播放视频内容之后,本发明实施例提供的基于H5的页面显示方法,还包括如下步骤:In some embodiments of the present invention, after the video content is played on the H5 page visible window in step 103, the H5-based page display method provided by the embodiment of the present invention further includes the following steps:
D1、在视频内容播放过程中,暂停视频内容的视频播放并隐藏H5页面可视窗口;D1, during the playback of the video content, pause the video playback of the video content and hide the H5 page visible window;
D2、当H5页面可视窗口从H5网页上隐藏之后,在H5网页上显示交互操作页面。D2. After the H5 page visible window is hidden from the H5 webpage, the interactive operation page is displayed on the H5 webpage.
其中,在视频内容播放过程中,还可以根据预先设计的视频内容中的暂停指示来暂停视频内容的视频播放,此时还可以从H5网页上隐藏H5页面可视窗口,本发明实施例中视频内容的暂停方式可以由视频内容的内容画面来确定,例如,在视频内容中插入有二维码图片,当用户扫描该二维码图片时可以暂停视频内容的视频播放,将H5页面可视窗口从H5网页上隐藏起来。当H5页面可视窗口从H5网页上隐藏之后,在H5网页上显示交互操作页面,其中,交互操作页面是指观看视频内容的用户与H5网页进行互动的操作页面,例如该操作页面上可以设置一些互动按钮,用户点击不同的互动按钮可以弹出不同的对话框,或者显示不同的信息展示界面。举例说明如下,视频内容可以使用模拟购物场景的方式,比如模拟用户浏览购物网站并通过一定操作添加趣味性交互,使得用户仿佛置身于购物第一人称的视角浏览中,就像用户自己在浏览购物网站,并添加商品到购物车的过程,在H5网页中显示如此复杂的页面交 互过程,现有技术中通常采用的方式就是制作H5网页中的多个元素,通过多个元素的拼合来完成页面交互,这必然需要耗用大量的内存资源,并且制作网页的成本也很高,制作效率不高,本发明实施例中通过在H5网页上插入视频内容,通过视频内容的全屏播放并且隐藏视频播放器按钮,就可以完成页面交互过程,降低了网页的制作成本,提网页的制作效率。In the video content playing process, the video content of the video content may be paused according to the pause indication in the pre-designed video content. In this case, the H5 page visible window may also be hidden from the H5 webpage. The pause mode of the content may be determined by the content screen of the video content. For example, a two-dimensional code picture is inserted in the video content, and when the user scans the two-dimensional code picture, the video content of the video content may be paused, and the H5 page visible window is displayed. Hidden from the H5 page. After the H5 page visible window is hidden from the H5 webpage, the interactive operation page is displayed on the H5 webpage, wherein the interactive operationpage refers to an operation page for the user who views the video content to interact with the H5 webpage, for example, the operation page can be set. Some interactive buttons, the user clicks on different interactive buttons to pop up different dialog boxes, or display different information display interfaces. For example, the video content can be used to simulate a shopping scene, such as simulating a user browsing a shopping website and adding interesting interactions through certain operations, so that the user feels like being in the first-person perspective browsing of the shopping, just as the user himself is browsing the shopping website. And adding the product to the shopping cart process, displaying such a complicated page interaction process in the H5 webpage, the commonly used method in the prior art is to create multiple elements in the H5 webpage, and complete the page interaction through the flattening of multiple elements. This inevitably requires a large amount of memory resources, and the cost of creating a webpage is also high, and the production efficiency is not high. In the embodiment of the present invention, the video content is inserted on the H5 webpage, the full-screen playback of the video content is performed, and the video player is hidden. With the button, the page interaction process can be completed, the production cost of the webpage is reduced, and the production efficiency of the webpage is improved.
进一步的,在本发明的一些实施例中,在前述执行步骤D1和步骤D2的实现场景下,本发明实施例提供的基于H5的页面显示方法,还包括如下步骤:Further, in some embodiments of the present invention, in the implementation scenario of performing the step D1 and the step D2, the H5-based page display method provided by the embodiment of the present invention further includes the following steps:
E1、暂停视频内容的视频播放并隐藏H5页面可视窗口之后,继续播放视频内容对应的音频内容。E1. After the video of the video content is paused and the H5 page visible window is hidden, the audio content corresponding to the video content is continued to be played.
其中,暂停视频内容的视频播放并隐藏H5页面可视窗口之后,若该视频内容中还包括有相应的音频内容,则在视频播放暂停之后,可以在终端的后台机械播放音频内容,例如在步骤D2执行时,在H5网页上显示交互操作页面,同时在终端的后台机械播放音频内容,从而实现更好的互动效果,举例说明,视频内容可以使用模拟购物场景的方式,比如模拟用户浏览购物网站并通过一定操作添加趣味性交互,使得用户仿佛置身于购物第一人称的视角浏览中,就像用户自己在浏览购物网站,并添加商品到购物车的过程,用户一边对交互操作页面进行手动操作,同时终端还在继续播放音频内容,使用户感觉到交互操作在同步进行时仍有语音指导,更有利于提升终端与用户的互动效果。After the video content of the video content is paused and the H5 page visible window is hidden, if the video content further includes corresponding audio content, after the video playback is paused, the audio content may be mechanically played in the background of the terminal, for example, in the step. When D2 is executed, the interactive operation page is displayed on the H5 webpage, and the audio content is mechanically played in the background of the terminal, thereby achieving better interaction effect. For example, the video content can use a simulated shopping scene, such as simulating a user browsing the shopping website. And adding interesting interactions through certain operations, so that the user seems to be in the first-person perspective browsing of the shopping, just like the user himself browsing the shopping website and adding the goods to the shopping cart, the user manually operates the interactive operation page. At the same time, the terminal continues to play the audio content, so that the user feels that the interactive operation still has voice guidance while being synchronized, which is more beneficial to enhance the interaction effect between the terminal and the user.
通过以上实施例对本发明实施例的描述可知,在终端的显示屏幕上加载第五代超文本标记语言H5网页,H5网页包括:H5页面可视窗口和浮动在H5页面可视窗口上的视频播放器按钮,在H5网页上插入待显示的视频内容,视频内容显示在H5页面可视窗口上,当视频内容被触发播放时,在H5页面可视窗口上播放视频内容,并在H5页面可视窗口上隐藏视频播放器按钮。本发明实施例通过在H5网页上插入视频内容来实现H5页面的制作,不需要使用多个页面元素,不存在页面拼合的问题,降低了网页制作的成本和制作时间,另外本发明实施例在播放视频内容的时候,可以将视频播放器按钮屏蔽,则用户在浏览H5页面时,不会感觉自己在看视频而是H5页面在活动,让用户可以沉浸在视频内容所要传播的场景,提升用户体验,而通过H5页面播放视频内容,便于用户进行共享,可以让更多的用户看到视频内容,提升视频的浏览 量。为便于更好的理解和实施本发明实施例的上述方案,下面举例相应的应用场景来进行具体说明。According to the description of the embodiments of the present invention, the fifth generation hypertext markup language H5 webpage is loaded on the display screen of the terminal, and the H5 webpage includes: a H5 page visible window and a video play floating on the H5 page visible window. Button, insert the video content to be displayed on the H5 webpage, and the video content is displayed on the H5 page visible window. When the video content is triggered to play, the video content is played on the H5 page visible window and visible on the H5 page. The video player button is hidden on the window. The embodiment of the present invention realizes the creation of the H5 page by inserting the video content on the H5 webpage, does not need to use multiple page elements, does not have the problem of page flattening, reduces the cost of webpage production and the production time, and the embodiment of the present invention is When the video content is played, the video player button can be shielded. When the user browses the H5 page, the user does not feel that he is watching the video but the H5 page is active, so that the user can immerse in the scene to be spread by the video content, and enhance the user. Experience, and play video content through the H5 page, which is convenient for users to share, so that more users can see the video content and improve the video browsing. To facilitate a better understanding and implementation of the foregoing solutions of the embodiments of the present invention, the following application scenarios are specifically illustrated.
本发明实施例中,在HTML5网页内插入视频元素,视频元素对应HTML5中的VIDEO标签,HTML5技术允许在网页中插入视频元素,可以把视频文件放入H5网页中播放与展现,因为是浏览器支持的HTML5技术而不需要额外安装消耗过多内存的视频播放器,解决了普通HTML5网页制作成本高、时间消耗大的问题。另外,如果将普通视频在移动端直接插入播放的话,有播放控制按钮,用户明确知道是在播放一个视频,导致仅仅能够观看视频的单一性体验,本发明实施例中隐藏视频播放器按钮,从而使用户感觉是终端在与自己互动,提升用户的视觉感受。In the embodiment of the present invention, a video element is inserted in an HTML5 webpage, and the video element corresponds to a VIDEO tag in the HTML5. The HTML5 technology allows a video element to be inserted into the webpage, and the video file can be played and displayed in the H5 webpage because it is a browser. The supported HTML5 technology does not require the installation of a video player that consumes too much memory, which solves the problem of high cost and high time consumption of ordinary HTML5 webpages. In addition, if the normal video is directly inserted and played on the mobile terminal, there is a play control button, and the user explicitly knows that a video is being played, resulting in a single-sex experience that can only watch the video. In the embodiment of the present invention, the video player button is hidden. The user feels that the terminal is interacting with himself to enhance the user's visual experience.
下面将结合一个互动场景,给出实现本发明的技术方案的完整实现流程,请参阅图2所示,为本发明实施例提供的基于H5的流程交互示意图,主要包括如下过程:The following is a schematic diagram of a complete implementation process of implementing the technical solution of the present invention in conjunction with an interactive scenario. Referring to FIG. 2, a schematic diagram of an H5-based process interaction according to an embodiment of the present invention includes the following processes:
1、在用户进入网页时,将视频内容插入到H5网页的第一屏,对视频内容进行横向100%的缩放,纵向等比自适应的缩放,视频内容的制作过程中要求视频宽高比满足:高度大于宽度,如图3所示,为本发明实施例提供的一种在H5网页上插入视频内容的实现场景示意图,图3中的网页即为H5网页,图3中的Video视频为视频内容,将Video视频插入到网页,需要对Video视频进行缩放,但是保持视频宽高比不变,以保证视频内容的正常显示。1. When the user enters the webpage, the video content is inserted into the first screen of the H5 webpage, and the video content is horizontally scaled by 100%, and the vertical ratio is adaptively scaled. The video aspect ratio is required to satisfy the video aspect ratio during the production of the video content. The height is greater than the width. As shown in FIG. 3, it is a schematic diagram of an implementation scenario of inserting video content on a H5 webpage according to an embodiment of the present invention. The webpage in FIG. 3 is an H5 webpage, and the video video in FIG. 3 is a video. Content, insert Video video into the webpage, you need to scale the Video video, but keep the video aspect ratio unchanged to ensure the normal display of the video content.
2、使用HTML5代码与错位截断的方式隐藏视频播放器按钮,将播放视频放大刚好播放器按钮的位置比例超出可视窗口,如图4所示,为本发明实施例提供的隐藏视频播放器按钮的实现场景示意图。视频播放器按钮简称为播放器按钮,H5页面可视窗口简称为可视窗口,在H5网页上,播放器按钮浮动于可视窗口上,例如,播放器按钮可以设置于可视窗口的上端位置,该播放器按钮也可以设置于可视窗口的下端位置,该播放器按钮也可以同时设置在可视窗口的上端位置和下端位置,上端位置和下端位置设置不同的播放器按钮的控制组件。由图4可知,播放器按钮在可视窗口之外,用户是看不到的播放器按钮的,相当于可视窗口将播放器按钮截断,从图4可以看出播放器按钮在可视窗口的区域之外。2, using the HTML5 code and the misalignment truncation to hide the video player button, the playback video is enlarged, just the position of the player button is out of the visible window, as shown in FIG. 4, which is a hidden video player button provided by the embodiment of the present invention. Schematic diagram of the implementation scenario. The video player button is simply referred to as a player button, and the H5 page visible window is simply referred to as a visible window. On the H5 web page, the player button floats on the visible window. For example, the player button can be placed at the upper end of the visible window. The player button can also be disposed at a lower end position of the visible window. The player button can also be disposed at the upper end position and the lower end position of the visible window at the same time, and the upper end position and the lower end position are set with different control buttons of the player button. As can be seen from FIG. 4, the player button is outside the visible window, and the user does not see the player button, which is equivalent to the visual window to cut off the player button. From FIG. 4, it can be seen that the player button is in the visible window. Outside the area.
3、视频内容的制作与创意环境模拟,视频内容的制作过程中,使用模拟其他场景的方式,例如制作的视频内容可以是模拟自己是韩寒并在刷微博,比如截取韩寒的微博并通过一定操作(例如添加互动的接口,比如播放到哪个位置,跳出其他页面交互行为,都可以灵活自定义)添加趣味性交互在微信、手Q中传播浏览,模拟仿佛置身于微博第一人称的视角浏览中。3, video content production and creative environment simulation, video content production process, the use of simulation of other scenes, such as the production of video content can be simulated themselves Han Han and brush microblogging, such as intercepting Han Han's Weibo and passed Certain operations (such as adding interactive interfaces, such as playing to which location, jumping out of other page interactions, can be flexible and customizable) Add interesting interactions in WeChat, hand Q to browse, simulation as if to be in the first person perspective of Weibo Browsing.
4、当视频内容播放到某一个时刻时,在H5网页的第一屏上隐藏视频,音频收尾续播,最后展示交互操作页面,例如在H5网页的第二屏展示交互操作页面。举例说明,本发明实施例中H5网页上播放视频内容,可以是观看者和移动终端之间的交互,以制作的视频内容为模拟韩寒刷微博行为,用户通过终端的显示屏幕感觉到韩寒在说话,然后播放到某个区域,韩寒说可以参加某个活动,页面会跳出活动按钮让用户点击进行互动操作,从而实现用户与终端的互动。4. When the video content is played to a certain moment, the video is hidden on the first screen of the H5 webpage, the audio is finished, and the interactive operation page is displayed, for example, the interactive screen is displayed on the second screen of the H5 webpage. For example, in the embodiment of the present invention, the video content played on the H5 webpage may be an interaction between the viewer and the mobile terminal, and the generated video content is a simulated Han Han brush microblogging behavior, and the user feels Han Han through the display screen of the terminal. Speak and then play to an area, Han Han said that you can participate in an activity, the page will jump out of the activity button to let the user click to interact, thus achieving user interaction with the terminal.
本发明实施例通过在HTML5网页内插入视频元素,屏蔽视频播放器按钮来模拟视频显示行为为普通网页,并播放互动操作页面,通过整屏的模拟用户不会感觉自己是在看视频而是H5网页在“动”,增强用户体验和互动性。In the embodiment of the present invention, by inserting a video element in an HTML5 webpage, the video player button is blocked to simulate a video display behavior as an ordinary webpage, and an interactive operation page is played, and the simulated user through the whole screen does not feel that he is watching the video but H5. The webpage is "moving" to enhance user experience and interactivity.
需要说明的是,对于前述的各方法实施例,为了简单描述,故将其都表述为一系列的动作组合,但是本领域技术人员应该知悉,本发明并不受所描述的动作顺序的限制,因为依据本发明,某些步骤可以采用其他顺序或者同时进行。其次,本领域技术人员也应该知悉,说明书中所描述的实施例均属于优选实施例,所涉及的动作和模块并不一定是本发明所必须的。It should be noted that, for the foregoing method embodiments, for the sake of simple description, they are all expressed as a series of action combinations, but those skilled in the art should understand that the present invention is not limited by the described action sequence. Because certain steps may be performed in other sequences or concurrently in accordance with the present invention. In addition, those skilled in the art should also understand that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the present invention.
为便于更好的实施本发明实施例的上述方案,下面还提供用于实施上述方案的相关装置。In order to facilitate the implementation of the above solution of the embodiments of the present invention, related devices for implementing the above solutions are also provided below.
请参阅图5-a所示,本发明实施例提供的一种终端500,可以包括:网页加载模块501、视频插入模块502和显示控制模块503,其中,Referring to FIG. 5-a, a terminal 500 according to an embodiment of the present invention may include: a webpage loading module 501, a video insertion module 502, and a display control module 503, where
网页加载模块501,用于在终端的显示屏幕上加载第五代超文本标记语言H5网页,所述H5网页包括:H5页面可视窗口和浮动在所述H5页面可视窗口上的视频播放器按钮;The webpage loading module 501 is configured to load a fifth generation hypertext markup language H5 webpage on the display screen of the terminal, where the H5 webpage comprises: a H5 page visible window and a video player floating on the H5 page visible window Button
视频插入模块502,用于在所述H5网页上插入待显示的视频内容,所述视频内容显示在所述H5页面可视窗口上;a video insertion module 502, configured to insert video content to be displayed on the H5 webpage, where the video content is displayed on the H5 page visible window;
显示控制模块503,用于当所述视频内容被触发播放时,在所述H5页面可视窗口上播放所述视频内容,并在所述H5页面可视窗口上隐藏所述视频播放器按钮。The display control module 503 is configured to play the video content on the H5 page visible window when the video content is triggered to play, and hide the video player button on the H5 page visible window.
在本发明的一些实施例中,所述视频内容的高度大于所述视频内容的宽度,所述视频插入模块,具体用于将所述待显示的视频内容插入到所述H5页面可视窗口;按照所述H5页面可视窗口的宽度对所述视频内容的宽度进行缩放,并按照缩放后的视频内容的宽度等比例缩放视频内容的高度。In some embodiments of the present invention, the height of the video content is greater than the width of the video content, and the video insertion module is specifically configured to insert the video content to be displayed into the H5 page visible window; The width of the video content is scaled according to the width of the H5 page visible window, and the height of the video content is scaled according to the width of the scaled video content.
在本发明的一些实施例中,所述网页加载模块501,具体用于检测所述终端的显示屏幕上产生的触摸事件;根据所述触摸事件在所述显示屏幕上加载H5网页。In some embodiments of the present invention, the webpage loading module 501 is specifically configured to detect a touch event generated on a display screen of the terminal; and load an H5 webpage on the display screen according to the touch event.
在本发明的一些实施例中,所述显示控制模块503,具体用于在所述显示屏幕上将所述H5页面可视窗口放大,在放大后的H5页面可视窗口上播放所述视频内容,并按照放大后的H5页面可视窗口调整所述视频播放器按钮在所述H5网页的位置,使得调整后的视频播放器按钮的位置超出所述显示屏幕之外。In some embodiments of the present invention, the display control module 503 is specifically configured to enlarge the H5 page visible window on the display screen, and play the video content on the enlarged H5 page visible window. And adjusting the position of the video player button on the H5 webpage according to the enlarged H5 page visible window, so that the position of the adjusted video player button is beyond the display screen.
在本发明的一些实施例中,所述显示控制模块503,还用于在所述H5页面可视窗口上播放所述视频内容之后,在所述视频内容播放过程中,暂停所述视频内容的视频播放并隐藏所述H5页面可视窗口;当所述H5页面可视窗口从所述H5网页上隐藏之后,在所述H5网页上显示交互操作页面。In some embodiments of the present invention, the display control module 503 is further configured to pause the video content during the playing of the video content after playing the video content on the H5 page visible window. The video plays and hides the H5 page visible window; after the H5 page visible window is hidden from the H5 webpage, an interactive operation page is displayed on the H5 webpage.
进一步的,在本发明的一些实施例中,如图5-b所示,所述终端500,还包括:音频播放模块504,用于所述显示控制模块503暂停所述视频内容的视频播放并隐藏所述H5页面可视窗口之后,继续播放所述视频内容对应的音频内容。Further, in some embodiments of the present invention, as shown in FIG. 5-b, the terminal 500 further includes: an audio playing module 504, configured to pause the video playback of the video content by the display control module 503. After hiding the H5 page visible window, the audio content corresponding to the video content is continued to be played.
通过以上对本发明实施例的描述可知,通过以上实施例对本发明实施例的描述可知,在终端的显示屏幕上加载第五代超文本标记语言H5网页,H5网页包括:H5页面可视窗口和浮动在H5页面可视窗口上的视频播放器按钮,在H5网页上插入待显示的视频内容,视频内容显示在H5页面可视窗口上,当视频内容被触发播放时,在H5页面可视窗口上播放视频内容,并在H5页面可视窗口上隐藏视频播放器按钮。本发明实施例通过在H5网页上插入视频 内容来实现H5页面的制作,不需要使用多个页面元素,不存在页面拼合的问题,降低了网页制作的成本和制作时间,另外,本发明实施例在播放视频内容的时候,可以将视频播放器按钮屏蔽,则用户在浏览H5页面时,不会感觉自己在看视频而是H5页面在活动,让用户可以沉浸在视频内容所要传播的场景,提升用户体验。本发明实施例还提供了另一种终端,如图6所示,为了便于说明,仅示出了与本发明实施例相关的部分,具体技术细节未揭示的,请参照本发明实施例方法部分。该终端可以为包括手机、平板电脑、PDA(Personal Digital Assistant,个人数字助理)、POS(Point of Sales,销售终端)、车载电脑等任意终端设备,以终端为手机为例:Through the above description of the embodiments of the present invention, it can be seen from the description of the embodiments of the present invention that the fifth generation hypertext markup language H5 webpage is loaded on the display screen of the terminal, and the H5 webpage includes: H5 page visible window and floating The video player button on the H5 page visible window inserts the video content to be displayed on the H5 webpage, and the video content is displayed on the H5 page visible window. When the video content is triggered to be played, on the H5 page visible window. Play the video content and hide the video player button on the H5 page visible window. The embodiment of the present invention implements the creation of the H5 page by inserting the video content on the H5 webpage, does not need to use multiple page elements, does not have the problem of page flattening, reduces the cost of webpage production and the production time, and further, the embodiment of the present invention When the video content is played, the video player button can be shielded. When the user browses the H5 page, the user does not feel that he is watching the video but the H5 page is active, so that the user can immerse in the scene to be spread by the video content, and improve user experience. The embodiment of the present invention further provides another terminal. As shown in FIG. 6 , for the convenience of description, only parts related to the embodiment of the present invention are shown. If the specific technical details are not disclosed, please refer to the method part of the embodiment of the present invention. . The terminal may be any terminal device including a mobile phone, a tablet computer, a PDA (Personal Digital Assistant), a POS (Point of Sales), an in-vehicle computer, and the terminal is a mobile phone as an example:
图6示出的是与本发明实施例提供的终端相关的手机的部分结构的框图。参考图6,手机包括:射频(Radio Frequency,RF)电路1010、存储器1020、输入单元1030、显示单元1040、传感器1050、音频电路1060、无线保真(wireless fidelity,WiFi)模块1070、处理器1080、以及电源1090等部件。本领域技术人员可以理解,图6中示出的手机结构并不构成对手机的限定,可以包括比图示更多或更少的部件,或者组合某些部件,或者不同的部件布置。FIG. 6 is a block diagram showing a partial structure of a mobile phone related to a terminal provided by an embodiment of the present invention. Referring to FIG. 6, the mobile phone includes: a radio frequency (RF) circuit 1010, a memory 1020, an input unit 1030, a display unit 1040, a sensor 1050, an audio circuit 1060, a wireless fidelity (WiFi) module 1070, and a processor 1080. And power supply 1090 and other components. It will be understood by those skilled in the art that the structure of the handset shown in FIG. 6 does not constitute a limitation to the handset, and may include more or less components than those illustrated, or some components may be combined, or different components may be arranged.
下面结合图6对手机的各个构成部件进行具体的介绍:The following describes the components of the mobile phone in detail with reference to FIG. 6:
RF电路1010可用于收发信息或通话过程中,信号的接收和发送,特别地,将基站的下行信息接收后,给处理器1080处理;另外,将设计上行的数据发送给基站。通常,RF电路1010包括但不限于天线、至少一个放大器、收发信机、耦合器、低噪声放大器(Low Noise Amplifier,LNA)、双工器等。此外,RF电路1010还可以通过无线通信与网络和其他设备通信。上述无线通信可以使用任一通信标准或协议,包括但不限于全球移动通讯系统(Global System of Mobile communication,GSM)、通用分组无线服务(General Packet Radio Service,GPRS)、码分多址(Code Division Multiple Access,CDMA)、宽带码分多址(Wideband Code Division Multiple Access,WCDMA)、长期演进(Long Term Evolution,LTE)、电子邮件、短消息服务(Short Messaging Service,SMS)等。The RF circuit 1010 can be used for receiving and transmitting signals during the transmission or reception of information or during a call. In particular, after receiving the downlink information of the base station, it is processed by the processor 1080. In addition, the uplink data is designed to be sent to the base station. Generally, RF circuit 1010 includes, but is not limited to, an antenna, at least one amplifier, a transceiver, a coupler, a Low Noise Amplifier (LNA), a duplexer, and the like. In addition, RF circuit 1010 can also communicate with the network and other devices via wireless communication. The above wireless communication may use any communication standard or protocol, including but not limited to Global System of Mobile communication (GSM), General Packet Radio Service (GPRS), Code Division Multiple Access (Code Division). Multiple Access (CDMA), Wideband Code Division Multiple Access (WCDMA), Long Term Evolution (LTE), E-mail, Short Messaging Service (SMS), and the like.
存储器1020可用于存储软件程序以及模块,处理器1080通过运行存储在存储器1020的软件程序以及模块,从而执行手机的各种功能应用以及数据处 理。存储器1020可主要包括存储程序区和存储数据区,其中,存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等;存储数据区可存储根据手机的使用所创建的数据(比如音频数据、电话本等)等。此外,存储器1020可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。The memory 1020 can be used to store software programs and modules, and the processor 1080 executes various functional applications and data processing of the mobile phone by running software programs and modules stored in the memory 1020. The memory 1020 may mainly include a storage program area and a storage data area, wherein the storage program area may store an operating system, an application required for at least one function (such as a sound playing function, an image playing function, etc.), and the like; the storage data area may be stored according to Data created by the use of the mobile phone (such as audio data, phone book, etc.). Moreover, memory 1020 can include high speed random access memory, and can also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, or other volatile solid state storage device.
输入单元1030可用于接收输入的数字或字符信息,以及产生与手机的用户设置以及功能控制有关的键信号输入。具体地,输入单元1030可包括触控面板1031以及其他输入设备1032。触控面板1031,也称为触摸屏,可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触控面板1031上或在触控面板1031附近的操作),并根据预先设定的程式驱动相应的连接装置。可选的,触控面板1031可包括触摸检测装置和触摸控制器两个部分。其中,触摸检测装置检测用户的触摸方位,并检测触摸操作带来的信号,将信号传送给触摸控制器;触摸控制器从触摸检测装置上接收触摸信息,并将它转换成触点坐标,再送给处理器1080,并能接收处理器1080发来的命令并加以执行。此外,可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触控面板1031。除了触控面板1031,输入单元1030还可以包括其他输入设备1032。具体地,其他输入设备1032可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆等中的一种或多种。The input unit 1030 can be configured to receive input numeric or character information and to generate key signal inputs related to user settings and function controls of the handset. Specifically, the input unit 1030 may include a touch panel 1031 and other input devices 1032. The touch panel 1031, also referred to as a touch screen, can collect touch operations on or near the user (such as the user using a finger, a stylus, or the like on the touch panel 1031 or near the touch panel 1031. Operation), and drive the corresponding connecting device according to a preset program. Optionally, the touch panel 1031 may include two parts: a touch detection device and a touch controller. Wherein, the touch detection device detects the touch orientation of the user, and detects a signal brought by the touch operation, and transmits the signal to the touch controller; the touch controller receives the touch information from the touch detection device, converts the touch information into contact coordinates, and sends the touch information. The processor 1080 is provided and can receive commands from the processor 1080 and execute them. In addition, the touch panel 1031 can be implemented in various types such as resistive, capacitive, infrared, and surface acoustic waves. In addition to the touch panel 1031, the input unit 1030 may also include other input devices 1032. Specifically, other input devices 1032 may include, but are not limited to, one or more of a physical keyboard, function keys (such as volume control buttons, switch buttons, etc.), trackballs, mice, joysticks, and the like.
显示单元1040可用于显示由用户输入的信息或提供给用户的信息以及手机的各种菜单。显示单元1040可包括显示面板1041,可选的,可以采用液晶显示器(Liquid Crystal Display,LCD)、有机发光二极管(Organic Light-Emitting Diode,OLED)等形式来配置显示面板1041。进一步的,触控面板1031可覆盖显示面板1041,当触控面板1031检测到在其上或附近的触摸操作后,传送给处理器1080以确定触摸事件的类型,随后处理器1080根据触摸事件的类型在显示面板1041上提供相应的视觉输出。虽然在图6中,触控面板1031与显示面板1041是作为两个独立的部件来实现手机的输入和输入功能,但是在某些实施例中,可以将触控面板1031与显示面板1041集成而实现手机的输入和 输出功能。The display unit 1040 can be used to display information input by the user or information provided to the user as well as various menus of the mobile phone. The display unit 1040 may include a display panel 1041. Alternatively, the display panel 1041 may be configured in the form of a liquid crystal display (LCD), an organic light-emitting diode (OLED), or the like. Further, the touch panel 1031 may cover the display panel 1041, and when the touch panel 1031 detects a touch operation thereon or nearby, the touch panel 1031 transmits to the processor 1080 to determine the type of the touch event, and then the processor 1080 according to the touch event. The type provides a corresponding visual output on display panel 1041. Although the touch panel 1031 and the display panel 1041 are used as two independent components to implement the input and input functions of the mobile phone in FIG. 6, in some embodiments, the touch panel 1031 and the display panel 1041 may be integrated. Realize the input and output functions of the phone.
手机还可包括至少一种传感器1050,比如光传感器、运动传感器以及其他传感器。具体地,光传感器可包括环境光传感器及接近传感器,其中,环境光传感器可根据环境光线的明暗来调节显示面板1041的亮度,接近传感器可在手机移动到耳边时,关闭显示面板1041和/或背光。作为运动传感器的一种,加速计传感器可检测各个方向上(一般为三轴)加速度的大小,静止时可检测出重力的大小及方向,可用于识别手机姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等;至于手机还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器,在此不再赘述。The handset can also include at least one type of sensor 1050, such as a light sensor, motion sensor, and other sensors. Specifically, the light sensor may include an ambient light sensor and a proximity sensor, wherein the ambient light sensor may adjust the brightness of the display panel 1041 according to the brightness of the ambient light, and the proximity sensor may close the display panel 1041 and/or when the mobile phone moves to the ear. Or backlight. As a kind of motion sensor, the accelerometer sensor can detect the magnitude of acceleration in all directions (usually three axes). When it is stationary, it can detect the magnitude and direction of gravity. It can be used to identify the gesture of the mobile phone (such as horizontal and vertical screen switching, related Game, magnetometer attitude calibration), vibration recognition related functions (such as pedometer, tapping), etc.; as for the mobile phone can also be configured with gyroscopes, barometers, hygrometers, thermometers, infrared sensors and other sensors, no longer Narration.
音频电路1060、扬声器1061,传声器1062可提供用户与手机之间的音频接口。音频电路1060可将接收到的音频数据转换后的电信号,传输到扬声器1061,由扬声器1061转换为声音信号输出;另一方面,传声器1062将收集的声音信号转换为电信号,由音频电路1060接收后转换为音频数据,再将音频数据输出处理器1080处理后,经RF电路1010以发送给比如另一手机,或者将音频数据输出至存储器1020以便进一步处理。An audio circuit 1060, a speaker 1061, and a microphone 1062 can provide an audio interface between the user and the handset. The audio circuit 1060 can transmit the converted electrical data of the received audio data to the speaker 1061, and convert it into a sound signal output by the speaker 1061; on the other hand, the microphone 1062 converts the collected sound signal into an electrical signal, by the audio circuit 1060. After receiving, it is converted into audio data, and then processed by the audio data output processor 1080, sent to the other mobile phone via the RF circuit 1010, or outputted to the memory 1020 for further processing.
WiFi属于短距离无线传输技术,手机通过WiFi模块1070可以帮助用户收发电子邮件、浏览网页和访问流式媒体等,它为用户提供了无线的宽带互联网访问。虽然图6示出了WiFi模块1070,但是可以理解的是,其并不属于手机的必须构成,完全可以根据需要在不改变发明的本质的范围内而省略。WiFi is a short-range wireless transmission technology. The mobile phone through the WiFi module 1070 can help users to send and receive e-mail, browse the web and access streaming media, etc. It provides users with wireless broadband Internet access. Although FIG. 6 shows the WiFi module 1070, it can be understood that it does not belong to the essential configuration of the mobile phone, and may be omitted as needed within the scope of not changing the essence of the invention.
处理器1080是手机的控制中心,利用各种接口和线路连接整个手机的各个部分,通过运行或执行存储在存储器1020内的软件程序和/或模块,以及调用存储在存储器1020内的数据,执行手机的各种功能和处理数据,从而对手机进行整体监控。可选的,处理器1080可包括一个或多个处理单元;优选的,处理器1080可集成应用处理器和调制解调处理器,其中,应用处理器主要处理操作系统、用户界面和应用程序等,调制解调处理器主要处理无线通信。可以理解的是,上述调制解调处理器也可以不集成到处理器1080中。The processor 1080 is the control center of the handset, which connects various portions of the entire handset using various interfaces and lines, by executing or executing software programs and/or modules stored in the memory 1020, and invoking data stored in the memory 1020, The phone's various functions and processing data, so that the overall monitoring of the phone. Optionally, the processor 1080 may include one or more processing units; preferably, the processor 1080 may integrate an application processor and a modem processor, where the application processor mainly processes an operating system, a user interface, an application, and the like. The modem processor primarily handles wireless communications. It will be appreciated that the above described modem processor may also not be integrated into the processor 1080.
手机还包括给各个部件供电的电源1090(比如电池),优选的,电源可以通过电源管理系统与处理器1080逻辑相连,从而通过电源管理系统实现管理 充电、放电、以及功耗管理等功能。The handset also includes a power source 1090 (such as a battery) that supplies power to the various components. Preferably, the power source can be logically coupled to the processor 1080 through a power management system to manage charging, discharging, and power management functions through the power management system.
尽管未示出,手机还可以包括摄像头、蓝牙模块等,在此不再赘述。Although not shown, the mobile phone may further include a camera, a Bluetooth module, and the like, and details are not described herein again.
在本发明实施例中,该终端所包括的处理器1080还具有控制执行以上由终端执行的基于H5的页面显示方法流程。In the embodiment of the present invention, the processor 1080 included in the terminal further has a flow of controlling the execution of the H5-based page display method executed by the terminal.
另外需说明的是,以上所描述的装置实施例仅仅是示意性的,其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。另外,本发明提供的装置实施例附图中,模块之间的连接关系表示它们之间具有通信连接,具体可以实现为一条或多条通信总线或信号线。本领域普通技术人员在不付出创造性劳动的情况下,即可以理解并实施。It should be further noted that the device embodiments described above are merely illustrative, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be Physical units can be located in one place or distributed to multiple network elements. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the embodiment. In addition, in the drawings of the device embodiments provided by the present invention, the connection relationship between the modules indicates that there is a communication connection between them, and specifically, one or more communication buses or signal lines can be realized. Those of ordinary skill in the art can understand and implement without any creative effort.
通过以上的实施方式的描述,所属领域的技术人员可以清楚地了解到本发明可借助软件加必需的通用硬件的方式来实现,当然也可以通过专用硬件包括专用集成电路、专用CPU、专用存储器、专用元器件等来实现。一般情况下,凡由计算机程序完成的功能都可以很容易地用相应的硬件来实现,而且,用来实现同一功能的具体硬件结构也可以是多种多样的,例如模拟电路、数字电路或专用电路等。但是,对本发明而言更多情况下软件程序实现是更佳的实施方式。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品存储在可读取的存储介质中,如计算机的软盘、U盘、移动硬盘、只读存储器(ROM,Read-Only Memory)、随机存取存储器(RAM,Random Access Memory)、磁碟或者光盘等,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本发明各个实施例所述的方法。Through the description of the above embodiments, those skilled in the art can clearly understand that the present invention can be implemented by means of software plus necessary general hardware, and of course, dedicated hardware, dedicated CPU, dedicated memory, dedicated memory, Special components and so on. In general, functions performed by computer programs can be easily implemented with the corresponding hardware, and the specific hardware structure used to implement the same function can be various, such as analog circuits, digital circuits, or dedicated circuits. Circuits, etc. However, for the purposes of the present invention, software program implementation is a better implementation in more cases. Based on the understanding, the technical solution of the present invention, which is essential or contributes to the prior art, can be embodied in the form of a software product stored in a readable storage medium, such as a floppy disk of a computer. , U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk, etc., including a number of instructions to make a computer device (may be A personal computer, server, or network device, etc.) performs the methods described in various embodiments of the present invention.
综上所述,以上实施例仅用以说明本发明的技术方案,而非对其限制;尽管参照上述实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对上述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。In conclusion, the above embodiments are only used to explain the technical solutions of the present invention, and are not limited thereto; although the present invention has been described in detail with reference to the above embodiments, those skilled in the art should understand that they can still The technical solutions described in the above embodiments are modified, or equivalent to some of the technical features are included; and the modifications and substitutions do not depart from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims (14)

  1. 一种基于H5的页面显示方法,其特征在于,包括:An H5-based page display method, comprising:
    在终端的显示屏幕上加载第五代超文本标记语言H5网页,所述H5网页包括:H5页面可视窗口和浮动在所述H5页面可视窗口上的视频播放器按钮;Loading a fifth generation hypertext markup language H5 webpage on a display screen of the terminal, the H5 webpage comprising: an H5 page visible window and a video player button floating on the H5 page visible window;
    在所述H5网页上插入待显示的视频内容,所述视频内容显示在所述H5页面可视窗口上;Inserting video content to be displayed on the H5 webpage, the video content being displayed on the H5 page visible window;
    当所述视频内容被触发播放时,在所述H5页面可视窗口上播放所述视频内容,并在所述H5页面可视窗口上隐藏所述视频播放器按钮。When the video content is triggered to play, the video content is played on the H5 page visible window, and the video player button is hidden on the H5 page visible window.
  2. 根据权利要求1所述的方法,其特征在于,所述视频内容的高度大于所述视频内容的宽度,所述在所述H5网页上插入待显示的视频内容,包括:The method according to claim 1, wherein the height of the video content is greater than the width of the video content, and the inserting the video content to be displayed on the H5 webpage comprises:
    将所述待显示的视频内容插入到所述H5页面可视窗口;Inserting the video content to be displayed into the H5 page visible window;
    按照所述H5页面可视窗口的宽度对所述视频内容的宽度进行缩放,并按照缩放后的视频内容的宽度等比例缩放视频内容的高度。The width of the video content is scaled according to the width of the H5 page visible window, and the height of the video content is scaled according to the width of the scaled video content.
  3. 根据权利要求1所述的方法,其特征在于,所述在终端的显示屏幕上加载第五代超文本标记语言H5网页,包括:The method according to claim 1, wherein the loading of the fifth generation hypertext markup language H5 webpage on the display screen of the terminal comprises:
    检测所述终端的显示屏幕上产生的触摸事件;Detecting a touch event generated on a display screen of the terminal;
    根据所述触摸事件在所述显示屏幕上加载H5网页。Loading an H5 web page on the display screen according to the touch event.
  4. 根据权利要求1所述的方法,其特征在于,所述在所述H5页面可视窗口上播放所述视频内容,并在所述H5页面可视窗口上隐藏所述视频播放器按钮,包括:The method of claim 1, wherein the playing the video content on the H5 page visible window and hiding the video player button on the H5 page visible window comprises:
    在所述显示屏幕上将所述H5页面可视窗口放大,在放大后的H5页面可视窗口上播放所述视频内容,并按照放大后的H5页面可视窗口调整所述视频播放器按钮在所述H5网页的位置,使得调整后的视频播放器按钮的位置超出所述显示屏幕之外。Zooming in the H5 page visible window on the display screen, playing the video content on the enlarged H5 page visible window, and adjusting the video player button according to the enlarged H5 page visible window The location of the H5 webpage is such that the position of the adjusted video player button is outside of the display screen.
  5. 根据权利要求1至4中任一项所述的方法,其特征在于,所述在所述H5页面可视窗口上播放所述视频内容之后,所述方法还包括:The method according to any one of claims 1 to 4, wherein after the playing the video content on the H5 page visible window, the method further comprises:
    在所述视频内容播放过程中,暂停所述视频内容的视频播放并隐藏所述H5页面可视窗口;During the playing of the video content, pause video playback of the video content and hide the H5 page visible window;
    当所述H5页面可视窗口从所述H5网页上隐藏之后,在所述H5网页上 显示交互操作页面。After the H5 page visible window is hidden from the H5 web page, an interactive operation page is displayed on the H5 web page.
  6. 根据权利要求5所述的方法,其特征在于,所述暂停所述视频内容的视频播放并隐藏所述H5页面可视窗口之后,所述方法还包括:The method according to claim 5, wherein after the video playback of the video content is suspended and the H5 page visible window is hidden, the method further includes:
    继续播放所述视频内容对应的音频内容。Continue to play the audio content corresponding to the video content.
  7. 一种终端,其特征在于,包括:A terminal, comprising:
    网页加载模块,用于在终端的显示屏幕上加载第五代超文本标记语言H5网页,所述H5网页包括:H5页面可视窗口和浮动在所述H5页面可视窗口上的视频播放器按钮;a webpage loading module, configured to load a fifth generation hypertext markup language H5 webpage on a display screen of the terminal, the H5 webpage comprising: a H5 page visible window and a video player button floating on the H5 page visible window ;
    视频插入模块,用于在所述H5网页上插入待显示的视频内容,所述视频内容显示在所述H5页面可视窗口上;a video insertion module, configured to insert video content to be displayed on the H5 webpage, where the video content is displayed on the H5 page visible window;
    显示控制模块,用于当所述视频内容被触发播放时,在所述H5页面可视窗口上播放所述视频内容,并在所述H5页面可视窗口上隐藏所述视频播放器按钮。And a display control module, configured to play the video content on the H5 page visible window when the video content is triggered to play, and hide the video player button on the H5 page visible window.
  8. 根据权利要求7所述的终端,其特征在于,所述视频内容的高度大于所述视频内容的宽度,所述视频插入模块,具体用于将所述待显示的视频内容插入到所述H5页面可视窗口;按照所述H5页面可视窗口的宽度对所述视频内容的宽度进行缩放,并按照缩放后的视频内容的宽度等比例缩放视频内容的高度。The terminal according to claim 7, wherein the height of the video content is greater than the width of the video content, and the video insertion module is specifically configured to insert the video content to be displayed into the H5 page. a visible window; the width of the video content is scaled according to the width of the H5 page visible window, and the height of the video content is scaled according to the width of the scaled video content.
  9. 根据权利要求7所述的终端,其特征在于,所述网页加载模块,具体用于检测所述终端的显示屏幕上产生的触摸事件;根据所述触摸事件在所述显示屏幕上加载H5网页。The terminal according to claim 7, wherein the webpage loading module is specifically configured to detect a touch event generated on a display screen of the terminal; and load an H5 webpage on the display screen according to the touch event.
  10. 根据权利要求7所述的终端,其特征在于,所述显示控制模块,具体用于在所述显示屏幕上将所述H5页面可视窗口放大,在放大后的H5页面可视窗口上播放所述视频内容,并按照放大后的H5页面可视窗口调整所述视频播放器按钮在所述H5网页的位置,使得调整后的视频播放器按钮的位置超出所述显示屏幕之外。The terminal according to claim 7, wherein the display control module is specifically configured to enlarge the H5 page visible window on the display screen, and play the displayed on the enlarged H5 page visible window. The video content is described, and the position of the video player button on the H5 webpage is adjusted according to the enlarged H5 page visible window, so that the position of the adjusted video player button is beyond the display screen.
  11. 根据权利要求7至10中任一项所述的终端,其特征在于,所述显示控制模块,还用于在所述H5页面可视窗口上播放所述视频内容之后,在所述视频内容播放过程中,暂停所述视频内容的视频播放并隐藏所述H5页面可视 窗口;当所述H5页面可视窗口从所述H5网页上隐藏之后,在所述H5网页上显示交互操作页面。The terminal according to any one of claims 7 to 10, wherein the display control module is further configured to play the video content after playing the video content on the H5 page visible window. During the process, the video playback of the video content is suspended and the H5 page visible window is hidden; after the H5 page visible window is hidden from the H5 webpage, the interactive operation page is displayed on the H5 webpage.
  12. 根据权利要求11所述的终端,其特征在于,所述终端,还包括:音频播放模块,用于所述显示控制模块暂停所述视频内容的视频播放并隐藏所述H5页面可视窗口之后,继续播放所述视频内容对应的音频内容。The terminal according to claim 11, wherein the terminal further comprises: an audio playing module, configured to: after the display control module pauses video playback of the video content and hides the H5 page visible window, Continue to play the audio content corresponding to the video content.
  13. 一种终端,其特征在于,包括:处理器及存储器;A terminal, comprising: a processor and a memory;
    所述存储器用于存储程序;The memory is used to store a program;
    所述处理器用于执行所述程序,具体包括如下步骤:The processor is configured to execute the program, and specifically includes the following steps:
    在终端的显示屏幕上加载第五代超文本标记语言H5网页,所述H5网页包括:H5页面可视窗口和浮动在所述H5页面可视窗口上的视频播放器按钮;Loading a fifth generation hypertext markup language H5 webpage on a display screen of the terminal, the H5 webpage comprising: an H5 page visible window and a video player button floating on the H5 page visible window;
    在所述H5网页上插入待显示的视频内容,所述视频内容显示在所述H5页面可视窗口上;Inserting video content to be displayed on the H5 webpage, the video content being displayed on the H5 page visible window;
    当所述视频内容被触发播放时,在所述H5页面可视窗口上播放所述视频内容,并在所述H5页面可视窗口上隐藏所述视频播放器按钮。When the video content is triggered to play, the video content is played on the H5 page visible window, and the video player button is hidden on the H5 page visible window.
  14. 一种计算机可读存储介质,包括指令,当其在计算机上运行时,使得计算机执行如权利要求1-6任意一项所述的方法。A computer readable storage medium comprising instructions which, when run on a computer, cause the computer to perform the method of any of claims 1-6.
PCT/CN2018/077183 2017-03-10 2018-02-26 H5-based page displaying method and terminal WO2018161811A1 (en)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN201710142492.1 2017-03-10
CN201710142492.1A CN106919707B (en) 2017-03-10 2017-03-10 Page display method and terminal based on H5

Publications (1)

Publication Number Publication Date
WO2018161811A1 true WO2018161811A1 (en) 2018-09-13

Family

ID=59460798

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2018/077183 WO2018161811A1 (en) 2017-03-10 2018-02-26 H5-based page displaying method and terminal

Country Status (2)

Country Link
CN (1) CN106919707B (en)
WO (1) WO2018161811A1 (en)

Families Citing this family (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106919707B (en) * 2017-03-10 2020-04-07 腾讯科技(深圳)有限公司 Page display method and terminal based on H5
CN109429088B (en) * 2017-08-22 2021-09-07 北京国双科技有限公司 Program interaction method, system, storage medium and processor
CN107463385A (en) * 2017-08-22 2017-12-12 安徽简道科技有限公司 Network advertisement making method
CN108495174B (en) * 2018-04-09 2020-10-09 码卡(广州)科技有限公司 Method and system for generating video file by H5 page effect
CN108874674A (en) * 2018-06-21 2018-11-23 北京金山安全软件有限公司 Page adjustment method and device
CN108959495B (en) * 2018-06-25 2019-12-06 百度在线网络技术(北京)有限公司 page display method, device, equipment and computer storage medium of H5 webpage
CN108960909A (en) * 2018-06-25 2018-12-07 苏宁易购集团股份有限公司 Support multi-platform floated advertising method
CN112911367B (en) * 2019-12-03 2022-04-19 腾讯科技(深圳)有限公司 Video playing interface processing method and device and electronic equipment
CN111970570B (en) * 2020-07-17 2022-01-25 北京奇艺世纪科技有限公司 Method and device for prompting video content interaction position

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103281457A (en) * 2013-06-03 2013-09-04 贝壳网际(北京)安全技术有限公司 Video playing method, video playing device and video playing browser in mobile terminal browser
CN104243668A (en) * 2013-06-14 2014-12-24 广州市动景计算机科技有限公司 Video full-screen playing method and device based on Android operating system
CN105635790A (en) * 2015-12-29 2016-06-01 腾讯科技(北京)有限公司 Video display method and apparatus
US20170017371A1 (en) * 2015-07-17 2017-01-19 Tribune Broadcasting Company, Llc Video-Production System With Social-Media Features
CN106919707A (en) * 2017-03-10 2017-07-04 腾讯科技(深圳)有限公司 A kind of page display method and terminal based on H5

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150253974A1 (en) * 2014-03-07 2015-09-10 Sony Corporation Control of large screen display using wireless portable computer interfacing with display controller
CN104080016B (en) * 2014-06-25 2018-08-17 北京奇虎科技有限公司 The method and apparatus that audio/video information is shown are carried out in a kind of browser
CN105959821A (en) * 2016-05-30 2016-09-21 乐视控股(北京)有限公司 Video play method and device

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103281457A (en) * 2013-06-03 2013-09-04 贝壳网际(北京)安全技术有限公司 Video playing method, video playing device and video playing browser in mobile terminal browser
CN104243668A (en) * 2013-06-14 2014-12-24 广州市动景计算机科技有限公司 Video full-screen playing method and device based on Android operating system
US20170017371A1 (en) * 2015-07-17 2017-01-19 Tribune Broadcasting Company, Llc Video-Production System With Social-Media Features
CN105635790A (en) * 2015-12-29 2016-06-01 腾讯科技(北京)有限公司 Video display method and apparatus
CN106919707A (en) * 2017-03-10 2017-07-04 腾讯科技(深圳)有限公司 A kind of page display method and terminal based on H5

Also Published As

Publication number Publication date
CN106919707A (en) 2017-07-04
CN106919707B (en) 2020-04-07

Similar Documents

Publication Publication Date Title
WO2018161811A1 (en) H5-based page displaying method and terminal
US10341716B2 (en) Live interaction system, information sending method, information receiving method and apparatus
WO2018157812A1 (en) Method and apparatus for implementing video branch selection and playback
JP6442076B2 (en) Dialogue method, terminal and server based on recommended content
WO2017008551A1 (en) Bullet screen display method and apparatus
CN108235086B (en) Video playing control method and device and corresponding terminal
CN107948740B (en) Video playing control method, device and terminal
CN109905754B (en) Virtual gift receiving method and device and storage equipment
CN108260014A (en) A kind of video broadcasting method and terminal and storage medium
US10775979B2 (en) Buddy list presentation control method and system, and computer storage medium
WO2018036544A1 (en) Method of playing video in browser window, device, and data storage medium
WO2018107941A1 (en) Multi-screen linking method and system utilized in ar scenario
WO2014000656A1 (en) Method, device and terminal for refreshing page
JP6522164B2 (en) Information acquisition method and device
US10506292B2 (en) Video player calling method, apparatus, and storage medium
US11233895B2 (en) Automatic wallpaper setting method, terminal device, and graphical user interface
KR101876394B1 (en) Method and device for playing media data on a terminal
CN101483694A (en) Playing control method and apparatus for vector animation
CN105631059B (en) Data processing method, data processing device and data processing system
CN106406924B (en) Control method and device for starting and quitting picture of application program and mobile terminal
CN106098088B (en) A kind of method and apparatus of the display lyrics
WO2017193496A1 (en) Application data processing method and apparatus, and terminal device
US11243679B2 (en) Remote data input framework
CN110888854A (en) Content sharing method and electronic equipment
CN108320148A (en) A kind of resource transfers method and relevant device

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 18764072

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase in:

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 18764072

Country of ref document: EP

Kind code of ref document: A1