CN112637539A - Method for drawing video playback time axis based on Canvas - Google Patents

Method for drawing video playback time axis based on Canvas Download PDF

Info

Publication number
CN112637539A
CN112637539A CN202011472763.8A CN202011472763A CN112637539A CN 112637539 A CN112637539 A CN 112637539A CN 202011472763 A CN202011472763 A CN 202011472763A CN 112637539 A CN112637539 A CN 112637539A
Authority
CN
China
Prior art keywords
time
time axis
canvas
event
component
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202011472763.8A
Other languages
Chinese (zh)
Inventor
张亮
尹萍
安晓博
高美容
林栋�
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Inspur Cloud Information Technology Co Ltd
Original Assignee
Inspur Cloud Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Inspur Cloud Information Technology Co Ltd filed Critical Inspur Cloud Information Technology Co Ltd
Priority to CN202011472763.8A priority Critical patent/CN112637539A/en
Publication of CN112637539A publication Critical patent/CN112637539A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N5/00Details of television systems
    • H04N5/76Television signal recording
    • H04N5/91Television signal processing therefor
    • H04N5/93Regeneration of the television signal or of selected parts thereof

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The invention discloses a method for drawing a video playback time axis based on Canvas, which relates to the technical field of front-end development; based on a Canvas component, initializing a time axis by using a parameter start _ timestamp start time and various types of video segment groups of the parameter timecell, binding corresponding movement indication events according to different terminals by using the Canvas component, and calling an internal method of the component by using the Canvas component according to the playing speed of a video file: and dragging the time axis by using the correspondingly bound mobile indication event according to different terminals, and/or zooming the time axis by using the correspondingly bound mobile indication event according to different terminals, and adjusting the time axis to finish drawing.

Description

