CN111708522B - Video playing component development method and device - Google Patents
Video playing component development method and device Download PDFInfo
- Publication number
- CN111708522B CN111708522B CN202010582642.2A CN202010582642A CN111708522B CN 111708522 B CN111708522 B CN 111708522B CN 202010582642 A CN202010582642 A CN 202010582642A CN 111708522 B CN111708522 B CN 111708522B
- Authority
- CN
- China
- Prior art keywords
- page component
- component
- page
- tag
- sub
- 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.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- 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/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Television Signal Processing For Recording (AREA)
Abstract
The invention relates to a component development method and device and discloses a video playing component development method and device. The first page component and the second page component are established, the first page component and the second page component are set to be in a parent-child nesting relation, independent management of a video list display page and a video playing page is achieved, and data and messages are transmitted through mutual value transmission of the parent-child components. The advantage of this approach is that a large amount of logic is avoided to be processed in one component and both page components can be reused.
Description
Technical Field
The invention relates to a component development method and device, in particular to a video playing component development method and device.
Background
The Element-UI component library is a desktop-side UI component library based on Vue.js2.0 and is starved for a front-end team, a plurality of reusable components are provided, matched design resources are provided, and rapid page forming of developers can be helped. For each component, the effect example and the code are valid on the document, and in this way, when a large number of pages adopt the same style and structure, the page can be generated through simple configuration.
At present, no component related to video playing exists in the Element-UI component library, and when the requirement of playing a video needs to be realized in a project, an external player plug-in, such as Vue-video-player, is generally introduced. The Vue-video-player component can realize the function of video playing, but after the Vue-video-player component is introduced into a project, the style needs to be independently modified and packaged into a component with the same style and effect as the Element-UI component. If the video is played after clicking according to the video cover picture, the independent processing of the page is more complicated.
Therefore, the existing Element-UI component library has no video playing component.
Disclosure of Invention
The invention aims to provide a video playing component development method and a video playing component development device, which are used for solving the problem that an Element-UI component library in the prior art has no video playing component.
In order to realize the task, the invention adopts the following technical scheme:
a video playing component development method is used for loading an Element-UI video playing component in a project file, and comprises the following steps:
step 1, globally installing a vue-video-player plug-in a project engineering file of a video playing component to be installed to obtain the project engineering file after the plug-in is installed;
the project engineering file after the plug-in installation comprises a page entry subfile, a webpack production environment core configuration subfile and a components public group subfolder;
step 2, after introducing a vue-video-player plug-in and a plug-in style into the page entry subfile, configuring ProvidePlugin parameters in the webpack production environment core configuration subfile to obtain a configured project engineering file;
and 3, packaging the vue-video-player plug-in into an Element-UI video playing component in the components public group subfolder of the configured project file, and loading the Element-video-player plug-in into the configured project file.
The packaging of the vue-video-player plug-in into an Element-UI video playing component in the components public group subfolder of the configured project engineering file specifically comprises the following steps:
step 31, newly building two vue format files in the components public group subfolder to obtain a first page component and a second page component, wherein the first page component is a parent component of the second page component;
the first page component and the second page component comprise template tags, script tags and style tags;
step 32, setting a picture display container in the template tag of the first page component; acquiring a data list of videos to be displayed in the script tag of the first page component, and transmitting the data list to a second page component; setting the style of the picture display container in the style label of the first page assembly to obtain the set first page assembly;
step 33, setting a video display container in the template tag of the second page component; binding the data transmitted by the first page component with the video display container in the script tag of the second page component; setting the style of the video display container in the style tag of the second page component to obtain the set second page component;
and step 34, the set first page component obtained in step 32 and the set second page component obtained in step 33 form an Element-UI video playing component.
Furthermore, when the providepugin parameter is configured in the webpack production environment core configuration subfile in the step 2, the providepugin parameter is set to be new webpack.
Further, the script tag of the second page component in step 33 includes a second page component props sub-tag, a second page component data sub-tag, a second page component computed sub-tag, a second page component before description sub-tag and a second page component methods sub-tag;
the second page component props sub-label is used for receiving the state data of the first page component;
the data sub-tag of the second page component is used for defining data required by rendering of the second page component;
the second page component calculated sub-tag is used for monitoring the change of the player variable of the second page component;
the second page component before deployment subloy sub-tag is used for defining the processing when the current instance is destroyed;
the second page component methods sub-tag is used for defining a method and content of a self-defined function name.
Further, the script tag included in the first page component in step 32 includes a first page component components sub-tag, a first page component data sub-tag, and a first page component methods sub-tag;
the first page component sub-tag is used for referencing a second page component;
the first page component data sub-tag is used for defining data required by rendering of the first page component;
the first page component methods sub-tag is used to define the interaction logic for processing data.
A video playing component development device comprises a plug-in mounting module, a configuration module and a packaging module;
the plug-in installation module is used for globally installing a vue-video-player plug-in the project engineering file of the video playing component to be installed to obtain the project engineering file after the plug-in is installed;
the project engineering file after the plug-in installation comprises a page entry subfile, a webpack production environment core configuration subfile and a components public group subfolder;
the configuration module is used for configuring ProvidePlugin parameters in the webpack production environment core configuration subfile after introducing the vue-video-player plug-in and the plug-in style into the page entry subfile to obtain a configured project engineering file;
the packaging module is used for packaging the vue-video-player plug-in into an Element-UI video playing component in a components public group subfolder of the configured project file and loading the Element-video-player plug-in into the configured project file;
the packaging module comprises an assembly establishing sub-module, a second page assembly setting sub-module, a first page assembly setting sub-module and a packaging sub-module;
the component establishing sub-module is used for newly establishing two vue format files in the components public group subfolder to obtain a first page component and a second page component, wherein the first page component is a parent component of the second page component;
the first page component and the second page component comprise template tags, script tags and style tags;
the first page assembly setting sub-module is used for setting a picture display container in a template tag of the first page assembly; acquiring a data list of videos to be displayed in the script tag of the first page component, and transmitting the data list to a second page component; setting the style of the picture display container in the style label of the first page component to obtain the set first page component;
the second page component setting submodule is used for setting a video display container in a template tag of the second page component; binding the data transmitted by the first page component with the video display container in the script tag of the second page component; setting the style of the video display container in the style tag of the second page component to obtain a set second page component;
and the packaging sub-module is used for forming an Element-UI video playing component according to the set second page component and the set first page component.
Furthermore, when the ProvidePlugin parameter is configured in the WEBPack production environment core configuration subfile in the configuration module, the ProvidePlugin parameter is set to be new WEBPack.
Further, the script tag of the second page component in the second page component setting sub-module includes a second page component prop sub-tag, a second page component data sub-tag, a second page component computed sub-tag, a second page component before destroy sub-tag, and a second page component methods sub-tag;
the second page component props sub-tag is used for receiving the state data of the first page component;
the second page component data sub-tag is used for defining data required by rendering of a second page component;
the second page component calculated sub-tag is used for monitoring the change of the player variable of the second page component:
the second page component before deployment subloy sub-tag is used for defining the processing when the current instance is destroyed;
the second page component methods sub-tag is used for defining a method and content of a self-defined function name.
Furthermore, the script tag included in the first page component setting sub-module includes a first page component components sub-tag, a first page component data sub-tag and a first page component methods sub-tag;
the first page component sub-tag is used for referencing a second page component;
the first page component data sub-tag is used for defining data required by rendering of the first page component;
the first page components methods sub-tag is used to define the interaction logic for processing data.
Compared with the prior art, the invention has the following technical effects:
1. according to the video playing component development method and device, the first page component and the second page component are established, the first page component and the second page component are set to be in a parent-child nested relation, independent management of a video list display page and a video playing page is achieved, and data and messages are transmitted through mutual value transmission of the parent-child components. The advantage of this approach is that it avoids handling a large amount of logic in one component and both page components can be reused.
2. The video playing component development method and device provided by the invention are simple in operation steps, the appearance styles of the components are unified, the video playing component and the video cover picture preview component are mutually independent and can be introduced as required, and the development efficiency is improved.
Drawings
Fig. 1 is a schematic diagram of component communication of a video playing component development method and apparatus provided by the present invention.
Detailed Description
The present invention will be described in detail below with reference to the accompanying drawings and examples. So that those skilled in the art can better understand the present invention. It is to be expressly noted that in the following description, a detailed description of known functions and designs will be omitted when it may obscure the subject matter of the present invention.
The following definitions or conceptual connotations relating to the present invention are provided for illustration:
assembly of: the component is a reusable Vue instance, and can extend HTML elements and encapsulate reusable code.
Inserting a plug-in: it is meant to be an enhancement or supplement to the function of Vue. In a popular way, plug-ins are files written by predecessors, which can greatly improve the code quality and the page display effect of the plug-ins, and can be directly taken for use.
Project engineering files: all files contained in the whole folder of the created vue project environment are referred to, and the file directories are roughly as follows: build: constructing a script catalog; config: a project configuration directory; node _ modules: an npm-loaded item-dependent module; src: a primary catalog to be developed; static: a static resource directory; html: a home entry file; json: an npm packet configuration file; md, README: a description document of the project, etc.
Webpack production environment core configuration subfile: webpack.
Providepugin parameters: the embedded module is a webpack built-in module, the module loaded by the ProvidePlugin can be automatically loaded, and import and requirere are not needed any more when the embedded module is used.
components common group subfolders: a folder is created for holding the common components.
template tag: is used for writing html templates and only one root element is needed inside.
script tag: for storing a piece of js execution script.
style tag: for defining style information for the HTML document of the current page.
And (3) global installation: install using npm install vue-video-player-save command, save configuration information to the pacjage json file.
Introducing: import is performed using import.
Loading: import a component using import and then assign the component directly to a compoet.
Example one
As shown in fig. 1, the embodiment discloses a video playing component development method for loading an Element-UI video playing component in a project engineering file, where the method is performed according to the following steps:
step 1, globally installing a vue-video-player plug-in a project engineering file of a video playing component to be installed to obtain the project engineering file after the plug-in is installed;
the project engineering file after the plug-in installation comprises a page entry subfile, a webpack production environment core configuration subfile and a components public group subfolder;
in this embodiment, the plug-in is downloaded via the npm install command and installed into the configuration library required by the production environment.
NPM is a package management tool installed along with nodjs, allowing users to download third party packages written by others from the NPM server to local use.
Step 2, after introducing a vue-video-player plug-in and a plug-in pattern into the page entry subfile, configuring ProvidePlugin parameters in the webpack production environment core configuration subfile to obtain a configured project engineering file;
in this embodiment, a vue-video-player plug-in is introduced into a page entry file main.js, and the plug-in is configured globally:
introducing a vue-video-player plug-in and a style thereof into a page entry file main.js, configuring a built-in module Provideplug-in a core configuration file webpack.prod.conf.js of a webpack production environment, and after carrying out instance initialization by using the Provideplug-in, automatically loading and importing the vue-video-player plug-in into the module without introducing an import and a require during use, and directly using the plug-in.
Optionally, when the providepugin parameter is configured in the webpack production environment core configuration subfile in step 2, the providepugin parameter is set to be new webpack.
Step 3, encapsulating the vue-video-player plug-in into an Element-UI video playing component in a component public group subfolder of the configured project file, and loading the Element-video-player plug-in into the configured project file;
the packaging of the vue-video-player plug-in into an Element-UI video playing component in the components public group subfolder of the configured project engineering file specifically comprises the following steps:
step 31, newly building two vue format files in the components public group subfolder to obtain a first page component and a second page component, wherein the first page component is a parent component of the second page component;
in the present embodiment, first, two Vue-format files are newly created in the page common component subfolder as the first page component and the second page component. Js is a set of progressive framework for constructing a user interface, only focuses on a view layer, adopts a design of bottom-up incremental development, and can realize responsive data binding and combined view components through an API (application programming interface) which is as simple as possible.
The first page component and the second page component comprise template tags, script tags and style tags;
in this embodiment, two vue format files, named video player vue and video list vue, can be newly created under the common component folder components. According to the illustration of fig. 1, the vue format files have the common characteristic that they all contain three parts: the < template > </template > tag is used for writing the html template, only one root element is needed in the tag, and otherwise, an error is reported; < script > </script > label, adopt the es6 language to carry on the data interaction processing; and the < style > </style > tag is used for adjusting the page style. The < style > </style > tag is scope, when the < style > </style > tag has a tailored attribute, the css style only acts on the current scope, and other components cannot be penetrated.
In this embodiment, component-based development can be realized based on the Vue framework, and a web development module can be split and decomposed into individual components, and data and functions can be bound and encapsulated. In this embodiment, a front cover picture list display component before video playing, i.e., a videolist.
In this embodiment, a second page component is introduced into a first page component, the two page components have a nested relationship, the first page component is a parent component of the second page component, and the second page component is a child component of the first page component. The two components communicate state data based on a communication mechanism between the parent and child components.
Step 32, setting a picture display container in the template tag of the first page component; acquiring a data list of a video to be displayed in the script tag of the first page component, and transmitting the data list to the second page component; setting the style of the picture display container in the style label of the first page component to obtain the set first page component;
in this embodiment, data and a data interaction mode are set in the script tag of the first page component; this data is a list of videos obtained from the server, which contains the name, address, time, cover page address, etc. of each video. Data interaction with a server is realized through vue-resource.js in vue, a request can be sent by using this. $ http.get ('request address'), so as to obtain data in json, and then the data is rendered to a page:
optionally, the script tag included in the first page component in step 32 includes a first page component components sub-tag, a first page component data sub-tag, and a first page component methods sub-tag;
the first page component sub-tag is used for referencing a second page component;
the first page component data sub-tag is used for defining data required by rendering of the first page component;
the first page components methods sub-tag is used to define the interaction logic for processing data.
In the embodiment, in the first page component, a picture display container of an Element UI is placed in a < template > </template > tag and is used for displaying a video cover picture; the < script > </script > tag of the first page component only contains three parts of components, data and methods. Components are used to specify the second page component to be referenced; the data is used for defining data required by rendering of the current component; methods are the main areas defining the method for handling data interaction logic. The difference between the first page component and the second page component is that the first page component needs to introduce the second page component at the starting position of the script tag by using an import method and register the component in the components to realize calling, so that the nested parent-child component relationship between the first page component and the second page component is realized; moreover, as shown in fig. 1, if data transmitted from the second page component is to be received in the first page component, a definition method is required to monitor an event triggered by a $ emit event in the second page component; and modifying the style of the picture container in the < style > </style > tag, wherein the style is consistent with the page styles of other components in the whole project.
For example:
in the first page component, a video playing component is introduced at the beginning position of the script tag: import video Player from '@/components/video Player'
Then, register in components: compositions { 'player-dialog':
VideoPlayer},
thereafter, the component is used directly in the < template > tag: < player-dialogref = 'player _ dlg' @ event = 'dispatch' > < player-dialog >)
Second page component if a value is to be passed to the first page component, in the second page component:
click(){this.$emit(event,this.message)；}
in the first page assembly: dispatch (payload) { this. Message = payload; },
so as to achieve the purpose that the second page component transmits value to the first page component.
Step 33, setting a video display container in the template tag of the second page component; binding the data transmitted by the first page component with the video display container in the script tag of the second page component, and processing events such as video playing, pausing and the like; setting the style of the video display container in the style tag of the second page component to obtain a set second page component;
in this embodiment, data and a data reference mode are set in the script tag of the second page component, where the data refers to parameters playoperations required for video playing, and the format and address of a video, error information when playing an error, and a double speed of a playing interface can be set in the playoperations. And receiving the video data transmitted from the first page component in a tips transmission mode, and then rendering the second page component.
Optionally, the script tag of the second page component in step 33 includes a second page component props sub-tag, a second page component data sub-tag, a second page component computed sub-tag, a second page component before description sub-tag, and a second page component methods sub-tag;
the second page component props sub-tag is used for receiving the state data of the first page component;
the data sub-tag of the second page component is used for defining data required by rendering of the second page component;
the second page component calculated sub-tag is used for monitoring the change of the player variable of the second page component; the method comprises the steps of directly defining a player variable in a calculated state, storing a value change of the player variable obtained through a $ refs method, automatically calculating the value change of the player variable by the calculated state, and calling all methods of the value-video-player plug-in at the later stage through the player variable. This has the advantage that provision can be made for custom playback.
The second page component before deployment subloy sub-tag is used for defining the processing when the current instance is destroyed;
the current example means that when the vue-video-player plug-in object of the second page component is destroyed, the second page component is processed, and the dependent data tracing and the event monitoring on the second page component are removed.
And the second page component methods sub-tag is used for defining a method and parameters of a self-defined function name.
These custom functions may be used to control the playing or pausing of the video, etc. For example, play:
in the embodiment, in the second page component, the Vue-video-player plug-in is used to place the display container of the playing plug-in the < template > </template > tag; the < script > </script > tag comprises five parts of tips, data, calculated, before description and methods. According to fig. 1, if part of the data of the second page component is to depend on the first page component, the status data of the parent component is received by using tips, the data is used to define the data required by the current component rendering, the computed is used to monitor the change of the variable defined by itself, the before definition is used to define the processing when the current instance is destroyed, the methods are the main area for defining the method, in this property, various methods and parameters for customizing the function name can be defined; and adjusting the style of a video playing interface in the < style > </style > tag, so that the style of the interface can be customized.
For example:
in Methods, it is to listen to the custom button click event that we add, then call the player API to perform the corresponding operation, and change the state, such as play: play (); }, pause: pause () } and the like.
And step 34, the set first page component obtained in step 32 and the set second page component obtained in step 33 form an Element-UI video playing component.
In this embodiment, after the Element-UI video playing component is loaded into the project engineering file, the style of the Element-UI video playing component needs to be further adjusted, which specifically includes:
firstly, setting a picture display function in a first page component, wherein the function can only display pictures, so that the function needs to be optimized and a click function is added; after the first page component is loaded, acquiring information of a video list from a server through an interface, and after the information is successfully returned, assigning data to a picture display list videoInfoList; and then, assigning the values of the videoInfoList to corresponding display areas, such as video titles, video cover pictures, video time and the like, by a traversal method.
Then, when a user clicks a certain video cover picture, calling a second page component by using a $ refs method through a click event, and transmitting a playing address of the video to the second page component; when the second page component monitors that the data of the first video component changes, the second page component immediately responds, opens a popup window for video playing and automatically starts to play the video; at this time, the operation of the user is monitored, if the user closes the video playing page, the video playing is suspended, and if the user leaves the video page completely, the video playing is cleared, so that resource waste and incorrect playing progress of the video caused by the video playing in the background are avoided.
The invention also provides a method for verifying whether the packaged Element UI component is successfully instantiated, which specifically comprises the following steps:
opening a web page console of the project, refreshing a browser page, displaying a blank if the page is loaded abnormally, opening the console and checking whether the console loads a Vue-video-palette plugin and reports an error, and if so, checking whether providplug configured in a webpack file is correct; if the error is not reported and the page display is normal, verifying whether the video playing function is normal, and if the video playing is abnormal, checking whether the parameter configuration of the Vue-video-palette plug-in is wrong or whether the video address transmitted by the first page component is correct until the video playing function is normal.
Example two
The embodiment discloses a video playing component development device, which comprises a plug-in mounting module, a configuration module and a packaging module;
the plug-in installation module is used for globally installing a vue-video-player plug-in the project engineering file of the video playing component to be installed to obtain the project engineering file after the plug-in is installed;
the project engineering file after the plug-in installation comprises a page entry subfile, a webpack production environment core configuration subfile and a components public group subfolder;
the configuration module is used for configuring ProvidePlugin parameters in the webpack production environment core configuration subfile after introducing the vue-video-player plug-in and the plug-in pattern into the page entry subfile to obtain a configured project engineering file;
the packaging module is used for packaging the vue-video-player plug-in into an Element-UI video playing component in a components public group subfolder of the configured project file and loading the Element-video-playing component into the configured project file;
the packaging module comprises an assembly establishing sub-module, a second page assembly setting sub-module, a first page assembly setting sub-module and a packaging sub-module;
the component establishing sub-module is used for newly establishing two vue format files in the components public group subfolder to obtain a first page component and a second page component, wherein the first page component is a parent component of the second page component;
the first page component and the second page component comprise template tags, script tags and style tags;
the first page component setting submodule is used for setting a picture display container in a template tag of the first page component; acquiring a data list of a video to be displayed in the script tag of the first page component, and transmitting the data list to the second page component; setting the style of the picture display container in the style label of the first page assembly to obtain the set first page assembly;
the second page component setting submodule is used for setting a video display container in a template tag of the second page component; binding the data transmitted by the first page component with a video display container in the script tag of the second page component, and processing video playing, pausing and other events; setting the style of the video display container in the style tag of the second page component to obtain a set second page component;
and the packaging sub-module is used for obtaining an Element-UI video playing component according to the set second page component and the set first page component.
Optionally, when the providepugin parameter is configured in the webpack production environment core configuration subfile in the configuration module, the providepugin parameter is set to be new webpack.
Optionally, the script tag of the second page component in the second page component setting sub-module includes a second page component props sub-tag, a second page component data sub-tag, a second page component computed sub-tag, a second page component before description sub-tag, and a second page component methods sub-tag;
the second page component props sub-label is used for receiving the state data of the first page component;
the data sub-tag of the second page component is used for defining data required by rendering of the second page component;
the second page component calculated sub-tag is used for monitoring the change of the player variable of the second page component;
the method comprises the steps of defining a player variable directly in the computed, storing a vue-video-player plug-in instance obtained through a $ refs method, automatically calculating the change of the player variable by the computed, and calling all methods of the vue-video-player plug-in through the player variable at the later stage. This has the advantage that a custom play can be achieved.
The current instance refers to the vue-video-player plug-in object of the current second page component; when destroyed, this second page component is also processed, removing its own dependent data traces and event snooping.
And the second page component methods sub-tag is used for defining a method and parameters of a self-defined function name.
Optionally, the script tag included in the first page component setting sub-module includes a first page component components sub-tag, a first page component data sub-tag, and a first page component methods sub-tag;
the first page component sub-tag is used for referencing a second page component;
the first page component data sub-tag is used for defining data required by rendering of the first page component;
the first page components methods sub-tag is used to define the interaction logic for processing data.
Through the above description of the embodiments, those skilled in the art will clearly understand that the present invention may be implemented by software plus necessary general hardware, and certainly may also be implemented by hardware, but in many cases, the former is a better embodiment. Based on such understanding, the technical solutions of the present invention or portions thereof contributing to the prior art may be embodied in the form of a software product, which is stored in a readable storage medium, such as a floppy disk, a hard disk, or an optical disk of a computer, and includes several instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute the methods according to the embodiments of the present invention.
Claims (8)
1. A video playing component development method is used for loading an Element-UI video playing component in a project engineering file, and is characterized by comprising the following steps:
step 1, globally installing a vue-video-player plug-in a project file of a video playing component to be installed to obtain a project file after the plug-in is installed;
the project engineering file after the plug-in installation comprises a page entry subfile, a webpack production environment core configuration subfile and a components public group subfolder;
step 2, after introducing a vue-video-player plug-in and a plug-in pattern into a page entry subfile of the project engineering file after the plug-in is installed, configuring ProvidePlugin parameters in the webpack production environment core configuration subfile to obtain a configured project engineering file;
step 3, encapsulating the vue-video-player plug-in into an Element-UI video playing component in a component public group subfolder of the configured project file, and loading the Element-video-player plug-in into the configured project file;
the packaging of the vue-video-player plug-in into an Element-UI video playing component in the components public group subfolder of the configured project engineering file specifically comprises the following steps:
step 31, newly building two vue format files in the components public group subfolder to respectively obtain a first page component and a second page component, wherein the first page component is a parent component of the second page component;
the first page component and the second page component comprise template tags, script tags and style tags;
step 32, setting a picture display container in the template tag of the first page component; acquiring a data list of a video to be displayed in the script tag of the first page component, and transmitting the data list to the second page component; setting the style of the picture display container in the style label of the first page assembly to obtain the set first page assembly;
step 33, setting a video display container in the template tag of the second page component; binding the data transmitted by the first page component with the video display container in the script tag of the second page component, and processing video playing and pausing events; setting the style of the video display container in the style tag of the second page component to obtain the set second page component;
and the Element-UI video playing component is formed by the set first page component obtained in the step 34 and the step 32 and the set second page component obtained in the step 33.
2. The method as claimed in claim 1, wherein in the step 2, when the providplugin parameter is configured in the webpack production environment core configuration subfile, the providplugin parameter is set to be new webpack.
3. The method for developing a video playing component according to claim 1, wherein the script tag of the second page component in step 33 includes a second page component props sub-tag, a second page component data sub-tag, a second page component computed sub-tag, a second page component before destroy sub-tag and a second page component methods sub-tag;
the second page component props sub-label is used for receiving the state data of the first page component;
the data sub-tag of the second page component is used for defining data required by rendering of the second page component;
the second page component calculated sub-tag is used for monitoring the change of the player variable of the second page component;
the second page component before deployment substring sub-label is used for defining the processing when the current instance is destroyed;
the second page component methods sub-tag is used for defining a method and content of a self-defined function name.
4. The method for developing video playback components of claim 1, wherein the script tag included in the first page component in step 32 includes a first page component components sub-tag, a first page component data sub-tag, and a first page component methods sub-tag;
the first page component sub-tag is used for referencing a second page component;
the first page component data sub-tag is used for defining data required by rendering of the first page component;
the first page components methods sub-tag is used to define the interaction logic for processing data.
5. A video playing component development device is characterized by comprising a plug-in mounting module, a configuration module and a packaging module;
the plug-in installation module is used for globally installing a vue-video-player plug-in the project engineering file of the video playing component to be installed to obtain the project engineering file after the plug-in is installed;
the project engineering file after the plug-in installation comprises a page entry subfile, a webpack production environment core configuration subfile and a components public group subfolder;
the configuration module is used for configuring ProvidePlugin parameters in the webpack production environment core configuration subfile after introducing the vue-video-player plug-in and the plug-in pattern into the page entry subfile to obtain a configured project engineering file;
the packaging module is used for packaging the vue-video-player plug-in into an Element-UI video playing component in a components public group subfolder of the configured project file and loading the Element-video-player plug-in into the configured project file;
the packaging module comprises an assembly establishing sub-module, a second page assembly setting sub-module, a first page assembly setting sub-module and a packaging sub-module;
the component establishing sub-module is used for newly establishing two vue format files in the components public group subfolder to obtain a first page component and a second page component, wherein the first page component is a parent component of the second page component;
the first page component and the second page component comprise template tags, script tags and style tags;
the first page component setting submodule is used for setting a picture display container in a template tag of the first page component; acquiring a data list of videos to be displayed in the script tag of the first page component, and transmitting the data list to a second page component; setting the style of the picture display container in the style label of the first page component to obtain the set first page component;
the second page component setting submodule is used for setting a video display container in a template tag of the second page component; binding the data transmitted by the first page component with the video display container in the script tag of the second page component, and processing video playing and pausing events; setting the style of the video display container in the style tag of the second page component to obtain the set second page component;
and the packaging sub-module is used for forming an Element-UI video playing component according to the set second page component and the set first page component.
6. The apparatus for developing video playback components of claim 5, wherein when the ProvidePlugin parameter is configured in the WEBPack production environment core configuration subfile in the configuration module, the ProvidePlugin parameter is set to be new WEBPack.
7. The apparatus for developing video playing components according to claim 5, wherein the script tag of the second page component in the second page component setting sub-module comprises a second page component props sub-tag, a second page component data sub-tag, a second page component computed sub-tag, a second page component before description sub-tag and a second page component methods sub-tag;
the second page component props sub-label is used for receiving the state data of the first page component;
the second page component data sub-tag is used for defining data required by rendering of a second page component;
the second page component calculated sub-tag is used for monitoring the change of the player variable of the second page component:
the second page component before deployment substring sub-label is used for defining the processing when the current instance is destroyed;
and the second page component methods sub-tag is used for defining a method and content of a self-defined function name.
8. The video playback component development apparatus of claim 5, wherein the script tag included in the first page component setup sub-module includes a first page component components sub-tag, a first page component data sub-tag, and a first page component methods sub-tag;
the first page component sub-tag is used for referencing a second page component;
the first page component data sub-tag is used for defining data required by rendering of the first page component;
the first page components methods sub-tag is used to define the interaction logic for processing data.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010582642.2A CN111708522B (en) | 2020-06-23 | 2020-06-23 | Video playing component development method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010582642.2A CN111708522B (en) | 2020-06-23 | 2020-06-23 | Video playing component development method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111708522A CN111708522A (en) | 2020-09-25 |
| CN111708522B true CN111708522B (en) | 2023-01-31 |
Family
ID=72542625
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010582642.2A Active CN111708522B (en) | 2020-06-23 | 2020-06-23 | Video playing component development method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111708522B (en) |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101883110A (en) * | 2010-07-02 | 2010-11-10 | 深圳市路通网络技术有限公司 | Method and device for realizing video broadcasting management in third-party system |
| CN108153886A (en) * | 2017-12-28 | 2018-06-12 | 北京恒泰实达科技股份有限公司 | User-defined visual methods of exhibiting of the real time data in web applications |
Family Cites Families (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7870562B1 (en) * | 2005-06-24 | 2011-01-11 | Apple Inc. | Media rendering hierarchy |
| US9887949B2 (en) * | 2014-05-31 | 2018-02-06 | Apple Inc. | Displaying interactive notifications on touch sensitive devices |
| CN107181803B (en) * | 2017-05-23 | 2020-04-10 | 百度在线网络技术（北京）有限公司 | Method and device for playing video |
| CN108052548A (en) * | 2017-11-27 | 2018-05-18 | 深圳市前海圆舟网络科技股份有限公司 | Method, system and the terminal device that a kind of webpage creates |
| CN109460276A (en) * | 2018-10-25 | 2019-03-12 | 北京字节跳动网络技术有限公司 | The page and page configuration document generating method, device, terminal device and medium |
| CN109871499A (en) * | 2019-01-16 | 2019-06-11 | 中国平安财产保险股份有限公司 | Page loading method and client |
| CN110515683B (en) * | 2019-07-15 | 2022-12-13 | 平安普惠企业管理有限公司 | Method and device for visual configuration of front-end Vue page and storage medium |
| CN110458445B (en) * | 2019-08-07 | 2020-12-11 | 上海鸣啸信息科技股份有限公司 | Passenger information publishing management system |
| CN111309632B (en) * | 2020-03-20 | 2023-08-18 | 北京达佳互联信息技术有限公司 | Application program testing method and device, computer equipment and storage medium |
-
2020
- 2020-06-23 CN CN202010582642.2A patent/CN111708522B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101883110A (en) * | 2010-07-02 | 2010-11-10 | 深圳市路通网络技术有限公司 | Method and device for realizing video broadcasting management in third-party system |
| CN108153886A (en) * | 2017-12-28 | 2018-06-12 | 北京恒泰实达科技股份有限公司 | User-defined visual methods of exhibiting of the real time data in web applications |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111708522A (en) | 2020-09-25 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US7716665B2 (en) | System and method for developing portal applications and for automatically deploying portal applications into a portal server application | |
| US6268852B1 (en) | System and method for facilitating generation and editing of event handlers | |
| US9342613B2 (en) | Display and installation of portlets on a client platform | |
| US8972873B2 (en) | Multi-environment widget assembly, generation, and operation | |
| US8250458B2 (en) | Method, system, and software tool for emulating a portal application | |
| US20050198646A1 (en) | Method, data processing device, computer program product and arrangement for processing electronic data | |
| EP1612677A2 (en) | Smart GUI Activity Recording and Playback Framework | |
| CN103237083B (en) | A kind of mobile information service resource paradigmatic system and method | |
| US20090037801A1 (en) | Method and apparatus for automatic user manual generation | |
| EP3758335A1 (en) | Hosted application marketplaces | |
| US20150317405A1 (en) | Web Page Variation | |
| CN113296653B (en) | Simulation interaction model construction method, interaction method and related equipment | |
| CN112114890A (en) | Method, device and equipment for processing small program and storage medium | |
| CN111782184B (en) | Apparatus, method, apparatus and medium for performing a customized artificial intelligence production line | |
| CN112528203A (en) | Webpage-based online document making method and system | |
| Chang et al. | Developing mobile applications on the Android platform | |
| JP2004538695A (en) | Computer-based multimedia creation, management, and deployment platform | |
| CN115658496A (en) | Extensible Web automatic test method, system, equipment and storage medium | |
| CN116974620A (en) | Application program generation method, operation method and corresponding device | |
| CN101582899B (en) | Method, system, and service server for providing firmware through communication network | |
| CN111708522B (en) | Video playing component development method and device | |
| CN111679828A (en) | Data processing method and device, electronic equipment and storage medium | |
| Penberthy | Beginning ASP. NET for Visual Studio 2015 | |
| KR102191458B1 (en) | Apparatus and method for scrapping web data | |
| Gilmore | Easy Laravel 5 |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |