CN115292633A

CN115292633A - Method for recording and playing web page explanation

Info

Publication number: CN115292633A
Application number: CN202210763236.5A
Authority: CN
Inventors: 杨小涛
Original assignee: Sino Singapore Cloud Service Beijing Technology Co ltd
Current assignee: Sino Singapore Cloud Service Beijing Technology Co ltd
Priority date: 2022-07-01
Filing date: 2022-07-01
Publication date: 2022-11-04

Abstract

The application provides a method for recording and playing web page narration, which comprises the following steps: loading a target webpage and loading a first program containing an explanation and recording function; receiving an instruction to start recording, loading a recording control component, and starting webpage content change monitoring and audio and video data acquisition; after the webpage is loaded or the content change is monitored, acquiring webpage data and occurrence time to generate first comment data; acquiring audio and video to generate second comment data; the comment data is stored. The playing method comprises the following steps: accessing a playing website, and loading a second program containing an explication playing function; the loading and playing part is used for downloading the comment data, receiving an instruction to start playing, reading the comment data and starting a timer; and when the timing is confirmed to be in accordance with the time contained in the comment data or when an event of the comment data binding is executed, the comment data is played. Therefore, the method is specially used for recording and playing the explanation for the webpage, does not need other software, and has smaller data and higher image quality than the common screen recording.

Description

Method for recording and playing web page explanation

Technical Field

The embodiment of the invention relates to the field of internet technology and communication, in particular to a method for recording and playing webpage explanation.

Background

The webpage is an important tool for daily information communication and business handling of people, and provides good user experience and efficient information service for people in a diversified, novel, multi-channel, barrier-free and humanized mode. For example, people acquire information through government affairs websites, read notifications, and know business processes; information is conveyed through a shared webpage; sharing the Word document, and reading by a friend in a webpage form; transacting business through online banking, etc. In the above scenario, the government affairs staff have the requirements of further explaining and informing the key points and the work flow to the work staff, the sharer has the requirement of explaining the shared content, the shared Word document has the requirement of explaining the content, and the online banking business has the requirement of guiding the business operation. However, the web page only contains the content designated by the design and manufacture personnel, so in the existing implementation mode, the user usually realizes the above requirements by recording the screen, manufacturing the PPT, manufacturing the help document and the like, the file generated by the recording screen is large, the network transmission is not facilitated, the time and labor are wasted in manufacturing the PPT or the help document, and the quick release is not facilitated.

Therefore, it is necessary to apply new technologies to solve the above problems of web page explanation.

Disclosure of Invention

In view of the above problems, the present invention provides a method for recording and playing web page narration, which aims to generate narration data for narrating a web page quickly, and execute web page narration playing based on the narration data, thereby improving the communication efficiency and user experience of the web page.

The technical scheme provided by the invention is as follows:

in a first aspect, the present invention provides a method for recording a description on a web page, where the method is used to record a description on a target web page, and the method includes:

loading the target webpage, and loading a first program for executing an explanation and recording function, wherein the first program comprises the functions of explanation and recording control and explanation data acquisition;

receiving a recording starting instruction, starting the narration recording, loading a narration recording control component, starting the content change monitoring of the target webpage, and starting audio and/or video data acquisition, wherein the narration recording control component comprises one or more of a recording ending tool, a recording suspension tool, a doodle tool and a narration tool;

after the target webpage content is loaded for the first time, acquiring webpage data to generate first comment data, or acquiring the webpage data and corresponding time information to generate the first comment data; after monitoring that the target webpage content changes, acquiring the changed webpage data and occurrence time information to generate first comment data; collecting the audio and/or video data to generate second comment data, or collecting the audio and/or video data and corresponding time information to generate second comment data; wherein the first comment data and the second comment data are two types of comment data;

sending the comment data to a server;

storing the comment data at a server, wherein the comment data is used for providing play data for a comment playing webpage, the comment playing webpage comprises a second program for executing a comment playing function, and the second program loads the comment data and a comment playing control to play a comment;

the webpage data comprise one or more of webpage HTML data, webpage CSS data, serialized webpage data, canvas data generated based on webpage HTML display content and webpage content picture data.

In the implementation mode, in the explanation process of the webpage, the webpage data are recorded and the change process of the webpage data is used for obtaining the first explanation data, the audio and video are recorded for obtaining the second explanation data, the two data are stored and applied to playing, and finally the playing effect which is the same as that of the recorded screen is obtained.

In a possible implementation manner, after it is monitored that the target web content changes, the web data that is different before and after the change is collected as the changed web data, or the property of the difference is collected and added to the first comment data, where the property of the difference includes one of addition, replacement, and deletion. According to the implementation mode, only the webpage data of the differentiated part is recorded, and the data storage capacity of the first comment data is greatly reduced.

In a possible implementation manner, the web page data is serialized to generate serialized web page data, the first comment data is generated based on the serialized web page data, and further, the changed web page data is serialized while the changed node information is recorded. In the implementation mode, the execution of the serialization processing is beneficial to the storage and transmission of the webpage data and the calculation of the webpage data in the process of playing the explanation.

In a possible implementation manner, the first comment data is generated based on the web page data or the serialized web page data, according to a preset key frame setting rule, after it is confirmed that the preset key frame setting rule is met, all the web page data of the target web page are recorded as the first comment data, and a key frame identifier is set for the first comment data. The first comment data with the key frame identification includes all the web page data at the corresponding time.

In a possible implementation manner, after the target webpage receives an instruction for starting explanation recording to start explanation recording, cursor event monitoring is started, and after the cursor event is monitored, cursor position information and the time information are collected to generate third explanation data, where the third explanation data is another type of explanation data.