Method for drawing video playback time axis based on Canvas
Technical Field
The invention discloses a method, relates to the technical field of front-end development, and particularly relates to a Canvas-based method for drawing a video playback time axis.
Background
The monitoring video system is widely applied to daily life as a social security guarantee system, a video playback time axis is used as a front end UI component for positioning a video segment, and the performance and the use mode of the monitoring video system play a vital role in the query speed and the display result of a video. Currently, most common time axis UI components on the market are JavaScript control DOM element simulation time axis schemes or Flash drawing time axis schemes.
The JavaScript-controlled DOM element simulation time axis scheme has the defects that the performance of rendering DOM elements by a browser is poor, particularly when time axis dragging and precision changing operations are carried out, the DOM elements are destroyed and generated ceaselessly to enable the rendering performance of the browser to be poorer, and the DOM elements as resources which can block webpage rendering can cause the whole webpage to be blocked, so that user experience is influenced; meanwhile, the DOM element simulation time axis has compatibility risks on different versions of browsers.
The Flash drawing time axis scheme can solve the rendering performance problem of the DOM scheme, but the Flash technology needs browser support, and at present, a mainstream browser does not start the support of the Flash technology by default, particularly at a mobile terminal, so that the applicable scene of a UI component of the time axis is limited; in addition, Flash technology has unrepaired security holes, so that the scheme has security risks.
Disclosure of Invention
Aiming at the problems in the prior art, the invention provides a method for drawing a video playback time axis based on Canvas, which has the characteristics of strong universality, simple and convenient implementation and the like and has wide application prospect.
The specific scheme provided by the invention is as follows:
a method for drawing a video playback time axis based on Canvas comprises the following steps: based on the Canvas component, initializing the time axis by using the parameter start _ timestamp start time and the parameter timestamp video segment arrays of various types,
binding corresponding movement indication events according to different terminals by utilizing a Canvas component,
calling an internal method of the component by using the Canvas component according to the playing speed of the video file:
according to different terminals, the time axis is dragged by using the corresponding bound movement indication event,
and/or the time axis is scaled according to the different terminals, with the respective bound movement indicating events,
and adjusting the time axis to finish drawing.
Preferably, in the method for drawing the video playback timeline based on the Canvas, a Canvas component is used to bind corresponding movement indication events according to the PC side: binding a mouse down event, a mouse move event, a mouse up event and a mouse wheel mousewheel event for the component.
Preferably, in the method for drawing the video playback timeline based on the Canvas, a Canvas component is used to bind the corresponding movement indication event according to the mobile terminal: binding a finger touch screen touchstart event, a finger movement event after touching the screen, a finger off screen touchend event and an inter-finger zoom event for the component.
Preferably, in the method for drawing the video playback time axis based on the Canvas, the Canvas component is used for dragging the time axis according to the PC terminal: recording a screen coordinate X-axis value X1 when the mouse is triggered to be pressed through a bound corresponding mouse event, recording a screen coordinate X-axis value X2 when the mouse in a pressed state moves, wherein if the values of X2-X1 are positive numbers, the time axis moves rightwards, the moving distance is a value of X2-X1, and the current time of the time axis is modified to be the original time- (moving distance/20-current precision); if the value of x2-x1 is negative, the time axis is moved to the left, the moving distance is the value of x1-x2, and the current time of the time axis is modified to be the original time + (moving distance/20 × current precision).
Preferably, in the method for drawing the video playback time axis based on the Canvas, the Canvas component is used for dragging the time axis according to the mobile terminal: recording a screen coordinate X-axis value X1 when the finger is triggered to contact the screen through the bound corresponding finger contact event, recording a screen coordinate X-axis value X2 when the finger contacts the screen and moves behind the screen, wherein if the values of X2-X1 are positive numbers, the time axis moves rightwards, the moving distance is a value of X2-X1, and the current time of the time axis is modified into the original time- (moving distance/20-current precision); if the value of x2-x1 is negative, the time axis is moved to the left, the moving distance is the value of x1-x2, and the current time of the time axis is modified to be the original time + (moving distance/20 × current precision).
Preferably, in the method for drawing the video playback time axis based on the Canvas, the time axis is scaled according to the PC side by using the Canvas component:
the assembly monitors a mouse roller event, when the roller direction is upward, the precision of the time shaft assembly is increased, the maximum value is the preset time represented by each scale, when the roller direction is downward, the precision of the time shaft assembly is decreased, the minimum value is the preset time represented by each scale, and the time shaft assembly redraws the assembly according to the updated latest precision.
Preferably, in the method for drawing the video playback time axis based on the Canvas, the time axis is scaled according to the mobile terminal by using a Canvas component: the assembly monitors a zooming event between fingers, when the moving direction of the two fingers is enlarged, the precision of the time shaft assembly is increased, the maximum value is the preset time represented by each scale, when the moving direction of the two fingers is reduced, the precision of the time shaft assembly is reduced, the minimum value is the preset time represented by each scale, and the time shaft assembly redraws the assembly according to the updated latest precision.
A system for drawing a video playback time axis based on Canvas comprises an initialization module, a binding module and a drawing module,
the initialization module performs time axis initialization by using the parameter start _ timestamp start time and the parameter timestamp various types of video segment arrays based on the Canvas component,
the binding module utilizes the Canvas component to bind corresponding movement indication events according to different terminals,
the drawing module calls an internal method of the component according to the playing speed of the video file by using a Canvas component:
according to different terminals, the time axis is dragged by using the corresponding bound movement indication event,
and/or the time axis is scaled according to the different terminals, with the respective bound movement indicating events,
and adjusting the time axis to finish drawing.
The invention has the advantages that:
compared with the current timer shaft scheme based on native Dom or Flash, the method for drawing the video playback timer shaft based on Canvas has the following technical advantages:
the loading expenses of destroying and rendering the Dom node can be saved, so that the aim of saving the memory of the browser is fulfilled; the browser is not required to render the Dom through the Dom engine, pixel-level rendering is directly performed, the rendering speed is high, and therefore the purpose of improving user experience is achieved; the risk of compatible difference of the browsers can be reduced, so that the aim of reducing development and adaptation work is fulfilled;
moreover, the Canvas component adopted by the method can better support a mainstream browser and terminals such as a PC, a Phone and a Pad, and the problems of compatibility and safety of a Flash browser and no continuous maintenance and updating are perfectly solved.
Drawings
FIG. 1 is a schematic flow diagram of the process of the present invention;
FIG. 2 is a schematic time-line drawing of the method of the present invention.
Detailed Description
The present invention is further described below in conjunction with the following figures and specific examples so that those skilled in the art may better understand the present invention and practice it, but the examples are not intended to limit the present invention.
The invention provides a method for drawing a video playback time axis based on Canvas, which comprises the following steps: based on the Canvas component, initializing the time axis by using the parameter start _ timestamp start time and the parameter timestamp video segment arrays of various types,
binding corresponding movement indication events according to different terminals by utilizing a Canvas component,
calling an internal method of the component by using the Canvas component according to the playing speed of the video file:
according to different terminals, the time axis is dragged by using the corresponding bound movement indication event,
and/or the time axis is scaled according to the different terminals, with the respective bound movement indicating events,
and adjusting the time axis to finish drawing.
The method of the invention utilizes Canvas components to draw the image in real time on the webpage and can operate the image content. The efficient rendering and rich API of Canvas are fully utilized to realize the drawing of a time axis, and the event response mechanism of Canvas is utilized to realize the monitoring and response of PC end mouse clicking and mobile end finger touching. HTML5 is the latest standard of the Internet and is supported by various large browser manufacturers, and Canvas is a subset of HTML5 technology, can be widely supported by a PC end and a mobile end, and has good compatibility.
In some embodiments of the present invention, in the time axis initialization, the time axis initialization is mainly performed by using two parameters, i.e. start time start _ timestamp (for displaying the time in the middle of the time axis) and each type of record segment array timestamp (for drawing the record segments with different colors), the default distance between the two scales is 20PX, the supported precision range can be [1,2,5,10,15,20,30,60,120], the unit is minutes/grid, and the default precision is that each scale represents a period of time, such as 15 minutes. The time axis can draw the time axis scale through a Canvas drawing API according to the start time start _ timestamp and the default precision, and draw the video segments with different colors under the scale layer according to the video segment arrays timecell of various types.
After the initialization drawing of the time axis is finished, the event binding for the component is started, the method can be used for automatically judging the current browser environment, monitoring different events at the PC end and the mobile end to realize the functions of dragging and zooming the time axis, and a user can freely use the method in the PC end and the mobile end without difference.
The event binding is processed at the PC end and the mobile end respectively as follows:
when the current browser is a PC end browser, binding a mouse pressing event, a mouse moving event, a mouse releasing event and a mouse wheel mouse event for the component.
Currently, the browser is a mobile terminal browser, and a finger touch screen touchstart event, a finger touch screen rear mobile touchmove event and a finger exit screen touchend event are bound for the component.
After the initialization of the time axis is completed, in the playing process of the video, calling an internal method of the time axis assembly according to the playing speed of the video file, setting the current time of the time axis and the video segment groups time cell of various types, and calling a Canvas API (application program interface) to redraw the time axis, so that the effect that the time axis synchronously changes time and the video segments in the playing process of the video is realized.
The method comprises the following steps of utilizing a Canvas component to drag a time axis according to a PC end: recording a screen coordinate X-axis value X1 when the mouse is triggered to be pressed through a bound corresponding mouse event, recording a screen coordinate X-axis value X2 when the mouse in a pressed state moves, wherein if the values of X2-X1 are positive numbers, the time axis moves rightwards, the moving distance is a value of X2-X1, and the current time of the time axis is modified to be the original time- (moving distance/20-current precision); if the value of x2-x1 is negative, the time axis is moved to the left, the moving distance is the value of x1-x2, and the current time of the time axis is modified to be the original time + (moving distance/20 × current precision).
And dragging the time axis according to the mobile terminal by utilizing a Canvas component: recording a screen coordinate X-axis value X1 when the finger is triggered to contact the screen through the bound corresponding finger contact event, recording a screen coordinate X-axis value X2 when the finger contacts the screen and moves behind the screen, wherein if the values of X2-X1 are positive numbers, the time axis moves rightwards, the moving distance is a value of X2-X1, and the current time of the time axis is modified into the original time- (moving distance/20-current precision); if the value of x2-x1 is negative, the time axis is moved to the left, the moving distance is the value of x1-x2, and the current time of the time axis is modified to be the original time + (moving distance/20 × current precision).
When the time axis needs to be zoomed, the Canvas component is utilized to zoom the time axis according to the PC end:
the assembly monitors a mouse roller event, when the direction of the roller is upward, the precision of the time shaft assembly is increased, the maximum value is the preset time represented by each scale, for example, 120 minutes is represented, when the direction of the roller is downward, the precision of the time shaft assembly is decreased, the minimum value is the preset time represented by each scale, for example, 1 minute is represented, and the time shaft assembly redraws the assembly according to the updated latest precision.
And the Canvas component is utilized to scale the time axis according to the mobile terminal: the assembly monitors a zooming event between fingers, when the moving direction of the two fingers is zooming, the precision of the time shaft assembly is increased, the maximum value is the preset time represented by each scale, for example, 120 minutes is represented, when the moving direction of the two fingers is zooming, the precision of the time shaft assembly is decreased, the minimum value is the preset time represented by each scale, for example, 1 minute is represented, and the time shaft assembly redraws the assembly according to the updated latest precision.
The invention also provides a Canvas-based system for drawing the video playback time axis, which comprises an initialization module, a binding module and a drawing module,
the initialization module performs time axis initialization by using the parameter start _ timestamp start time and the parameter timestamp various types of video segment arrays based on the Canvas component,
the binding module utilizes the Canvas component to bind corresponding movement indication events according to different terminals,
the drawing module calls an internal method of the component according to the playing speed of the video file by using a Canvas component:
according to different terminals, the time axis is dragged by using the corresponding bound movement indication event,
and/or the time axis is scaled according to the different terminals, with the respective bound movement indicating events,
and adjusting the time axis to finish drawing.
The information interaction, execution process and other contents between the modules in the system are based on the same concept as the method embodiment of the present invention, and specific contents can be referred to the description in the method embodiment of the present invention, and are not described herein again.
It should be noted that not all steps and modules in the processes and system structures in the preferred embodiments are necessary, and some steps or modules may be omitted according to actual needs. The execution order of the steps is not fixed and can be adjusted as required. The system structure described in the above embodiments may be a physical structure or a logical structure, that is, some modules may be implemented by the same physical entity, or some modules may be implemented by a plurality of physical entities, or some components in a plurality of independent devices may be implemented together.
The above-mentioned embodiments are merely preferred embodiments for fully illustrating the present invention, and the scope of the present invention is not limited thereto. The equivalent substitution or change made by the technical personnel in the technical field on the basis of the invention is all within the protection scope of the invention. The protection scope of the invention is subject to the claims.

