CN110493659A - A kind of implementation method, device and the equipment of video player interactive function - Google Patents
A kind of implementation method, device and the equipment of video player interactive function Download PDFInfo
- Publication number
- CN110493659A CN110493659A CN201910778328.9A CN201910778328A CN110493659A CN 110493659 A CN110493659 A CN 110493659A CN 201910778328 A CN201910778328 A CN 201910778328A CN 110493659 A CN110493659 A CN 110493659A
- Authority
- CN
- China
- Prior art keywords
- video player
- video
- react
- interactive function
- 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
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
- G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
- G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/442—Monitoring of processes or resources, e.g. detecting the failure of a recording device, monitoring the downstream bandwidth, the number of times a movie has been viewed, the storage space available from the internal hard disk
- H04N21/44213—Monitoring of end-user related data
- H04N21/44222—Analytics of user selections, e.g. selection of programs or purchase activity
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/443—OS processes, e.g. booting an STB, implementing a Java virtual machine in an STB or power management in an STB
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/47—End-user applications
- H04N21/472—End-user interface for requesting content, additional data or services; End-user interface for interacting with content, e.g. for content reservation or setting reminders, for requesting event notification, for manipulating displayed content
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
- H04N21/81—Monomedia components thereof
- H04N21/8166—Monomedia components thereof involving executable data, e.g. software
- H04N21/8173—End-user applications, e.g. Web browser, game
Abstract
This application discloses a kind of implementation methods of video player interactive function.Disclosed herein as well is the realization devices and equipment of a kind of video player interactive function.The application can have been pre-set based on React Native encapsulation, and the React component with video player interactive function, therefore after obtaining the property parameters of React Native video player, directly the property parameters can be applied in the React component set in advance, to obtain target React component corresponding with current React Native video player, the interactive function of current React Native video player and user can be realized using target React component in this way, to save the development time, improve development efficiency, also possibility is provided for the online as early as possible of product.
Description
Technical field
This application involves technical field of software development, in particular to a kind of implementation method of video player interactive function,
Device and equipment.
Background technique
React Native (abbreviation RN) is the mobile terminal Cross-border congestion management frame when former prevalence, is based on the frame,
Developer can be applied by one App for being adapted to Android, iOS platform simultaneously of js code fast construction.
If developing video player based on React Native, it is necessary to by the third party of " react-native-video "
Library, but the React Native video player thus developed does not have interactive function.If desired React is realized
The interactive function of Native video player, it is necessary to which developer is according to the attribute of current React Native video player
Parameter is write code and is developed, to increase the workload of developer, reduces development efficiency, also extends product
Development cycle and on-line time.
Summary of the invention
The main purpose of the application is to provide implementation method, device and the equipment of a kind of video player interactive function,
Aim to solve the problem that the development cycle is long, the slow technical problem of efficiency.
To achieve the above object, this application provides a kind of implementation methods of video player interactive function, comprising:
Obtain the property parameters of React Native video player；
Property parameters are applied in the View component in default React component, acquisition is broadcast with React Native video
Put the corresponding target React component of device；Default React component is to be encapsulated based on React Native with video player friendship
The component of mutual function；
The interactive function of React Native video player and user is realized using target React component.
Preferably, the interactive function of React Native video player and user, packet are realized using target React component
It includes:
Target React component is covered to the component of React Native video player by absolute fix mode,
To realize the interactive function of React Native video player and user.
It is preferably based on React Native and realizes default React component, comprising:
Default React component is created based on React Native, and View group is set in the outer layer of default React component
Part；
Video player interactive function is realized using call back function in View component.
Preferably, video player interactive function is realized using call back function in View component, comprising:
Obtain the coordinate of current touch point and initial touch point；
Lateral displacement and length travel are determined according to the coordinate of current touch point and initial touch point；
When the absolute value of lateral displacement is not less than not less than preset first displacement threshold value or the absolute value of length travel
It is default then to judge whether the ratio of the absolute value of lateral displacement and the absolute value of length travel is greater than for preset second displacement threshold value
Third displacement threshold value；If so, updating video playing progress according to lateral displacement.
Preferably, video playing progress is updated according to lateral displacement, comprising:
Calculate current video player width and the default product for updating threshold value；
By the play time of the ratio and current video of lateral displacement and product and, be determined as updated video playing
Progress.
Preferably, further includes:
If the ratio of the absolute value of the absolute value and length travel of lateral displacement is not more than preset third displacement threshold value,
Judge whether the abscissa value of initial touch point is less than predetermined target value；If so, updating luminance video according to length travel.
Preferably, luminance video is updated according to length travel, comprising:
Calculate the ratio of length travel and current video player height；
The difference of current video brightness and ratio is determined as updated luminance video.
Preferably, further includes:
If the abscissa value of initial touch point is not less than predetermined target value, video volume is updated according to length travel.
Preferably, video volume is updated according to length travel, comprising:
Calculate the ratio of length travel and current video player height；
The difference of current video volume and ratio is determined as updated video volume.
Preferably, video player interactive function is realized using call back function in View component, comprising:
If lateral displacement and length travel are equal to zero, it is determined that click event has occurred；
Judge whether current click event and the time of origin difference of previous click event are less than preset time threshold；
If so, video or broadcasting video placed in a suspend state of the pause in broadcast state, and save current video
Luminance video and video volume.
To achieve the above object, the application further provides a kind of realization device of video player interactive function, packet
It includes:
Module is obtained, for obtaining the property parameters of React Native video player；
Application module, for property parameters to be applied in the View component in default React component, acquisition and React
The corresponding target React component of Native video player；Default React component is to be had based on what React Native was encapsulated
The component of video player interactive function；
Module is realized, for realizing the interaction of React Native video player and user using target React component
Function.
Preferably, realize that module is specifically used for:
Target React component is covered to the component of React Native video player by absolute fix mode,
To realize the interactive function of React Native video player and user.
Preferably, further includes: default React component realizes module, and default React component realizes that module includes:
Creating unit, for creating default React component based on React Native, and in the outer of default React component
Layer setting View component；
Unit is realized, for realizing video player interactive function using call back function in View component.
Preferably, realize that unit includes:
Subelement is obtained, for obtaining the coordinate of current touch point and initial touch point；
Subelement is determined, for determining lateral displacement and longitudinal position according to the coordinate of current touch point and initial touch point
It moves；
First judgment sub-unit, for judging whether the absolute value of lateral displacement is less than preset first displacement threshold value, and
Judge whether the absolute value of length travel is less than preset second displacement threshold value；
Second judgment sub-unit is not less than preset first displacement threshold value for the absolute value when the lateral displacement, or
The absolute value of length travel described in person is not less than preset second displacement threshold value, then judges absolute value and the longitudinal direction position of lateral displacement
Whether the ratio of the absolute value of shifting is greater than preset third displacement threshold value；
First updates subelement, and the ratio of the absolute value for the absolute value and length travel when lateral displacement is greater than default
Third displacement threshold value, then according to lateral displacement update video playing progress.
Preferably, the first update subelement is specifically used for:
Calculate current video player width and the default product for updating threshold value；
By the play time of the ratio and current video of lateral displacement and product and, be determined as updated video playing
Progress.
Preferably, further includes:
Third judgment sub-unit, if the ratio of the absolute value of the absolute value and length travel for lateral displacement is no more than pre-
If third displacement threshold value, then judge whether the abscissa value of initial touch point is less than predetermined target value；
Second updates subelement, if the abscissa value for initial touch point is less than predetermined target value, according to longitudinal position
It moves and updates luminance video.
Preferably, the second update subelement is specifically used for:
Calculate the ratio of length travel and current video player height；
The difference of current video brightness and ratio is determined as updated luminance video.
Preferably, further includes:
Third updates subelement, if the abscissa value for initial touch point is not less than predetermined target value, according to longitudinal direction
Displacement updates video volume.
Preferably, third updates subelement and is specifically used for:
Calculate the ratio of length travel and current video player height；
The difference of current video volume and ratio is determined as updated video volume.
Preferably, it presets React component and realizes module further include:
Determination unit, if being equal to zero for lateral displacement and length travel, it is determined that click event has occurred；
Judging unit, for judging it is default whether the time of origin difference of current click event and previous click event is less than
Time threshold；
Execution unit, the time of origin difference for currently clicking event and previous click event are less than preset time threshold
Value, then pause is in the video of the video or broadcasting of broadcast state placed in a suspend state, and saves the luminance video of current video
And video volume.
To achieve the above object, the application further provides a kind of realization equipment of video player interactive function, packet
It includes:
Memory, for storing computer program；
Processor, for executing computer program, to realize the realization side of aforementioned disclosed video player interactive function
Method.
To achieve the above object, the application further provides a kind of readable storage medium storing program for executing, for saving computer program,
Wherein, the implementation method of aforementioned disclosed video player interactive function is realized when computer program is executed by processor.
By above scheme it is found that this application provides kind of an implementation methods for video player interactive function, comprising: obtain
The property parameters of React Native video player；Property parameters are applied in the View component in default React component,
Obtain target React component corresponding with React Native video player；Default React component is based on React
The component with video player interactive function of Native encapsulation；Realize that React Native is regarded using target React component
The interactive function of frequency player and user.
As it can be seen that the method has pre-set based on React Native encapsulation and has had video player interaction
The React component of function, therefore after obtaining the property parameters of React Native video player, it can be directly by the attribute
Parameter is applied in the React component set in advance, to obtain corresponding with current React Native video player
Target React component can realize current React Native video player and user using target React component in this way
Interactive function.
If developer is that React Native video player realizes interactive function according to scheme disclosed in the present application, just
Code can need not be write according to the property parameters of current React Native video player to be developed, need to only determine current
The property parameters of React Native video player are simultaneously added in developing instrument, and such developing instrument can work as automatically
Preceding React Native video player realizes that interactive function improves development efficiency to save the development time, is also production
The online as early as possible of product provides possibility.Also, since React Native can be compatible with Android and iOS, in the application
Preset React component can also be compatible with Android and iOS, have good versatility.
Correspondingly, the realization device and equipment of a kind of video player interactive function provided by the present application, similarly has
Above-mentioned technical effect.
Detailed description of the invention
In order to illustrate the technical solutions in the embodiments of the present application or in the prior art more clearly, to embodiment or will show below
There is attached drawing needed in technical description to be briefly described, it should be apparent that, the accompanying drawings in the following description is only this
The embodiment of application for those of ordinary skill in the art without creative efforts, can also basis
The attached drawing of offer obtains other attached drawings.
Fig. 1 is a kind of implementation method flow chart of video player interactive function disclosed in the present application；
Fig. 2 is a kind of method flow diagram that default React component is realized based on React Native disclosed in the present application；
Fig. 3 is second of refined flow chart of S202 step in Fig. 2；
Fig. 4 is second of refined flow chart of S202 step in Fig. 2；
Fig. 5 is a kind of realization device schematic diagram of video player interactive function disclosed in the present application；
Fig. 6 is a kind of realization equipment schematic diagram of video player interactive function disclosed in the present application；
Fig. 7 is the realization equipment schematic diagram of another video player interactive function disclosed in the present application.
The embodiments will be further described with reference to the accompanying drawings for realization, functional characteristics and the advantage of the application purpose.
Specific embodiment
It is with reference to the accompanying drawings and embodiments, right in order to which the objects, technical solutions and advantages of the application are more clearly understood
The application is further elaborated.It should be appreciated that specific embodiment described herein is only to explain the application, not
For limiting the application.Based on the embodiment in the application, those of ordinary skill in the art are not before making creative work
Every other embodiment obtained is put, shall fall in the protection scope of this application.
The description and claims of this application and term " first ", " second ", " third ", " in above-mentioned attached drawing
The (if present)s such as four " are to be used to distinguish similar objects, without being used to describe a particular order or precedence order.It should manage
The data that solution uses in this way are interchangeable under appropriate circumstances, so that the embodiments described herein can be in addition to illustrating herein
Or the sequence other than the content of description is implemented.In addition, term " includes " and " having " and their any deformation, it is intended that
Cover it is non-exclusive include, for example, containing the process, method, system, product or equipment of a series of steps or units need not limit
In step or unit those of is clearly listed, but may include be not clearly listed or for these process, methods, produce
The other step or units of product or equipment inherently.
It should be noted that the description for being related to " first ", " second " etc. in this application is used for description purposes only, and cannot
It is interpreted as its relative importance of indication or suggestion or implicitly indicates the quantity of indicated technical characteristic.Define as a result, " the
One ", the feature of " second " can explicitly or implicitly include at least one of the features.In addition, the skill between each embodiment
Art scheme can be combined with each other, but must be based on can be realized by those of ordinary skill in the art, when technical solution
Will be understood that the combination of this technical solution is not present in conjunction with there is conflicting or cannot achieve when, also not this application claims
Protection scope within.
Referring to Fig. 1, Fig. 1 is a kind of implementation method process of video player interactive function disclosed in the embodiment of the present application
Figure.In one embodiment, this method comprises:
S101, the property parameters for obtaining React Native video player；
S102, property parameters are applied in the View component in default React component, obtain and is regarded with React Native
The corresponding target React component of frequency player；Default React component is to be encapsulated based on React Native with video playing
The component of device interactive function；
S103, the interactive function that React Native video player and user are realized using target React component.
It is understood that the expression of React Native video player is the video based on React Native frame
Player, it may be assumed that the video player realized based on react-native-video.The property parameters of video player generally wrap
It includes: video player width, video player height and video player reference pointer.Video player reference pointer is used
When being quoted by React component, it is directed toward the API of video player, video player can also be obtained with the Informal development of component.
It should be noted that the mode for obtaining property parameters can be with are as follows: obtained, passed through from database by software interface
Hardware interface is obtained from storage medium, receives the data that data sending terminal is sent by network line, or obtain developer
The property parameters being manually entered.
In the present embodiment, the interaction of React Native video player and user is realized using target React component
Function, comprising: covered target React component to the component of React Native video player by absolute fix mode
On, to realize the interactive function of React Native video player and user.
Therefore the present embodiment has pre-set based on React Native encapsulation and has had video player
The React component of interactive function, therefore after obtaining the property parameters of React Native video player, it will can directly be somebody's turn to do
Property parameters are applied in the React component set in advance, to obtain and current React Native video player pair
The target React component answered, in this way using target React component can realize current React Native video player with
The interactive function of user.If developer is that React Native video player realizes interaction according to scheme disclosed in the present application
Function can need not write code according to the property parameters of current React Native video player and be developed, and only need true
The property parameters of settled preceding React Native video player are simultaneously added in developing instrument, and such developing instrument can be certainly
It moves and realizes that interactive function improves development efficiency to save the development time for current React Native video player,
Also possibility is provided for the online as early as possible of product.
Referring to fig. 2, Fig. 2 is that one kind disclosed in the embodiment of the present application is based on the default React component of React Native realization
Method flow diagram.In two embodiments, this method comprises:
S201, default React component is created based on React Native, and in the outer layer setting of default React component
View component；
S202, call back function realization video player interactive function is utilized in View component.
Specifically, including: to utilize the transverse direction on video pictures using the video player interactive function that call back function is realized
Slip event realizes fast forward and fast reverse；Utilize the longitudinal sliding motion event conditioning luminance video on the left of video pictures；It is drawn using video
The longitudinal sliding motion event conditioning video volume of right side of face；Double-click the broadcast state and halted state of video pictures change video.Its
In, the realization position for adjusting video volume and adjusting luminance video can be interchanged, then has: sliding using the longitudinal direction on the right side of video pictures
Dynamic event conditioning luminance video；Utilize the longitudinal sliding motion event conditioning video volume on the left of video pictures.
If realizing fast forward and fast reverse using call back function in View component, adjusting luminance video, and adjust video sound
Amount, then the process of realization can be found in Fig. 3.
Fig. 3 is referred to, Fig. 3 is the first refined flow chart of S202 step in Fig. 2, therefore the specific reality of the S202 in Fig. 2
Now step includes:
S301, the coordinate for obtaining current touch point and initial touch point；
S302, lateral displacement and length travel are determined according to the coordinate of current touch point and initial touch point；
S303, judge that the absolute value of lateral displacement whether less than the first displacement threshold value, and judges the absolute value of length travel
Whether second displacement threshold value is less than；If so, executing S304；If it is not, then executing S305；
S304, this readjustment execution terminate；
Specifically, if the absolute value of lateral displacement is less than preset first displacement threshold value, and the absolute value of length travel is small
In preset second displacement threshold value, then it is assumed that faulty operation has occurred, therefore does not execute concrete operations.Wherein, preset first
Displacement threshold value can be set to 0.03 times of video player width, and preset second displacement threshold value can be set to 0.03 times
Video player height.Wherein, 0.03 is the exemplary multiple of the present embodiment, can flexibly be adjusted according to practical situations
Whole, smaller, Rule of judgment is then more accurate.
Whether the ratio of the absolute value of S305, the absolute value for judging lateral displacement and length travel is greater than preset third position
Move threshold value；If so, executing S306；If it is not, then executing S307；
S306, video playing progress is updated according to lateral displacement；
It is understood that if the absolute value of lateral displacement is not less than preset first displacement threshold value or length travel
Absolute value be not less than preset second displacement threshold value, then it is assumed that normal operating event has occurred, then further judgement operation thing
Whether part is to slide laterally event.That is: judge whether the ratio of the absolute value of lateral displacement and the absolute value of length travel is greater than
Preset third displacement threshold value.If the ratio of the absolute value of the absolute value and length travel of lateral displacement is greater than preset third position
Move threshold value, then it is assumed that the event of sliding laterally has occurred, therefore video playing progress can be updated according to lateral displacement.Wherein, it is
Denominator is not zero when ensuring to make than operation, and a constant can be set, by the constant and the absolute value of length travel and make
For denominator.
Such as: if the absolute value of lateral displacement is X, the absolute value of length travel is Y, constant 0.01, third displacement threshold
Value is 2, then the Rule of judgment of S305 is are as follows: judges whether X/ (Y+0.01) is greater than 2.Wherein, preset third displacement threshold value
It can be adjusted flexibly according to practical situations, smaller, Rule of judgment is then more accurate.
Specifically, updating video playing progress according to lateral displacement, comprising: calculate current video player width and preset
Update the product of threshold value；By the play time of the ratio and current video of lateral displacement and product and, be determined as updated
Video playing progress.If being formulated, have: play time+transverse direction of updated video playing progress=current video
Displacement/(video player width × update threshold value), wherein updating threshold value can be indicated at this time with flexible setting, such as 120 seconds:
It, can be 2 minutes with fast forward and fast reverse when lateral displacement is entire video player width.
S307, judge whether the abscissa value of initial touch point is less than predetermined target value；If so, executing S308；If it is not,
Then execute S309；
S308, luminance video is updated according to length travel；
S309, video volume is updated according to length travel.
It is understood that if do not slide laterally event, and the abscissa value of initial touch point is less than goal-selling
Value, while when predetermined target value is the half of current video player width, it is believed that initial touch point is located at video picture
The face left side, therefore luminance video can be updated according to length travel.Wherein, updating luminance video according to length travel includes: meter
Calculate the ratio of length travel and current video player height；The difference of current video brightness and ratio is determined as updated
Luminance video.
Correspondingly, if do not slide laterally event, and the abscissa value of initial touch point is not less than predetermined target value, then
Think that initial touch point is located on the right of video pictures, therefore video volume can be updated according to length travel.Wherein, according to longitudinal direction
Displacement updates video volume, comprising: calculates the ratio of length travel and current video player height；By current video volume with
The difference of ratio is determined as updated video volume.
It should be noted that pixel origin is generally located on upper left side due in video player, so this sentences difference
Value updates video volume and luminance video.That is: that the difference of current video brightness and ratio is determined as updated video is bright
Degree, and the difference of current video volume and ratio is determined as updated video volume, so then have: user draws in video
Right side of face slides up and down, then video volume changes, wherein upper volume of drawing increases, downslide volume down；User is on a video pictures left side
Side slides up and down, then luminance video changes, wherein upper draw brightness increase, downslide brightness reduces.
If the broadcast state and pause shape for double-clicking video pictures change video are realized using call back function in View component
State, then the process of realization can be found in Fig. 4.
Fig. 4 is referred to, Fig. 4 is second of refined flow chart of S202 step in Fig. 2, therefore the specific reality of the S202 in Fig. 2
Now step includes:
S401, the coordinate for obtaining current touch point and initial touch point；
S402, lateral displacement and length travel are determined according to the coordinate of current touch point and initial touch point；
S403, judge whether lateral displacement and length travel are equal to zero；If so, executing S404；If it is not, then without behaviour
Make；
Click event has occurred in S404, determination；
S405, judge whether current click event and the time of origin difference of previous click event are less than preset time threshold
Value；If so, executing S406；If it is not, then without operation；
The video of video or broadcasting placed in a suspend state of S406, pause in broadcast state, and save current video
Luminance video and video volume.
It is understood that if the time of origin difference for currently clicking event and previous click event is less than the preset time
Threshold value, then it is assumed that double click event has occurred, therefore can realize the broadcasting or pause of video based on this.Save the video of current video
Brightness and video volume continue current video brightness and video volume when next touch event can be made to occur.
Therefore a kind of method that default React component is realized based on React Native is present embodiments provided, it should
The video player interactive function that method is realized using call back function includes: to be realized using the event that slides laterally on video pictures
Fast forward and fast reverse；Utilize the longitudinal sliding motion event conditioning luminance video on the left of video pictures；Utilize the longitudinal direction on the right side of video pictures
Slip event adjusts video volume；The broadcast state and halted state of video pictures change video are double-clicked, so that can get has
The React component of video player interactive function.
A kind of realization device of video player interactive function provided by the embodiments of the present application is introduced below, hereafter
A kind of realization device of video player interactive function of description and a kind of above-described reality of video player interactive function
Existing method can be cross-referenced.
Referring to Fig. 5, Fig. 5 is a kind of realization device signal of video player interactive function disclosed in the embodiment of the present application
Figure.In three embodiments, which includes:
Module 501 is obtained, for obtaining the property parameters of React Native video player；
Application module 502, for property parameters to be applied in the View component in default React component, obtain with
The corresponding target React component of React Native video player；Default React component is to be encapsulated based on React Native
The component with video player interactive function；
Module 503 is realized, for realizing the friendship of React Native video player and user using target React component
Mutual function.
In a specific embodiment, realize that module is specifically used for:
Target React component is covered to the component of React Native video player by absolute fix mode,
To realize the interactive function of React Native video player and user.
In a specific embodiment, further includes: default React component realizes module, presets React component and realizes mould
Block includes:
Creating unit, for creating default React component based on React Native, and in the outer of default React component
Layer setting View component；
Unit is realized, for realizing video player interactive function using call back function in View component.
In a specific embodiment, realize that unit includes:
Subelement is obtained, for obtaining the coordinate of current touch point and initial touch point；
Subelement is determined, for determining lateral displacement and longitudinal position according to the coordinate of current touch point and initial touch point
It moves；
First judgment sub-unit, for judging whether the absolute value of lateral displacement is less than preset first displacement threshold value, and
Judge whether the absolute value of length travel is less than preset second displacement threshold value；
Second judgment sub-unit is not less than preset first displacement threshold value for the absolute value when lateral displacement, or vertical
To the absolute value of displacement be not less than preset second displacement threshold value, then judge lateral displacement absolute value and length travel it is absolute
Whether the ratio of value is greater than preset third displacement threshold value；
First updates subelement, and the ratio of the absolute value for the absolute value and length travel when lateral displacement is greater than default
Third displacement threshold value, then according to lateral displacement update video playing progress.
In a specific embodiment, the first update subelement is specifically used for:
Calculate current video player width and the default product for updating threshold value；
By the play time of the ratio and current video of lateral displacement and product and, be determined as updated video playing
Progress.
In a specific embodiment, further includes:
Third judgment sub-unit, if the ratio of the absolute value of the absolute value and length travel for lateral displacement is no more than pre-
If third displacement threshold value, then judge whether the abscissa value of initial touch point is less than predetermined target value；
Second updates subelement, if the abscissa value for initial touch point is less than predetermined target value, according to longitudinal position
It moves and updates luminance video.
In a specific embodiment, the second update subelement is specifically used for:
Calculate the ratio of length travel and current video player height；
The difference of current video brightness and ratio is determined as updated luminance video.
In a specific embodiment, further includes:
Third updates subelement, if the abscissa value for initial touch point is not less than predetermined target value, according to longitudinal direction
Displacement updates video volume.
In a specific embodiment, third updates subelement and is specifically used for:
Calculate the ratio of length travel and current video player height；
The difference of current video volume and ratio is determined as updated video volume.
In a specific embodiment, it presets React component and realizes module further include:
Determination unit, if being equal to zero for lateral displacement and length travel, it is determined that click event has occurred；
Judging unit, for judging it is default whether the time of origin difference of current click event and previous click event is less than
Time threshold；
Execution unit, the time of origin difference for currently clicking event and previous click event are less than preset time threshold
Value, then pause is in the video of the video or broadcasting of broadcast state placed in a suspend state, and saves the luminance video of current video
And video volume.
Wherein, previous embodiment can be referred to by closing the more specifical course of work of modules, unit in this present embodiment
Disclosed in corresponding contents, no longer repeated herein.
As it can be seen that present embodiments providing a kind of realization device of video player interactive function, comprising: obtain module, answer
With module and realize module.The property parameters of React Native video player are obtained by acquisition module first；Then it answers
Property parameters are applied to React encapsulate based on React Native and with video player interactive function with module
In View component in component, target React component corresponding with React Native video player is obtained；Preferably realize mould
Block realizes the interactive function of React Native video player and user using target React component.Such modules it
Between share out the work and help one another, Each performs its own functions, to save the development time, improves development efficiency, also provides for the online as early as possible of product
It may.
A kind of realization equipment of video player interactive function provided by the embodiments of the present application is introduced below, hereafter
The realization equipment and a kind of above-described reality of video player interactive function of a kind of video player interactive function of description
Existing method and device can be cross-referenced.
Referring to Fig. 6, Fig. 6 is a kind of realization equipment signal of video player interactive function disclosed in the embodiment of the present application
Figure.In five embodiments, the realization equipment of the video player interactive function includes:
Memory 601, for saving computer program；
Processor 602, for executing the computer program, to realize method disclosed in above-mentioned any embodiment.
Referring to the realization equipment signal that Fig. 7, Fig. 7 are another kind video player interactive function disclosed in the embodiment of the present application
Figure.The realization equipment of the video player interactive function may include memory 11, processor 12 and bus 13.
Wherein, memory 11 include at least a type of readable storage medium storing program for executing, the readable storage medium storing program for executing include flash memory,
Hard disk, multimedia card, card-type memory (for example, SD or DX memory etc.), magnetic storage, disk, CD etc..Memory 11
It can be the internal storage unit of the realization equipment of video player interactive function, such as the video playing in some embodiments
The hard disk of the realization equipment of device interactive function.Memory 11 is also possible to video player interactive function in further embodiments
Realization equipment External memory equipment, such as the plug-in type hard disk being equipped in the realization equipment of video player interactive function,
Intelligent memory card (Smart Media Card, SMC), secure digital (Secure Digital, SD) card, flash card (Flash
Card) etc..Further, memory 11 can also both include the storage inside list of the realization equipment of video player interactive function
Member also includes External memory equipment.Memory 11 can be not only used for storage and be installed on the realization of video player interactive function setting
Standby application software and Various types of data, for example, video player interactive function realization program code etc., can be also used for temporarily
When store the data that has exported or will export.
Processor 12 can be in some embodiments a central processing unit (Central Processing Unit,
CPU), controller, microcontroller, microprocessor or other data processing chips, the program for being stored in run memory 11
Code or processing data, such as execute the realization program etc. of video player interactive function.
The bus 13 can be Peripheral Component Interconnect standard (peripheral component interconnect, abbreviation
PCI) bus or expanding the industrial standard structure (extended industry standard architecture, abbreviation EISA)
Bus etc..The bus can be divided into address bus, data/address bus, control bus etc..For convenient for indicating, in Fig. 7 only with one slightly
Line indicates, it is not intended that an only bus or a type of bus.
Further, the realization equipment of video player interactive function can also include network interface, and network interface is optional
May include wireline interface and/or wireless interface (such as WI-FI interface, blue tooth interface), commonly used in the equipment and its
Communication connection is established between his electronic equipment.
Optionally, which can also include user interface, and user interface may include display (Display), input
Unit such as keyboard (Keyboard), optional user interface can also include standard wireline interface and wireless interface.It is optional
Ground, in some embodiments, display can be light-emitting diode display, liquid crystal display, touch-control liquid crystal display and OLED
(Organic Light-Emitting Diode, Organic Light Emitting Diode) touches device etc..Wherein, display can also be appropriate
Referred to as display screen or display unit, for showing the information handled in the device and for showing visual user circle
Face.
Fig. 7 illustrates only the realization equipment of the video player interactive function with component 11-13, those skilled in the art
It is understood that the structure shown in Fig. 7 does not constitute the restriction to equipment, it may include than illustrating less or more portions
Part perhaps combines certain components or different component layouts.
A kind of readable storage medium storing program for executing provided by the embodiments of the present application is introduced below, one kind described below is readable to deposit
Storage media can be cross-referenced with above-described a kind of implementation method, device and the equipment of video player interactive function.
A kind of readable storage medium storing program for executing, for saving computer program, wherein when the computer program is executed by processor
Realize the implementation method of video player interactive function disclosed in previous embodiment.Specific steps about this method can refer to
Corresponding contents disclosed in previous embodiment, are no longer repeated herein.
Each embodiment in this specification is described in a progressive manner, the highlights of each of the examples are with it is other
The difference of embodiment, same or similar part may refer to each other between each embodiment.
The step of method described in conjunction with the examples disclosed in this document or algorithm, can directly be held with hardware, processor
The combination of capable software module or the two is implemented.Software module can be placed in random access memory (RAM), memory, read-only deposit
Reservoir (ROM), electrically programmable ROM, electrically erasable ROM, register, hard disk, moveable magnetic disc, CD-ROM or technology
In any other form of readable storage medium storing program for executing well known in field.
Specific examples are used herein to illustrate the principle and implementation manner of the present application, and above embodiments are said
It is bright to be merely used to help understand the present processes and its core concept；At the same time, for those skilled in the art, foundation
The thought of the application, there will be changes in the specific implementation manner and application range, in conclusion the content of the present specification is not
It is interpreted as the limitation to the application.
Claims (12)
1. a kind of implementation method of video player interactive function characterized by comprising
Obtain the property parameters of React Native video player；
The property parameters are applied in the View component in default React component, obtains and is regarded with the React Native
The corresponding target React component of frequency player；The default React component is to be encapsulated based on React Native with video
The component of player interactive function；
The interactive function of the React Native video player and user is realized using the target React component.
2. the implementation method of video player interactive function according to claim 1, which is characterized in that described in the utilization
Target React component realizes the interactive function of the React Native video player and user, comprising:
The target React component is covered to the component of the React Native video player by absolute fix mode
On, to realize the interactive function of the React Native video player and user.
3. the implementation method of video player interactive function according to claim 1, which is characterized in that based on described
React Native realizes the default React component, comprising:
Default React component is created based on the React Native, and View is set in the outer layer of the default React component
Component；
Video player interactive function is realized using call back function in the View component.
4. the implementation method of video player interactive function according to claim 3, which is characterized in that described described
Video player interactive function is realized using call back function in View component, comprising:
Obtain the coordinate of current touch point and initial touch point；
Lateral displacement and length travel are determined according to the coordinate of the current touch point and initial touch point；
When the lateral displacement absolute value not less than preset first displacement threshold value or the length travel absolute value not
Less than preset second displacement threshold value, then the ratio of the absolute value of the lateral displacement and the absolute value of the length travel is judged
Whether preset third displacement threshold value is greater than；If so, updating video playing progress according to the lateral displacement.
5. the implementation method of video player interactive function according to claim 4, which is characterized in that described according to
Lateral displacement updates video playing progress, comprising:
Calculate current video player width and the default product for updating threshold value；
By the play time of the ratio of the lateral displacement and the product and current video and, be determined as updated video
Playback progress.
6. the implementation method of video player interactive function according to claim 4, which is characterized in that further include:
If the ratio of the absolute value of the lateral displacement and the absolute value of the length travel is not more than the preset third position
Threshold value is moved, then judges whether the abscissa value of the initial touch point is less than predetermined target value；If so, according to longitudinal position
It moves and updates luminance video.
7. the implementation method of video player interactive function according to claim 6, which is characterized in that described according to
Length travel updates luminance video, comprising:
Calculate the ratio of the length travel Yu current video player height；
The difference of current video brightness and the ratio is determined as updated luminance video.
8. the implementation method of video player interactive function according to claim 6, which is characterized in that further include:
If the abscissa value of the initial touch point is not less than the predetermined target value, according to the length travel more new video
Volume.
9. the implementation method of video player interactive function according to claim 8, which is characterized in that described according to
Length travel updates video volume, comprising:
Calculate the ratio of the length travel Yu current video player height；
The difference of current video volume and the ratio is determined as updated video volume.
10. the implementation method of video player interactive function according to claim 4, which is characterized in that described described
Video player interactive function is realized using call back function in View component, comprising:
If the lateral displacement and the length travel are equal to zero, it is determined that click event has occurred；
Judge whether current click event and the time of origin difference of previous click event are less than preset time threshold；
If so, video or broadcasting video placed in a suspend state of the pause in broadcast state, and save the view of current video
Frequency brightness and video volume.
11. a kind of realization device of video player interactive function characterized by comprising
Module is obtained, for obtaining the property parameters of React Native video player；
Application module, for the property parameters to be applied in the View component in default React component, obtain with it is described
The corresponding target React component of React Native video player；The default React component is based on React Native
The component with video player interactive function of encapsulation；
Module is realized, for realizing the React Native video player and user using the target React component
Interactive function.
12. a kind of realization equipment of video player interactive function characterized by comprising
Memory, for storing computer program；
Processor, for executing the computer program, to realize video player as described in any one of claim 1 to 10
The implementation method of interactive function.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910778328.9A CN110493659A (en) | 2019-08-22 | 2019-08-22 | A kind of implementation method, device and the equipment of video player interactive function |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910778328.9A CN110493659A (en) | 2019-08-22 | 2019-08-22 | A kind of implementation method, device and the equipment of video player interactive function |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110493659A true CN110493659A (en) | 2019-11-22 |
Family
ID=68552850
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910778328.9A Pending CN110493659A (en) | 2019-08-22 | 2019-08-22 | A kind of implementation method, device and the equipment of video player interactive function |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110493659A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112203034A (en) * | 2020-09-30 | 2021-01-08 | Oppo广东移动通信有限公司 | Frame rate control method and device and electronic equipment |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104038620A (en) * | 2013-03-06 | 2014-09-10 | 风网科技（北京）有限公司 | Mobile phone video playing control system and method thereof |
| CN105791994A (en) * | 2014-12-25 | 2016-07-20 | 深圳Tcl数字技术有限公司 | Webkit browser video playing method and device based on Android system |
| CN105824900A (en) * | 2016-03-14 | 2016-08-03 | 传线网络科技（上海）有限公司 | Page display system based on react-native |
| CN105872776A (en) * | 2015-12-29 | 2016-08-17 | 乐视网信息技术（北京）股份有限公司 | General video player creating method and device |
| CN106951267A (en) * | 2017-03-31 | 2017-07-14 | 武汉斗鱼网络科技有限公司 | Screen size adaptive approach and device |
| CN108241488A (en) * | 2016-12-26 | 2018-07-03 | 航天信息股份有限公司 | A kind of system and method for generating APP interfaces |
| US10158913B1 (en) * | 2010-02-17 | 2018-12-18 | CSC Holdings, LLC | Feature activation on occurrence of an event |
-
2019
- 2019-08-22 CN CN201910778328.9A patent/CN110493659A/en active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10158913B1 (en) * | 2010-02-17 | 2018-12-18 | CSC Holdings, LLC | Feature activation on occurrence of an event |
| CN104038620A (en) * | 2013-03-06 | 2014-09-10 | 风网科技（北京）有限公司 | Mobile phone video playing control system and method thereof |
| CN105791994A (en) * | 2014-12-25 | 2016-07-20 | 深圳Tcl数字技术有限公司 | Webkit browser video playing method and device based on Android system |
| CN105872776A (en) * | 2015-12-29 | 2016-08-17 | 乐视网信息技术（北京）股份有限公司 | General video player creating method and device |
| CN105824900A (en) * | 2016-03-14 | 2016-08-03 | 传线网络科技（上海）有限公司 | Page display system based on react-native |
| CN108241488A (en) * | 2016-12-26 | 2018-07-03 | 航天信息股份有限公司 | A kind of system and method for generating APP interfaces |
| CN106951267A (en) * | 2017-03-31 | 2017-07-14 | 武汉斗鱼网络科技有限公司 | Screen size adaptive approach and device |
Non-Patent Citations (4)
| Title |
|---|
| __卓原: "react-native播放视频组件 react-native-video的用法", 《HTTPS://BLOG.CSDN.NET/U011272795/ARTICLE/DETAILS/72993225/》 * |
| ABBAS FARID: "react-native-af-video-player", 《HTTPS://GITHUB.COM/ABBASFREESTYLE/REACT-NATIVE-AF-VIDEO-PLAYER》 * |
| FBY展菲: "iOS--React Native视频播放器插件", 《HTTPS://BLOG.CSDN.NET/QQ_36478920/ARTICLE/DETAILS/88424306》 * |
| JIAMING_: "浅析React-Native WebView,实现RN代码与Html的简单交互", 《HTTPS://WWW.JIANSHU.COM/P/B7C1743055A2》 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112203034A (en) * | 2020-09-30 | 2021-01-08 | Oppo广东移动通信有限公司 | Frame rate control method and device and electronic equipment |
| CN112203034B (en) * | 2020-09-30 | 2023-09-08 | Oppo广东移动通信有限公司 | Frame rate control method and device and electronic equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108491275B (en) | Program optimization method, device, terminal and storage medium | |
| CN109542614B (en) | Resource allocation method, device, terminal and storage medium | |
| CN105308675A (en) | Second screen view with multitasking | |
| CN103730098A (en) | Method for reducing power consumption of display and electronic device thereof | |
| CN111046164A (en) | Method and equipment for updating book to be read | |
| CN109815424A (en) | Web page picture display methods and terminal device | |
| CN110493659A (en) | A kind of implementation method, device and the equipment of video player interactive function | |
| CN113589926B (en) | Virtual interface operation method, head-mounted display device and computer readable medium | |
| CN107168738A (en) | A kind of management method of application tool, device, equipment and storage medium | |
| CN113609419A (en) | Information display method and device, electronic equipment and computer readable medium | |
| CN111796825B (en) | Bullet screen drawing method, bullet screen drawing device, bullet screen drawing equipment and storage medium | |
| CN109981798A (en) | A kind of method for writing data, system and electronic equipment and storage medium | |
| CN109669589B (en) | Document editing method and device | |
| CN114115673B (en) | Control method of vehicle-mounted screen | |
| CN113721936A (en) | Application management method, intelligent terminal, device and storage medium | |
| CN112905072B (en) | Application processing method and device and electronic equipment | |
| CN110597432B (en) | Interface control method, device, computer readable medium and electronic equipment | |
| CN111047342B (en) | Method and device for determining delivery target, electronic equipment and readable medium | |
| CN112100553A (en) | Webpage configuration method and device, electronic equipment and storage medium | |
| CN115437551A (en) | Data cloning method, device, storage medium and computer program product | |
| CN102955648B (en) | Terminal equipment, content merging method and display method | |
| CN104809208A (en) | Homepage displaying method and electronic equipment | |
| CN112667410A (en) | Cross-process communication method, terminal and computer readable storage medium | |
| WO2022218191A1 (en) | Method and apparatus for displaying amount of charge, storage medium, and terminal device | |
| WO2023093212A1 (en) | Image processing method and electronic device |
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: 20191122 |