In another possible implementation manner, after the client receives an instruction for starting the commentary recording, a first recorded commentary request is generated and sent to the server; receiving a webpage used for recording the explanation or a website corresponding to the webpage returned by the server, loading the webpage used for recording the explanation or accessing the website used for recording the explanation to load the target webpage content, and starting the explanation recording by the first program. In this implementation manner, the webpage for recording the explanation is a webpage that is generated based on the content of the target webpage and includes the first program, after receiving a request for recording the explanation sent by the target webpage, the server acquires the website of the target webpage based on the request, further acquires the content of the target webpage, adds the first program to the content of the target webpage, generates the webpage for recording the explanation, and returns the webpage for recording the explanation, the content of the webpage, or the corresponding website.

In another possible implementation manner, recording the webpage explanation at the server includes the following main steps:

after the client receives an instruction for starting the explanation recording, a second recording explanation request is generated and sent to the server;

receiving and processing the second recorded interpretation request at the server, acquiring the target webpage address based on the second recorded interpretation request, loading the target webpage in the server browser, loading the first program, starting interpretation recording and loading interpretation recording control components, starting variation monitoring of the target webpage content, and collecting webpage data to generate the first interpretation data; loading a same-screen communication program, establishing same-screen communication with the client, acquiring webpage data to generate synchronous webpage data and sending the synchronous webpage data to the client;

establishing on-screen communication between the client and the webpage loaded by the server browser; receiving and loading the synchronous webpage data so as to synchronize the display contents of the client and the server browser; starting user operation monitoring, acquiring user operation data after monitoring a user operation event, and sending the user operation data to the server; starting audio and/or video data acquisition, acquiring the audio and/or video data and sending the audio and/or video data to the server;

receiving the user operation data at the server, executing a user operation event contained in the user operation data, monitoring that the target webpage content changes, and acquiring the changed webpage data and occurrence time information to generate first comment data; receiving the audio and/or video data and generating the second narration data based thereon; storing the commentary data;

wherein the first program comprises one or more of a browser plug-in form and a JavaScript code form.

In the possible implementation manners, the browsing environment of the target webpage is established at the server, the same-screen communication between the server browser and the client is established, the user operation in the client browser is received and executed at the server, and the data is recorded and explained based on the server.

Through the implementation modes, the explanation data is generated for the webpage recording, and the explanation data is used for providing the playing data for the explanation playing webpage of the target webpage and explaining the target webpage again.

In a second aspect, the present invention further provides a method for playing a web page narration, where the method includes:

accessing an explanation playing website, and loading a second program for executing an explanation playing function, wherein the second program comprises explanation playing control and explanation data loading functions;

loading a comment playing part, and downloading comment data, wherein the comment data comprises one or more of first comment data, second comment data and third comment data, the comment playing part comprises one or more of playing time display, playing, pausing, jumping, fast forwarding, rewinding, double-speed and stopping, the first comment data comprises webpage data, the second comment data comprises audio and/or video data, the third comment data comprises cursor position data, each type of comment data comprises or does not comprise time information, and when the time information is not comprised, playing is performed for binding a specified event by default;

starting the comment playing after receiving the playing instruction, reading the comment data, starting a timer, and executing the comment data playing when one of the following conditions is met: the method comprises the following steps that firstly, according to a preset time calculation rule, when the time of the timer is confirmed to accord with time information contained in the comment data; the second condition is that when the event executed by the second program is determined to be a specified event bound in the comment data; the judging of the commentary data playing according to the type of the commentary data includes: calculating and displaying webpage content based on the first comment data, playing audio and/or video based on the second comment data, and setting a display cursor based on the third comment data;

Through the implementation mode, the comment data are loaded through the second program, the playing control is executed, the corresponding comment data are played according to the time or the event recorded in each comment data, the audio and video data are played at the same time, and the explanation process of the target webpage is reproduced.

In a possible implementation manner, when the first comment data is played and confirmed to be changed serialized webpage data, according to the changed serialized webpage data stored in the first comment data, a corresponding first data node is searched in the currently displayed objectified webpage data based on the changed node information contained in the changed serialized webpage data, and corresponding processing is performed on the first data node based on the property of the difference contained in the first comment data, wherein the corresponding processing comprises that when the property of the difference is confirmed to be increased, the content contained in the changed node information is added to the first data node; deleting the first data node when the property of the difference is determined to be deletion; and replacing the first data node with the content contained in the changed node information when the property of the difference is determined to be replacement.

In one possible implementation manner, after a fast forward, backward or jump to a specified position playing instruction is received, a first time point of jump is calculated according to the fast forward, backward or jump to the specified position playing instruction, and audio and/or video data are played based on the first time point; searching a latest first comment data with a key frame mark or stored with all the webpage data forwards based on the first time point, acquiring corresponding time information of the first comment data as a second time point according to the first comment data acquired by searching, acquiring the first comment data containing the second time point, the first time point and the time information contained in the first comment data as a first comment data queue, extracting elements in the first comment data queue according to a time sequence, sequentially performing webpage data calculation based on all the webpage data contained in a first element in the first comment data queue according to the webpage data contained in the first comment data queue, acquiring the webpage data corresponding to the first time point, replacing currently displayed webpage content, and continuously playing by modifying a timer based on the first time point.

In the implementation manners, the webpage data corresponding to a certain playing moment or a certain event are obtained through calculation based on the first comment data, the webpage is displayed based on the webpage data to obtain the picture effect, the audio and video are played based on the second comment data, and the comment data playing of multiple types are combined to generate the playing effect similar to the recording screen based on the third comment data playing operation action.

In a third aspect, an embodiment of the present invention further provides a computer storage medium, where a software program is stored, and when the software program is read and executed by one or more processors, the software program may implement the method provided by any one of the implementation manners of the foregoing aspects.