Claims (8)

1. A method for drawing a video playback time axis based on Canvas is characterized in that based on Canvas components, time axis initialization is carried out by using parameter start _ time start time and various types of video segment arrays of parameter timecell,
binding corresponding movement indication events according to different terminals by utilizing a Canvas component,
calling an internal method of the component by using the Canvas component according to the playing speed of the video file:
according to different terminals, the time axis is dragged by using the corresponding bound movement indication event,
and/or the time axis is scaled according to the different terminals, with the respective bound movement indicating events,
and adjusting the time axis to finish drawing.
2. The method according to claim 1, wherein a Canvas component is used to bind corresponding move indication events according to the PC side: binding a mouse down event, a mouse move event, a mouse up event and a mouse wheel mousewheel event for the component.
3. The method according to claim 1, wherein a Canvas component is used to bind corresponding move indication events according to the moving end: binding a finger touch screen touchstart event, a finger movement event after touching the screen, a finger off screen touchend event and an inter-finger zoom event for the component.
4. The method for drawing the video playback timeline based on the Canvas as claimed in claim 2, wherein the Canvas component is used for dragging the timeline according to the PC end: recording a screen coordinate X-axis value X1 when the mouse is triggered to be pressed through a bound corresponding mouse event, recording a screen coordinate X-axis value X2 when the mouse in a pressed state moves, wherein if the values of X2-X1 are positive numbers, the time axis moves rightwards, the moving distance is a value of X2-X1, and the current time of the time axis is modified to be the original time- (moving distance/20-current precision); if the value of x2-x1 is negative, the time axis is moved to the left, the moving distance is the value of x1-x2, and the current time of the time axis is modified to be the original time + (moving distance/20 × current precision).
5. The method for drawing the video playback timeline based on the Canvas as claimed in claim 3, wherein the Canvas component is used for dragging the timeline according to the mobile terminal: recording a screen coordinate X-axis value X1 when the finger is triggered to contact the screen through the bound corresponding finger contact event, recording a screen coordinate X-axis value X2 when the finger contacts the screen and moves behind the screen, wherein if the values of X2-X1 are positive numbers, the time axis moves rightwards, the moving distance is a value of X2-X1, and the current time of the time axis is modified into the original time- (moving distance/20-current precision); if the value of x2-x1 is negative, the time axis is moved to the left, the moving distance is the value of x1-x2, and the current time of the time axis is modified to be the original time + (moving distance/20 × current precision).
6. The method according to claim 2 or 4, wherein the Canvas component is used for scaling the time axis according to the PC side:
the assembly monitors a mouse roller event, when the roller direction is upward, the precision of the time shaft assembly is increased, the maximum value is the preset time represented by each scale, when the roller direction is downward, the precision of the time shaft assembly is decreased, the minimum value is the preset time represented by each scale, and the time shaft assembly redraws the assembly according to the updated latest precision.
7. The method according to claim 3 or 5, wherein the Canvas component is used for scaling the time axis according to the mobile terminal: the assembly monitors a zooming event between fingers, when the moving direction of the two fingers is enlarged, the precision of the time shaft assembly is increased, the maximum value is the preset time represented by each scale, when the moving direction of the two fingers is reduced, the precision of the time shaft assembly is reduced, the minimum value is the preset time represented by each scale, and the time shaft assembly redraws the assembly according to the updated latest precision.
8. A system for drawing a video playback time axis based on Canvas is characterized by comprising an initialization module, a binding module and a drawing module,
the initialization module performs time axis initialization by using the parameter start _ timestamp start time and the parameter timestamp various types of video segment arrays based on the Canvas component,
the binding module utilizes the Canvas component to bind corresponding movement indication events according to different terminals,
the drawing module calls an internal method of the component according to the playing speed of the video file by using a Canvas component:
according to different terminals, the time axis is dragged by using the corresponding bound movement indication event,
and/or the time axis is scaled according to the different terminals, with the respective bound movement indicating events,
and adjusting the time axis to finish drawing.
CN202011472763.8A 2020-12-15 2020-12-15 Method for drawing video playback time axis based on Canvas Pending CN112637539A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011472763.8A CN112637539A (en) 2020-12-15 2020-12-15 Method for drawing video playback time axis based on Canvas

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011472763.8A CN112637539A (en) 2020-12-15 2020-12-15 Method for drawing video playback time axis based on Canvas

