WO2018161811A1

WO2018161811A1 - H5-based page displaying method and terminal

Info

Publication number: WO2018161811A1
Application number: PCT/CN2018/077183
Authority: WO
Inventors: 梁宇轩
Original assignee: 腾讯科技（深圳）有限公司
Priority date: 2017-03-10
Filing date: 2018-02-26
Publication date: 2018-09-13
Also published as: CN106919707A; CN106919707B

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-based page display method and terminal

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

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.

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

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:

In a first aspect, an embodiment of the present invention provides a page display method based on H5, including:

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;

Inserting video content to be displayed on the H5 webpage, the video content being 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 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:

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 ;

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;

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:

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:

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 is a schematic block diagram of a method for displaying a page based on H5 according to an embodiment of the present invention;

2 is a schematic diagram of a process interaction based on H5 according to an embodiment of the present invention;

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 is a schematic diagram of an implementation scenario of a hidden video player button according to an embodiment of the present invention;

FIG. 5-a is a schematic structural diagram of a terminal according to an embodiment of the present disclosure;

FIG. 5-b is a schematic structural diagram of another terminal according to an embodiment of the present disclosure;

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

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.

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.

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. 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.

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.

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: detecting a touch event generated on a display screen of the terminal;

A2. Loading the H5 webpage on the display screen according to the touch event.

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. Insert the video content to be displayed on the H5 webpage, and the video content is displayed on the H5 page visible window.

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.

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, inserting the video content to be displayed into the H5 page visible window;

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.

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. 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 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.

In some embodiments of the invention, the video player button is hidden on the H5 page visible window in step 103, including:

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. .

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.

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, during the playback of the video content, pause the video playback of the video content and hide the H5 page visible window;

D2. After the H5 page visible window is hidden from the H5 webpage, the interactive operation page is displayed on the H5 webpage.

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.

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. 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.

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.

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.

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.

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. 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, 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, 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. 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.

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.

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

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

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;

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.

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.

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.

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.

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.

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.

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:

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.

The following describes the components of the mobile phone in detail with reference to FIG. 6:

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.

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.

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.

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.

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.

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 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.

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.

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.

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.

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

An H5-based page display method, comprising:

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;

Inserting video content to be displayed on the H5 webpage, the video content being 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 player button is hidden on the H5 page visible window.
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:

Inserting 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.
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;

Loading an H5 web page on the display screen according to the touch event.
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:

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.
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:

During the playing of the video content, pause video playback of the video content and hide the H5 page visible window;

After the H5 page visible window is hidden from the H5 web page, an interactive operation page is displayed on the H5 web page.
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.
A terminal, comprising:

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 ;

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;

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.
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.
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.
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.
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.
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.
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:

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;

Inserting video content to be displayed on the H5 webpage, the video content being 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 player button is hidden on the H5 page visible window.
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.