In a fourth aspect, an embodiment of the present invention further provides a computer program product, which when being read and executed by one or more processors can implement the method provided in any one of the implementation manners of the foregoing aspects.

Therefore, the method for recording and displaying the content adopts a recording mode of recording the webpage data, and has the advantages of small data storage capacity, small network transmission capacity and high transmission speed compared with the common screen recording. In addition, the playing and explaining method obtains the playing picture by displaying the webpage based on the webpage data, and has the advantage of lossless picture quality compared with common screen recording.

Drawings

Fig. 1 is a schematic view illustrating a web page explanation recording process according to an embodiment of the present invention;

fig. 2 is a schematic flow chart of recording differentiated web page data according to an embodiment of the present invention;

fig. 3 is a schematic flow chart of recording serialized web page data according to an embodiment of the present invention;

fig. 4 is a schematic flow chart illustrating setting a key frame for explaining data according to an embodiment of the present invention;

fig. 5 is a schematic view illustrating another recording process of a web page explanation according to an embodiment of the present invention;

fig. 6 is a schematic diagram illustrating a webpage explanation recording process for generating a webpage or a website for recording an explanation at a server according to an embodiment of the present invention;

fig. 7 is a schematic flowchart illustrating a process of recording a web page explanation at a server according to an embodiment of the present invention;

fig. 8 is a schematic flowchart illustrating a webpage narration playing according to an embodiment of the present invention;

fig. 9 is a schematic flowchart of playing serialized web page data according to an embodiment of the present invention;

fig. 10 is a schematic flowchart illustrating a process of fast forwarding, rewinding or jumping to a specific location to play narration data according to an embodiment of the present invention;

fig. 11 is a schematic diagram of a web page explanation recording interface according to an embodiment of the present invention.

Detailed Description

The description of the embodiments of the present invention is intended to be illustrative of the invention and is not intended to be limiting.

Hereinafter, embodiments of the present invention will be described, and it is apparent that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. As can be known to those skilled in the art, with the development of technology and the emergence of new scenarios, the technical solution provided by the embodiment of the present invention is also applicable to similar technical problems.

The webpage is as the important instrument that information propagation, business were handled, and people often explains and generate the demand of explaining the data to its content, and prior art explains the webpage execution mainly through recording the screen form, and the data bulk that this mode produced is great, and is unfavorable for network transmission. In order to solve the above problems, embodiments of the present invention provide a method for recording a web page comment based on a web page, where the method uses a program contained in the web page to complete recording, and records the comment data by collecting web page data, audio/video data, and operation data, so that the method has a small amount of recorded data and is beneficial to network transmission. The embodiment of the invention also provides a method for playing the webpage explanation based on the webpage program, which plays the webpage by restoring and displaying the webpage data, playing the audio, restoring the operation effect and the like in the webpage, and the image quality is completely lossless.

The embodiments of the invention will be described in detail below with reference to the accompanying drawings:

example one

Fig. 1 is a flowchart illustrating a recording method according to an embodiment of the present invention, and as shown in fig. 1, the method of this embodiment may include the following steps:

s101, loading a target webpage and loading a first program for executing an explanation and recording function;

for example, in the present invention, if a comment is recorded for a web page, the web page is a target web page. The first program comprises a comment recording control function and a comment data acquisition function, preferably, the first program is contained in the target webpage in a JS library or JS code segment mode, is independent of the original target webpage content, and is beneficial to quick implementation. Preferably, after the first program is loaded, a function button for starting the narration recording, such as a "record narration" button shown in a in fig. 11, is displayed in the target webpage.

S102, starting the description recording, and loading a description recording control component; starting the change monitoring of the target webpage content; starting audio and/or video data acquisition; acquiring current target webpage data to generate first comment data;

in this step, an explanation recording is started by receiving a user operation event, and an explanation recording control component is loaded, as shown in fig. 11B, the loaded explanation recording control component includes, but is not limited to, ending recording, suspending recording, a doodling tool, an explanation tool, a recording time display component, and the like, where the doodling tool includes a doodling control tool, a doodling canvas, and the like, and the doodling control tool opens doodling, exits doodling, sets a brush, sets a color, sets a shape, and the like. Optionally, after receiving the doodle starting instruction, the doodle control components such as the brush setting, the color setting, the shape setting and the like are displayed, and a transparent doodle canvas is created on the upper layer of the target webpage content to receive the doodle operation. The narration tool is an auxiliary tool for explanation, such as a color changing, flashing, framing tool, etc.

And starting the change monitoring of the target webpage content, and monitoring a webpage content change function such as a MutationObserver.

According to the method and the device, the display content is recorded based on the webpage data, so that after the webpage is loaded, the current target webpage data is collected to generate the first comment data, wherein the first comment data is one type of comment data and is stored as one comment data record. And starting the content change monitoring of the target webpage to record subsequent display content. Optionally, the current target webpage data is collected to generate first explanation data, the first program judges the collection range of the webpage data and determines whether the collection is carried out according to preset recording setting, for example, in a doodle control tool, a doodle canvas is defined to be in the webpage data collection range, other tools and components outside the doodle canvas are not in the webpage data collection range, an explanation tool is not in the webpage data collection range, and the effect of the explanation tool is in the webpage data collection range.

And starting audio and/or video data acquisition, and acquiring audio and video data of the interpreter by utilizing the camera so as to record audio and video commentary content.

S103A, monitoring the content change of a target webpage, and acquiring the changed webpage data and the occurrence time information to generate first comment data;