Publications (1)

Publication Number Publication Date
CN112637539A true CN112637539A (en) 2021-04-09

Family

ID=75312827

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011472763.8A Pending CN112637539A (en) 2020-12-15 2020-12-15 Method for drawing video playback time axis based on Canvas

Country Status (1)

Country Link
CN (1) CN112637539A (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113282518A (en) * 2021-07-22 2021-08-20 广州市玄武无线科技股份有限公司 Method and device for tracking and displaying form behaviors of mobile terminal in real time

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150193380A1 (en) * 2012-04-13 2015-07-09 Google Inc. Time-based presentation editing
WO2017166858A1 (en) * 2016-03-31 2017-10-05 百度在线网络技术(北京)有限公司 Method and device for reversely controlling mobile page
CN110727825A (en) * 2019-09-20 2020-01-24 彩讯科技股份有限公司 Animation playing control method, device, server and storage medium
CN111078035A (en) * 2019-11-29 2020-04-28 交通银行股份有限公司 Drawing method based on HTML5Canvas
CN111753241A (en) * 2020-07-01 2020-10-09 浪潮云信息技术股份公司 Method and system for drawing multifunctional time template based on canvas

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150193380A1 (en) * 2012-04-13 2015-07-09 Google Inc. Time-based presentation editing
WO2017166858A1 (en) * 2016-03-31 2017-10-05 百度在线网络技术(北京)有限公司 Method and device for reversely controlling mobile page
CN110727825A (en) * 2019-09-20 2020-01-24 彩讯科技股份有限公司 Animation playing control method, device, server and storage medium
CN111078035A (en) * 2019-11-29 2020-04-28 交通银行股份有限公司 Drawing method based on HTML5Canvas
CN111753241A (en) * 2020-07-01 2020-10-09 浪潮云信息技术股份公司 Method and system for drawing multifunctional time template based on canvas

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
LIAOANRAN: "使用canvas编写时间轴插件", 《博客园》 *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113282518A (en) * 2021-07-22 2021-08-20 广州市玄武无线科技股份有限公司 Method and device for tracking and displaying form behaviors of mobile terminal in real time

Similar Documents

Publication Publication Date Title
CN107577495B (en) Interface display method, device and terminal
CN109101157A (en) Sidebar icon setting method, device, terminal and storage medium
CN101661375B (en) Touch control method, system and display terminal
US20120066638A1 (en) Multi-dimensional auto-scrolling
CN105992056A (en) Video decoding method and device
WO2011116601A1 (en) Device and method for implementing landscape/portrait screen switching of mobile terminal
JP2015520881A (en) Drawing method, apparatus, and terminal
KR102121905B1 (en) Method and apparatus for setting background of ui control, and terminal
CN103729107A (en) Method and device for achieving suspension target
CN104866182A (en) Movement method of picture data and mobile terminal
CN105389084A (en) Convenient information inputting method for user of mobile terminal and mobile terminal
WO2016192546A1 (en) Method and device for updating data point of dynamic curve
CN114527897B (en) Tracking and restoring pointer locations between applications
WO2023092992A1 (en) Page element processing method and device, and computer-readable storage medium
CN103631824B (en) A kind of Webpage display process and device
CN113835585A (en) Application interface switching method, device and equipment based on navigation and storage medium
CN112637539A (en) Method for drawing video playback time axis based on Canvas
CN112596598B (en) Display control method, display control device and electronic equipment
CN112462989A (en) Operation method and device of intelligent interaction panel, intelligent interaction panel and medium
EP2608003A1 (en) Method and device for movement of image object
CN114510308B (en) Method, device, equipment and medium for storing application page by mobile terminal
US20240095141A1 (en) Displaying information flow
CN103365559A (en) Method for drawing sliding trace and mobile terminal
CN105320405A (en) Icon display method and terminal
CN105573705A (en) Display control method and terminal

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20210409