in this step, the changed web page data is collected to generate first comment data, and it is to be specifically noted that, in the present invention, the web page content change is monitored, and the web page data is collected, and objects for which the web page content change and the web page data are not necessarily the same, for example, the web page content change is monitored by a MutationObserver function, and the monitored web page content is web page content, such as web page HTML, CSS, and the like. In the above steps, the occurrence time information corresponds to the time when the web page changes, for example, a timer is set to start timing after the recording of the comment is started in S102, and timer data is collected as the occurrence time information in this step, or a recording start time is recorded after the recording of the comment is started in S102, and the occurrence time is collected as the occurrence time information in this step.

S103B, collecting audio and/or video data to generate second comment data;

in this step, the second comment data is another type of comment data that includes audio and/or video data. And under the condition that the comment recording process is not interrupted, generating a second comment data record, wherein the recording time information is not required. In the case where the narration recording process is allowed to be suspended, a plurality of second narration data records are generated. Optionally, after the recording of the commentary is started or continued, a second commentary data record is newly created, and data is collected in the form of audio or video streams.

S104, storing the comment data;

in the step, storing the comment data includes sending the comment data to the server and storing the comment data at the server. Preferably, the comment data is stored at the server, and the method further includes generating a website for executing to play the comment, where the website corresponds to a comment playing webpage for playing the comment data, the comment playing webpage includes a second program for executing a comment playing function, and when a user accesses the comment playing webpage, the second program is loaded, and the comment data and the comment playing control are loaded by the second program to play the comment. Optionally, a message digest generation algorithm is adopted to generate a message digest for the currently stored interpretation data, the message digest is displayed in the webpage, and further, when new interpretation data are stored each time, a message digest is generated again based on the currently stored interpretation data or the message digest corresponding to the currently stored interpretation data and the new interpretation data, and the newly generated message digest is displayed in the webpage.

In the embodiment, the explanation is recorded for the target webpage through the webpage itself without other software and tools. According to the characteristic that the webpage outputs the display content based on the webpage data, the display content is generated based on the webpage data recording, and meanwhile, the audio and video data of the interpreter are recorded to generate the audio and video explanation content. The program is used for controlling playing based on the two aspects of data, and the same explanation effect as that of the common screen recording can be obtained. The beneficial effects that can be obtained are: the recorded data volume is small, and the storage and the network transmission are convenient; the image quality is completely lossless through playing and restoring of a webpage program; the recording is performed without the help of other software and tools; the common recording screen is easily interfered by other programs, such as receiving system notification in the recording process, and the recording of the invention is completed by the webpage, so the recording screen is not interfered by other running programs; the content is acquired and displayed based on the webpage data, the webpage type is not limited, and both dynamic and static webpages can be recorded; the method is not limited by webpage updating, and the current content of the webpage is recorded; control over the recorded content may be provided, such as filtering sensitive information; the change process of the internal webpage data in the webpage browsing operation process is stored, and the simple display output is not performed.

Example two

Fig. 2 is a schematic flow chart of recording differentiated web page data according to the present invention, where the embodiment is based on the first embodiment S103A, and as shown in fig. 2, the method of the embodiment may include:

s201, monitoring that the content of a target webpage changes;

in this step, changes in web page content, such as changes in web page HTML, DOM, CSS, etc., are monitored, for example, changes made to the web page DOM tree are monitored using the MutationObserver.

S202, calculating webpage data of a difference part before and after the webpage content changes and difference properties;

in the step, according to the property of the webpage data to be acquired, calculating the webpage data of a difference part before and after the change of the webpage content and acquiring the webpage data as the differentiated webpage data, for example, the webpage data is HTML data, namely HTML of the difference part before and after the change is acquired, and for example, the webpage data is Canvas data generated based on webpage HTML display content. Additionally, this step simultaneously collects and adds to the first narrative data the nature of the differences, including but not limited to additions, substitutions, deletions, and the like.

S203, acquiring webpage data of the difference part and the difference property, and generating first comment data;

this step finally generates the first comment data based on the portion of the web page data difference.

The embodiment generates the first comment data by performing data acquisition based on the part of the difference of the webpage data, and has the advantages of further reducing the acquisition amount and storage amount of the data, enabling large-scale comment data storage to be possible and being beneficial to rapid network transmission.

EXAMPLE III

Fig. 3 is a schematic flow chart of recording serialized webpage data according to the present invention, and as shown in fig. 3, the method of this embodiment may include:

s301, loading the target webpage;

s302, performing serialization processing on webpage data of a target webpage to generate serialized webpage data, and generating first comment data based on the serialized webpage data;

in this step, the web page data is serialized according to the nature of the acquired web page data, for example, after the target web page content is loaded, the DOM of the target web page is serialized to generate serialized DOM data, and the serialized DOM data is generated into first comment data. The DOM of the target webpage contains the method and the attribute of the object, on the basis, the step S303 is facilitated to execute comparison calculation, and the serialization processing of the DOM is facilitated to store the comment data persistently.

S303, after monitoring that the content of the target webpage changes, generating first comment data based on the changed webpage data serialization, and simultaneously recording the changed node information;

in this step, according to the nature of the collected web page data, for example, when the web page data is serialized web page data, after the change of the content of the target web page is monitored, the DOM of the target web page is serialized to generate serialized DOM data. Optionally, according to the monitored DOM change node of the target webpage, the changed node information is recorded, and the changed part is serialized, that is, the different part is serialized and stored, and the first comment data is generated.

The embodiment provides a method for storing comment data in a serialized mode, and the following beneficial effects can be achieved: the comment data can be stored permanently; the method is beneficial to accurately constructing the webpage data when the explanation is played; and network transmission is facilitated.

Example four

Fig. 4 is a schematic flow chart of setting a key frame for explaining data according to the present invention, and as shown in fig. 4, the method of this embodiment may include:

s401, collecting webpage data of a target webpage;

s402, judging according to a preset key frame setting rule, recording all webpage data of a target webpage as first comment data after the rule is confirmed to be met, and setting a key frame identifier for the first comment data;

in the above steps, the key frame is used to identify that all the web page data at the corresponding time is recorded in the corresponding data record, when the key frame is loaded, all the web page data will be replaced in the explanation and playback environment, and then, on the basis of the key frame data, the subsequent non-key frame data is read in to calculate the web page data corresponding to the key frame data. The key frame setting rule is used for judging whether to set a key frame, such as setting situations that after the webpage is loaded for the first time, after webpage browsing jumps, the time interval between the webpage and the last key frame reaches a specified time, the change of the webpage reaches a specified proportion, and components of specified types contained in the webpage change.

The key frame setting method provided by this embodiment combines the differentiated web page data recording manner mentioned in the second embodiment, records the full amount of web page data in the key frame, records the differentiated web page data in the non-key frame, and combines the two, which is beneficial to realizing the calculation of web page data at any time during the explanation playing, and the specific calculation method refers to the related embodiment of the explanation playing. Through the implementation mode, the key frame has the advantages that the calculation amount of webpage data at any moment is reduced when the webpage data are played, the running speed is improved, the functions of fast forward, rewind, jump to a designated position for playing and the like of explanation playing are realized, and data support is provided for the functions.

EXAMPLE five

Fig. 5 is a five flow chart of another embodiment of the method for recording a webpage description according to the present invention, as shown in fig. 5, the method of the present embodiment may include the following steps:

s501, loading a target webpage and loading a first program for executing an explanation and recording function;

s502, starting the comment recording and loading a comment recording control part; starting the change monitoring of the target webpage content; starting audio and/or video data acquisition; starting cursor event monitoring; acquiring current webpage data to generate first comment data;

the difference between this step and the first embodiment is that monitoring of cursor events, such as cursor movement events, is added.

S503A, monitoring the content change of the target webpage, and acquiring the changed webpage data and the occurrence time information to generate first comment data;

S503B, collecting audio and/or video data to generate second comment data;

S503C, monitoring a cursor event, and collecting cursor position information and time information to generate third comment data;

the step collects cursor position and corresponding time information based on the cursor event, and the generated third comment data is another type of comment data.

S504, storing the comment data;

in the embodiment, the collection of the user cursor information is added in the explanation recording process, and a new type of explanation data is generated, so that the user cursor action is played in the explanation playing process, and the explanation experience of the target webpage is further enhanced. Except for monitoring the cursor and acquiring data, other steps are the same as those in the first embodiment, and are not described herein again.

EXAMPLE six

Fig. 6 is another embodiment of the present invention, and as shown in fig. 6, the method of this embodiment may include the following steps:

in the client 10:

s601, generating a first recording and explaining request;

in this step, the first comment recording request is used for recording a comment on a specified target webpage, and it should be noted that the specified target webpage may be any webpage, and the webpage does not include the first program for executing the comment recording function of the present application, that is, the comment cannot be directly recorded from the webpage. For example, the first program is not included in the web page a, and a first recorded comment request for recording comments on the web page a is generated in the web page a, and for example, the first program is not included in the web page B, and a first recorded comment request for recording comments on the web page B is generated in the web page a.

S602, sending a first recording and explaining request;

in the server 20:

s603, processing the first recorded comment request, acquiring a target webpage website, further acquiring webpage content of a target webpage, adding a first program into the webpage content of the target webpage, and generating a webpage or website for recording the comment;

in this step, after the server 20 receives the first recording request, the web address information of the target web page is obtained according to the request, the web page content is obtained based on the web address access, and then the first program for executing the explanation recording function is added to the obtained web page content, so that the generated new web page or the web address corresponding to the new web page has the recording and explanation function. For example, a first recorded comment request for recording a comment on the web page a, which is sent by the web page a, is received, and the implementation principle of the step is that the web page a does not have a function of recording the comment, a new web page generated by the server according to the content of the web page included in the web page and the first program has a function of recording the comment, and the user performs comment recording through the new web page or a corresponding website. Optionally, the new web page is stored in the server 20, and a corresponding website is generated and returned to the client 10 for starting recording. Optionally, a preset website is returned to the server, where the preset website includes the first program, and the user accesses the preset website and dynamically loads the data content of the target webpage through the server 20.

S604, returning a webpage or a corresponding website for recording the explanation;

in the client 10:

s605, receiving a webpage or a website for recording the explanation, loading the webpage or accessing the website to load a target webpage, and starting the recording of the explanation by the first program;

the step of acquiring a web page or a website address containing a recording and explaining function from the server 20 to start recording is basically the same as the step of executing the step of starting the recording and explaining function in the first embodiment and the third embodiment, and is not described herein again.

The embodiment provides a method for generating a recorded and explained webpage or website for an appointed webpage, wherein the appointed webpage does not have a recorded and explained function, and the webpage or website capable of executing the recorded and explained is obtained after being processed by a server, so that the method has the following beneficial effects: the method is suitable for recording the explanation for any webpage, and the recording of the explanation for the target webpage needing to be recorded can be realized without adding any code, so that the implementation cost is low, and the application range is wide.

EXAMPLE seven

Fig. 7 is another embodiment of the present invention, and as shown in fig. 7, the method of this embodiment may include the following steps:

in the client 10:

s701, generating a second recording and explaining request;

in this step, the second recorded comment request is used to record a comment for a specified target web page, and the specified target web page may be any web page that does not include the first program. For example, the first program is not included in the web page a, and a second comment recording request for recording comments on the web page a is generated in the web page a, and for example, the first program is not included in the web page B, and a second comment recording request for recording comments on the web page B is generated in the web page a.

S702, sending a second recording and explaining request;

in the server 20:

s703, processing the second recording and explaining request, acquiring a target webpage website, loading a target webpage in the headless browser, loading a first program, loading a same-screen communication program, and establishing same-screen communication with the client;

in the step, a browsing and executing environment of a target webpage is created at a server, the headless browser is a target webpage browsing and executing environment provided by the server, the explanation recording is performed in the server environment, the target webpage and the first program are loaded in the server browser, and the explanation recording environment of the server is generated. In addition, the mode establishes on-screen communication between the server browser and the client, and executes explanation recording and operation control. Optionally, after the server processes the second recording request, a website for the client to execute the explanation recording and operation control is generated and returned to the client, and the client loads corresponding web content after receiving the website and establishes on-screen communication with the server browser.

S704, collecting webpage data, generating a first comment data storage, generating synchronous webpage data and sending;

the step comprises two functions, namely recording initial comment data at the server and generating snapshot data of the target webpage sent to the client so that the client and the server browser can browse the target webpage on the same screen.

S705, sending synchronous webpage data;

in the client 10:

s706, receiving and loading synchronous webpage data, establishing display synchronization with a server headless browser, and starting user operation monitoring;

the method comprises the steps of establishing on-screen communication between browsers of the server side, receiving target webpage snapshot data sent by the server side to synchronously display, and starting user operation monitoring to acquire an explanation action of a user on a target webpage.

S707, collecting audio and video data;

s708, sending audio and video data;

the steps are that the comment audio and video data are collected and sent from the client side so as to be received and stored by the server side.

In the server 20:

s709, receiving the audio/video data, and generating second comment data;

in the client 10:

s710, collecting user operation data;

s711, sending user operation data;

in the above steps, on the basis that the same screen is established between the client and the headless browser of the server, the user operation is collected from the client 10 and sent to the server 20 for actual execution. Optionally, the client 10 starts cursor event monitoring, collects cursor position information, and sends the cursor position information to the server.

In the server 20:

s712, receiving the user operation data, executing the user operation, generating first comment data, and collecting synchronous webpage data;

the step is actually executed at the server side based on the operation of the client side on the target webpage, the comment data is recorded at the server side, and synchronous webpage data used for synchronization are generated for the client side. Optionally, the cursor position information and the corresponding time information sent by the client 10 are received, and third comment data is generated and stored.

S713, sending synchronous webpage data;

in the client 10:

s714, receiving synchronous webpage data and executing webpage display synchronous processing;

the step enables the display content of the client side to be consistent with the display content of the headless browser of the server side.

The embodiment provides a method for establishing a same screen of a server browser and a client, acquiring user operation at the client, actually operating a target webpage at the server, executing the user operation, and recording webpage explanation based on the target webpage operated in the server browser. In this embodiment, the content of the web page displayed by the client is consistent with that of the headless browser of the server, which can be understood as a snapshot of the running of the target web page. In the above embodiment, the headless browser may browse any web page based on the second recorded comment request, and therefore, this embodiment supports recording comments for any web page. The collection and storage of the comment data at the server side in this embodiment are basically the same as those in the above embodiments, and are not described again here. The method has the advantages that the method is beneficial to executing target webpage operation control and recording control at the server, avoids transmitting a large amount of recording data to the server and reduces the network transmission data volume; in the manner that the comment data is recorded by the client, when the recording end instruction is received, the web page is closed, and at this time, the generated comment data is not completely uploaded to the server, so that the comment data may be lost.

Example eight

Fig. 8 is an eighth flowchart of an embodiment of a method for explaining and playing a webpage according to the present invention, as shown in fig. 1, the method of this embodiment may include the following steps:

s801, accessing the comment playing website, and loading a second program for executing the comment playing function;

in this step, the second program is a program for executing narration playing, and includes narration playing control and narration data loading functions, where the playing control functions include, but are not limited to, playing time display, playing, pausing, skipping, fast forwarding, rewinding, double-speed, stopping, and the like, and the narration data loading functions include loading first narration data, second narration data, third narration data, and the like. Optionally, the comment data loading function further includes a data preloading function, that is, preloading a specified time range or amount of comment data.

S802, loading the comment playing part and downloading comment data;

in this step, after the comment is played, a component for controlling the play of the comment is displayed. Optionally, before the comment playing is not started, a play comment button and comment summary information (such as time length, author, and the like) are displayed, and after the comment is started, control buttons such as play time display, play time axis, fast forward, rewind, double speed, stop, and the like are displayed.

S803, after receiving the play instruction, starting the comment play, reading the comment data, and starting the timer;

in this step, the timer is used to calculate the playing time of the commentary data.

S804, according to a predetermined time calculation rule, when it is determined that the timer time matches the time information included in the comment data, or when it is determined that the event executed by the second program is a specific event bound in the comment data, executing the comment data playing, including: calculating and displaying webpage content based on the first comment data, playing audio and/or video based on the second comment data, and setting a display cursor based on the third comment data;

this step provides two ways of playing the narration data, the first way is based on time control, that is, when the time of the timer matches with the time contained in the narration data, the narration data is played, for example, the time information contained in a certain piece of the first narration data is 20 seconds, that is, the narration record is generated when the recording start time is 20 seconds, and when the playing is executed, when the timer times to 20 seconds, the narration data is started to be played; another is to determine playing based on the event in the playing page and the event bound in the comment data, for example, if a play start event is bound in the first comment data of the initial web page data of the recording target web page, the comment data record is played after the play start.

In the above embodiment, the second program plays the narration data based on the browsing, operating and explaining processes when the narration is reproduced and recorded, and the present invention adopts a synthetic playing manner, that is, the change of the web page display content at each time point is reproduced through the first narration data, the audio/video data corresponding to the recorded scene is played through the second narration data, and the cursor position, the cursor movement, and the like at each time point are reproduced through the third narration data. The method has the advantages that several modes of synthesizing and playing the comment data are used, the playing effect which is the same as that of the screen recorded video is restored by utilizing the webpage running environment, the image quality is completely lossless, and the comment content can be played in the webpage without other software when a user views the target webpage comment.

Example nine

Fig. 9 is a schematic flow chart of playing serialized webpage data according to the present invention, and as shown in fig. 9, the method of the present embodiment may include:

s901, reading the changed serialized web page data stored in the first comment data;

s902, searching a corresponding first data node in the currently displayed objectified webpage data corresponding to the changed node information;

s903, determining the nature of the difference included in the first comment data;

when the nature of the difference is judged to be increased:

s904, adding the content contained in the changed node information in the first data node;

when the nature of the difference is judged to be deleted:

s905, deleting the first data node;

when judging that the nature of the difference is replacement:

s906, replacing the first data node with the content contained in the changed node information;

in the above steps, the second program performs playing of the first comment data based on serialized webpage data, for example, if the webpage data is DOM data, a DOM object model is built at the client, S901 receives the changed serialized webpage data, and after deserialization, the changed serialized webpage data includes content such as node information, node change properties, and node change data, S902 finds a corresponding data node, that is, a first data node, in the DOM object model according to the node information in the received serialized webpage data, and S903 judges the node change properties and performs corresponding processing according to the properties. Optionally, when the first comment data carries the key frame identifier, the DOM object model is reconstructed based on the webpage data contained in the first comment data.

In this embodiment, the client plays the first comment data, performs playing based on a data object model (e.g., DOM object model) constructed at the client, receives the first comment data to calculate and update the data object model, and generates web page display data based on the data object model, thereby realizing playing processing of serialized web page data.

Example ten

Fig. 10 is a schematic flow chart of fast forwarding, rewinding or jumping to a specific position to play narration data according to the present invention, and as shown in fig. 10, the method of the present embodiment may include:

s1001, receiving a fast forward, backward or jump to a specified position to play an instruction;

s1002, calculating a first time point to jump to;

the step is to calculate a first time point according to a control playing instruction of fast forward, backward or jumping to a specified position and the like triggered by a user, wherein the first time point is a time point to which the user intends to jump. Optionally, after receiving the fast forward play instruction, a preset time length is added backwards based on the current time to obtain a first time point; after the backward playing instruction is received, a first time point is obtained based on the fact that the preset time length is increased forwards at the current moment; and acquiring a first time point according to the playing progress control after the instruction of jumping to the appointed position for playing is received.

S1003, playing audio and/or video data based on the first time point;

s1004, forward searching a latest first comment data with a key frame identification or all webpage data based on the first time point, and acquiring corresponding time information as a second time point according to a searching result;

the second time point is obtained through the first time point, and the purpose of the step is to obtain the webpage data corresponding to the first time point which is appointed by the user and is played by jumping to the user, but the invention records the comment data for displaying in a mode of monitoring the change of the webpage content, namely records the change of the webpage content every time, and searches the second time point for obtaining the time point which is closest to the first time point and is provided with the full amount of webpage data.

S1005, acquiring first comment data including the second time point, the first time point and a time therebetween as a first comment data queue;

s1006, extracting elements in the first comment data queue according to a time sequence, sequentially executing webpage data calculation based on all webpage data included in a first element in the first comment data queue according to the webpage data included in the elements, obtaining webpage data corresponding to a first time point and replacing currently displayed webpage content;

in the above steps, based on a time point which is closest to the designated playing position and has a key frame identifier or stores all the webpage data, webpage data calculation is sequentially executed based on the first comment data between the second time point and the first time point, and finally, the webpage data corresponding to the designated playing position is obtained and displayed. The webpage data calculation refers to performing calculation according to the changed property based on the webpage content data at a moment and the changed webpage data recorded in the first comment data to obtain new webpage content data.

S1007, the timer is modified to continue playing based on the first time point;

and correspondingly setting the timer according to the time information corresponding to the playing position appointed by the user.

Optionally, when the fast forward instruction is received or the designated play position is the backward position of the current position in step S1001 above, after the first time point is obtained in the calculation of S1002, the first comment data between the current time point and the first time point is obtained as the first comment data queue, and then S1006 is executed to obtain the web page data corresponding to the first time point and replace the currently displayed web page content.

The method provided by the embodiment is based on the data recording mode of the invention, realizes the functions of fast forwarding, rewinding or jumping to the appointed position for playing similar to the traditional video, and is convenient for users to flexibly play and control.

The technical characteristics of the method are that the conventional video recording mode is replaced by a mode of collecting webpage data, and the playing effect of the conventional screen recording is obtained by a mode of recording several types of comment data respectively and playing the comment data in a combined mode. The beneficial effects include: compared with the traditional screen recording, the data recording amount is very small, and the transmission speed is high; the webpage program is used for restoring to obtain the playing effect, and the image quality is completely lossless; and flexible play control like traditional video is realized.

It should be noted that, in the above embodiment of the method of the present application, some steps may be replaced by similar steps, and some steps may be implemented by combining, decomposing, and adjusting the order, so that the above embodiment does not constitute a limitation on a method for recording and playing a web page narration proposed by the present application.

Embodiments of the present application further provide a computer program product, which when read and executed by one or more processors can implement the method provided by any one of the above embodiments.

The present application further provides a computer-readable storage medium, in which a software program is stored, and the software program is read by one or more processors and executes the steps of the method for recording and playing the webpage narration according to any of the embodiments.

It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by a computer program, which can be stored in a computer-readable storage medium, and can include the processes of the embodiments of the methods described above when the computer program is executed. The storage medium may be a non-volatile storage medium such as a magnetic disk, an optical disk, a Read-Only Memory (ROM), or a Random Access Memory (RAM).

The above description is only a specific implementation of the embodiments of the present application, but the scope of the embodiments of the present application is not limited thereto, and any changes or substitutions that can be easily conceived by those skilled in the art within the technical scope of the embodiments of the present application should be covered by the scope of the embodiments of the present application. Therefore, the protection scope of the embodiments of the present application shall be subject to the protection scope of the claims.

Claims

1. A method for recording a web page narration is used for recording the narration for a target web page, and comprises the following steps:

sending the comment data to a server;

storing the comment data at a server, wherein the comment data is used for providing playing data for a comment playing webpage of the target webpage, the comment playing webpage comprises a second program for executing a comment playing function, and the second program loads the comment data and a comment playing control to play a comment;

2. The method according to claim 1, wherein collecting the changed web page data and occurrence time information generates the first comment data, and further comprising:

after monitoring that the target webpage content changes, acquiring webpage data with difference before and after the change as the changed webpage data, or acquiring the property of the difference and adding the difference to the first comment data, wherein the property of the difference comprises one of addition, replacement and deletion.

3. The method of claim 1, wherein collecting the web page data and the changed web page data generates the first comment data, and further comprising:

serializing the webpage data or the changed webpage data to generate serialized webpage data, generating the first comment data based on the serialized webpage data, serializing the changed webpage data, and recording changed node information.

4. The method according to claim 1 or 3, wherein generating the first comment data based on the web page data or the serialized web page data further comprises:

according to a preset key frame setting rule, after the preset key frame setting rule is confirmed to be met, recording all webpage data of the target webpage as the first explanation data, and setting a key frame identifier for the first explanation data.

5. The method according to claim 1, wherein after the target webpage receives the instruction for starting the narration recording to start the narration recording, the method further comprises:

and starting cursor event monitoring, and acquiring cursor position information and the time information to generate third comment data after the cursor event is monitored, wherein the third comment data is one type of comment data.

6. The method of claim 1, wherein after receiving the instruction to start recording the commentary, the method further comprises:

generating a first recording comment request at a client and sending the first recording comment request to a server;

receiving a webpage for recording the explanation returned by the server or a website corresponding to the webpage, loading the webpage for recording the explanation or accessing the website for recording the explanation to load the target webpage content, and starting the explanation recording by the first program;

the server side obtains a website of the target webpage based on the request after receiving a request for recording the commentary sent by the target webpage, further obtains the webpage content of the target webpage, adds the first program into the webpage content of the target webpage, generates the webpage for recording the commentary, and returns the webpage for recording the commentary, the webpage content or the corresponding website.

7. The method according to claim 1, after receiving the instruction to start commentary, further comprising:

generating a second recording and explaining request at the client and sending the second recording and explaining request to the server;

receiving and processing the second recorded comment request at the server, acquiring the target webpage address based on the second recorded comment request, loading the target webpage in the server browser, loading the first program, starting comment recording and loading a comment recording control component, starting content change monitoring of the target webpage, and acquiring webpage data to generate the first comment data; loading a same-screen communication program, establishing same-screen communication with the client, acquiring webpage data to generate synchronous webpage data, and sending the synchronous webpage data to the client;

receiving the user operation data at the server, executing a user operation event contained in the user operation data, and acquiring changed webpage data and occurrence time information to generate first comment data after monitoring that the target webpage content is changed; receiving the audio and/or video data and generating the second narration data based thereon; storing the narration data;

8. A method for playing a web page narration, the method being used for playing the web page narration and comprising:

accessing an explanation playing website, and loading a second program for executing an explanation playing function, wherein the second program comprises an explanation playing control function and an explanation data loading function;

starting the comment playing after receiving the playing instruction, reading the comment data, starting a timer, and executing the comment data playing when one of the following conditions is met: the method comprises the following steps that firstly, according to a preset time calculation rule, when the time of the timer is confirmed to accord with time information contained in the comment data; a second condition is that when the event executed by the second program is determined to be a specific event bound in the comment data; the judging of the commentary data playing according to the type of the commentary data comprises the following steps: calculating and displaying webpage content based on the first comment data, playing audio and/or video based on the second comment data, and setting a display cursor based on the third comment data; shielding the execution of webpage events which are not used for playing control in the process of playing the comment data;

9. The method according to claim 8, wherein when the first comment data is played and confirmed as the changed serialized webpage data, the method further comprises:

according to the changed serialized webpage data stored in the first comment data, searching a corresponding first data node in the webpage data which corresponds to the displayed object based on the changed node information contained in the first comment data, and performing corresponding processing on the first data node based on the property of the difference contained in the first comment data, wherein the content contained in the changed node information is added to the first data node when the property of the difference is determined to be increased; deleting the first data node when the nature of the difference is confirmed to be deletion; and replacing the first data node with the content contained in the changed node information when the property of the difference is determined to be replacement.

10. The method of claim 8, further comprising, after receiving a fast forward, rewind, or jump to a specified location play instruction:

calculating a first time point of jumping to according to the fast forward, backward or jump to a specified position playing instruction, and playing audio and/or video data based on the first time point; searching a latest first comment data with a key frame mark or all the webpage data forward based on the first time point, obtaining corresponding time information of the first comment data as a second time point according to the first comment data obtained by searching, obtaining the first comment data containing the second time point, the first time point and the time information contained in the first comment data as a first comment data queue, extracting elements in the first comment data queue according to a time sequence, sequentially performing webpage data calculation based on all the webpage data contained in a first element in the first comment data queue according to the webpage data contained in the first comment data queue, obtaining the webpage data corresponding to the first time point and replacing currently displayed webpage content, and continuously playing by modifying a timer based on the first time point.