CN115190364A - Method for defining video knowledge on-demand playing entry and controlling playing in website - Google Patents
Method for defining video knowledge on-demand playing entry and controlling playing in website Download PDFInfo
- Publication number
- CN115190364A CN115190364A CN202210761598.0A CN202210761598A CN115190364A CN 115190364 A CN115190364 A CN 115190364A CN 202210761598 A CN202210761598 A CN 202210761598A CN 115190364 A CN115190364 A CN 115190364A
- Authority
- CN
- China
- Prior art keywords
- video
- defining
- tag
- title
- file
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 13
- 230000008859 change Effects 0.000 claims description 5
- 238000012544 monitoring process Methods 0.000 claims description 5
- 238000003491 array Methods 0.000 claims description 3
- 238000007373 indentation Methods 0.000 claims description 3
- 238000012549 training Methods 0.000 abstract description 5
- 238000010276 construction Methods 0.000 abstract description 3
- 230000006870 function Effects 0.000 description 28
- 238000004422 calculation algorithm Methods 0.000 description 2
- 230000004888 barrier function Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 239000000969 carrier Substances 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012552 review Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- 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/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/482—End-user interface for program selection
-
- 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/485—End-user interface for client configuration
- H04N21/4856—End-user interface for client configuration for language selection, e.g. for the menu or subtitles
-
- 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/85—Assembly of content; Generation of multimedia applications
- H04N21/858—Linking data to content, e.g. by linking an URL to a video object, by creating a hotspot
- H04N21/8586—Linking data to content, e.g. by linking an URL to a video object, by creating a hotspot by using a URL
Landscapes
- Engineering & Computer Science (AREA)
- Multimedia (AREA)
- Signal Processing (AREA)
- Human Computer Interaction (AREA)
- Databases & Information Systems (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The invention discloses a method for defining and controlling a video knowledge on-demand playing entrance in a website, which comprises the following steps: step 1, defining necessary JavaScript object variables in an HTML file; step 2, defining placeholder elements and ids thereof of the video pages in the HTML files, and referring JavaScript files which are responsible for completing the content of the video pages and controlling the playing; step 3, defining an onLoad event function onLoad in a body tag of HTML; step 4, when the video playing page is loaded, the browser executes onLoad function; and 5, calculating and filling the content of the video page according to the definition in the step 1. The method for defining and controlling the video knowledge on-demand playing entry in the website can ensure that a website builder is simple and easy to use, and a user is applicable and convenient; the construction of video sites such as courseware, meetings, on-line discussion, internal training and sharing recording screens can greatly enhance the user experience.
Description
Technical Field
The invention relates to the technical field of HTML5 webpage content construction, in particular to a method for defining and controlling a video knowledge on-demand playing inlet in a website.
Background
Video is one of the most common and effective ways and carriers to convey information and knowledge. With the popularization of screen recording tools and video making tools and the drive of video UGC platforms such as youtube, bilibili, TED, internet public classes and the like, various video resources are increasingly enriched, and almost every school and medium-sized and large-sized companies also have own training and experience to share courseware. Especially, under the environment heavily depending on the online conference, a large amount of screen recording videos for the online conference and online discussion are generated.
A series of videos usually used for training requires tens of hours, and each video is from tens of minutes to one or two hours on average, and many hours of special lectures are common. Such many videos are both wealth and worries, and it is very urgent how to efficiently and conveniently find the desired content in a limited time. In order to break the communication barrier of the cross-department, students need to efficiently learn without wasting time on searching knowledge points, and the conventional video management and playing means obviously cannot meet the requirement.
For companies or individuals, it is more desirable that the video website which can be built by themselves can also easily solve the problem.
Disclosure of Invention
The invention aims to overcome the defects of the prior art and provides a method for defining and controlling a video knowledge on-demand playing inlet in a website, so that a website builder is simple and easy to use, and a user is applicable and convenient.
The technical scheme of the invention is as follows:
a method for defining and controlling video knowledge on-demand playing entry in website includes:
step 1, defining necessary JavaScript object variables in an HTML file;
step 2, defining placeholder elements and ids thereof of the video pages in the HTML files, and referring JavaScript files which are responsible for completing the content of the video pages and controlling the playing;
step 3, defining an onLoad event function onLoad in a body tag of HTML;
step 4, when the video playing page is loaded, the browser executes onLoad function;
and 5, calculating and filling the content of the video page according to the definition in the step 1.
Further, step 1 comprises:
step 101, defining video _ localfile, wherein the type is Boolean type, and when true, the video uses the in-station file, and when false, the video uses the out-station file;
step 102, defining a video _ path, wherein the type is a boolean type, true indicates that the video file in the step 104 includes a path from webroot, and false indicates that the path of the video file in the step 104 is the same as the path of the HTML file;
step 103, defining a video _ title, wherein the character type variable is the title of the video;
step 104, defining a video _ file, wherein the content of the character type variable is a video file and comprises three forms of a simple file name, a path-containing form and a domain name;
step 105, defining a video _ vtt and an object array, wherein each object is a subtitle and comprises four attributes of a plug-in subtitle file name, a subtitle code number and whether the plug-in subtitle is defaulted;
and 106, defining video _ entries and object arrays, wherein each object is a structured expression of a knowledge point and comprises grading, playing start time and title.
Further, step 2 comprises:
step 201, introducing a JavaScript file through < script src ='/pages/js/video.
Step 202, defining a body tag of HTML, and specifying a function of onLoad event trigger proprietary to the tag < body onLoad = "onLoad ('1.n'); "background =" bg. Jpg ">;
step 203, adding a < div > tag, defining a placeholder tag of a video title in the tag, setting id as 'video _ title', wherein the content of the tag is empty, and filling the tag by an onLoad function in video.
And step 204, defining < table > tags, and designing the table into a row and two columns, wherein the < video > tags are defined in the first column, and the < div > tags with id 'video _ vtt' and the < ul > tags with id 'sections' are defined in the second column.
Further, step 5 comprises:
Compared with the prior art, the invention has the beneficial effects that: the invention can greatly enhance the user experience for the construction of video sites such as courseware, conference, on-line discussion, internal training, sharing and recording screens and the like. After all, videos with large information amount of dozens of minutes or even hours have low time cost for finding interesting contents, knowledge points mastered and not mastered by each person are different, and all the knowledge points can be remembered without looking at training class courseware. The arrangement calibration and the hierarchical retraction layout of the playing entrance enable a user to be clear about the theme, the topic or the knowledge point of the video at a glance and to request and review the video as required.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the drawings used in the embodiments or the prior art descriptions will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art that other drawings can be obtained according to the drawings without creative efforts.
FIG. 1 is a flowchart of the method steps for defining and controlling the video knowledge on-demand playback entry in a website according to the present invention;
FIG. 2 is a detailed flowchart of step 5 of the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention will be described in further detail with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
In order to explain the technical means of the present invention, the following description will be given by way of specific examples.
Examples
Referring to fig. 1, the present embodiment provides a method for defining and controlling a video knowledge on-demand playing entry in a website, including:
(1) Step 1, defining necessary JavaScript object variables in an HTML file, such as a video file (video _ file), a video title (video _ title), a video subtitle file list (video _ vtt), a knowledge point title and a start time list thereof (video _ entries), whether the video is a local source or an external source (video _ localfile),
the step 1 specifically comprises the following steps:
step 101, defining a video _ localfile, wherein the type is Boolean type, the video uses in-station files when true, and the video uses out-station files when false;
step 102, defining a video _ with path, wherein the type is boolean, true indicates that the video file in step 104 includes a path from webboot, and false indicates that the video file path in step 104 is the same as the HTML file path (note that the path is the same and does not represent the same domain name, the video _ localfile in step 101 is false, and the video url and the url of HTML are different);
step 103, defining a video _ title, wherein the character type variable is a title of a video;
step 104, defining a video _ file, wherein character variables comprise video files, including three forms of simple file names, paths and domain names;
step 105, defining a video _ vtt and an object array, wherein each object is a subtitle and comprises four attributes of a plug-in subtitle file name (src), a subtitle name (label), a subtitle code number (src) and default (default);
and 106, defining video _ entries and object arrays, wherein each object is a structured expression of a knowledge point, and comprises a level (level), a playing start time (time) and a title (subtitle).
(2) Step 2, defining placeholder elements and ids thereof of the video pages in the HTML file, and referring to a JavaScript file which is responsible for completing the content of the video pages and controlling the playing, wherein onLoad functions mentioned in the subsequent steps are one of important functions defined in the file, and searching the elements one by one according to the ids by the following algorithm (step 5) and filling the related contents defined in the step 1;
the step 2 specifically comprises the following steps:
step 201, introducing a JavaScript file through < script src ='/pages/js/video.
Step 202, define the body tag of the HTML, and the function < body onLoad = "onLoad ('1.n') that specifies the onLoad event trigger specific to the tag; "background =" bg.jpg ";
step 203, adding a < div > tag, defining a video title placeholder tag (h 1 tag) in the tag, setting id as 'video _ title', enabling the content of the tag to be empty, and filling the tag with an onLoad function in video.
Step 204, defining < table > tags, and designing the table into one row and two columns, wherein the < video > tag is defined in the first column, the id of the video is "1.n", that is, the placeholder tag of the video element, two types of sub-elements < source > and < track > of the video element are supplemented in step 5, the second column is the < div > tag with id of "video _ vtt" and the < ul > tag with id of "sections", which are the placeholder of the subtitle selection radio box and the placeholder of the knowledge on-demand put-in list respectively, and the content of the placeholder is also supplemented in step 5.
(3) Step 3, defining an onLoad event function onLoad in a body tag of HTML;
(4) Step 4, when the video playing page (the page in the step 2) is loaded, the browser executes an onLoad function;
(5) Step 5, according to the definition in the step 1, calculating and filling the content of the video page, mainly comprising a video title, a video source address in a video tag, a subtitle and a play point list;
as shown in fig. 2, step 5 specifically includes:
in step 510, when the user selects a subtitle from the radio box (e.g. three selectable items of 'no subtitle', 'english', 'chinese'), the onclick event function is called, for example, when selecting 'chinese', the function is called as follows: changeSubTitle ('1.n', 'zh'), where '1.n' is the id of a video element (video tag) and 'zh' is the code number of chinese, the algorithm idea of the function is: 1) Finding video elements, 2) traversing textTracks of the video, if the language of the current track is the subtitle which the user wants to select, setting the mode of the track to 'watching' and setting the mode of the track to 'hidden';
The present invention is not limited to the above preferred embodiments, and any modifications, equivalent substitutions and improvements made within the spirit and principle of the present invention should be included in the protection scope of the present invention.
Claims (4)
1. A method for defining and controlling a video knowledge on-demand playing inlet in a website is characterized by comprising the following steps:
step 1, defining necessary JavaScript object variables in an HTML file;
step 2, defining placeholder elements and ids thereof of the video pages in the HTML files, and referring JavaScript files which are responsible for completing the content of the video pages and controlling the playing;
step 3, defining an onLoad event function onLoad in a body tag of HTML;
step 4, when the video playing page is loaded, the browser executes onLoad function;
and 5, calculating and filling the content of the video page according to the definition in the step 1.
2. The method for video knowledge on demand player entry definition and play control in a website as claimed in claim 1, wherein step 1 comprises:
step 101, defining a video _ localfile, wherein the type is Boolean type, the video uses in-station files when true, and the video uses out-station files when false;
step 102, defining a video _ with path, wherein the type is a boolean type, when true, the video file in the step 104 includes a path from webboot, and when false, the video file path in the step 104 is the same as the path of the HTML file;
step 103, defining a video _ title, wherein the character type variable is the title of the video;
step 104, defining a video _ file, wherein character variables comprise video files, including three forms of simple file names, paths and domain names;
step 105, defining a video _ vtt and an object array, wherein each object is a subtitle and comprises a plug-in subtitle file name, a subtitle code number and whether four attributes are defaulted or not;
and 106, defining video _ entries and object arrays, wherein each object is a structured expression of a knowledge point and comprises grading, playing start time and title.
3. The method of claim 1, wherein the step 2 comprises:
step 201, introducing a JavaScript file through < script src ='/pages/js/video.
Step 202, defining a body tag of HTML, and specifying a function of onLoad event trigger proprietary to the tag < body onLoad = "onLoad ('1.n'); "background =" bg. Jpg ">;
step 203, adding a < div > tag, defining a placeholder tag of a video title in the tag, setting id as 'video _ title', wherein the content of the tag is empty, and filling the tag by an onLoad function in video.
Step 204, defining < table > tags, and designing the table into a row and two columns, wherein the < video > tags are defined in the first column, and the < div > tags with id "video _ vtt" and the < ul > tags with id "sections" are in the second column.
4. The method of claim 1, wherein the step 5 comprises:
step 501, calculating url of a video file;
step 502, finding an h1 element with id being 'video _ title' in the page defined in step 2, and assigning the video title variable video _ title defined in step 1 to the innerHTML of the element;
step 503, finding out an element with id as an onLoad function incoming parameter in the page defined in the step 2;
step 504, constructing a source tag according to the url obtained in step 501, wherein the source tag is used as a component of a video element to provide a video source for the video;
step 505, traversing the subtitle file list video _ vtt defined in the step 1, and constructing a track tag, wherein the tag is used as a component of a video element to provide subtitles for the video;
step 506, assigning the source tag element generated in the step 504 and the track tag element generated in the step 505 to the lnnerHTML of the video element;
step 507, finding a div element with id being 'video _ vtt' in the page defined in the step 2, and assigning the input tag element constructed in the step 505 to innerHTML of the div element;
step 508, traversing the knowledge point title and the start time list video _ entries defined in the step 1, and constructing li tag elements, wherein the elements comprise the start time of the knowledge point, the hierarchical indentation of 4 spaces, the knowledge point title, an onclick event and the function (playat) call thereof;
step 509, finding the video element after the content is completed in step 506, taking out the textTracks attribute of the video element, and defining a change event monitoring function of the attribute;
step 510, when the user selects the subtitle from the radio box, an onclick event function is called;
step 511, traversing the video, and pausing the video at 0.8 second.
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202210761598.0A CN115190364B (en) | 2022-06-30 | 2022-06-30 | Method for defining and controlling playing entrance of video knowledge point in website |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202210761598.0A CN115190364B (en) | 2022-06-30 | 2022-06-30 | Method for defining and controlling playing entrance of video knowledge point in website |
Publications (2)
Publication Number | Publication Date |
---|---|
CN115190364A true CN115190364A (en) | 2022-10-14 |
CN115190364B CN115190364B (en) | 2024-06-18 |
Family
ID=83516388
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202210761598.0A Active CN115190364B (en) | 2022-06-30 | 2022-06-30 | Method for defining and controlling playing entrance of video knowledge point in website |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN115190364B (en) |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20150289022A1 (en) * | 2012-09-29 | 2015-10-08 | Karoline Gross | Liquid overlay for video content |
CN105898608A (en) * | 2015-12-31 | 2016-08-24 | 乐视移动智能信息技术(北京)有限公司 | Video play control method and browser |
CN106804011A (en) * | 2017-02-10 | 2017-06-06 | 深圳创维数字技术有限公司 | The method and system of loading caption file during a kind of broadcasting video |
-
2022
- 2022-06-30 CN CN202210761598.0A patent/CN115190364B/en active Active
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20150289022A1 (en) * | 2012-09-29 | 2015-10-08 | Karoline Gross | Liquid overlay for video content |
CN105898608A (en) * | 2015-12-31 | 2016-08-24 | 乐视移动智能信息技术(北京)有限公司 | Video play control method and browser |
CN106804011A (en) * | 2017-02-10 | 2017-06-06 | 深圳创维数字技术有限公司 | The method and system of loading caption file during a kind of broadcasting video |
Non-Patent Citations (3)
Title |
---|
尹文刚;杨斌;: "Android平台上基于HTML5+WebRTC的视频会议系统", 单片机与嵌入式系统应用, no. 11 * |
徐镇辉;: "基于HTML5的视频网站设计与Web前端EPG系统实现", 漳州职业技术学院学报, no. 02, pages 1 - 6 * |
甘卫民;李毓丽;: "基于JavaScript技术的Tab面板设计与实现", 电脑编程技巧与维护, no. 10, pages 1 - 3 * |
Also Published As
Publication number | Publication date |
---|---|
CN115190364B (en) | 2024-06-18 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US20220100947A1 (en) | Systems and methods for sharing user generated slide objects over a network | |
US10325397B2 (en) | Systems and methods for assembling and/or displaying multimedia objects, modules or presentations | |
US20210342405A1 (en) | Dynamic search set creation in a search engine | |
Meixner | Hypervideos and interactive multimedia presentations | |
CN103873928B (en) | A kind of method, device and application server for playing video | |
CN107273079B (en) | Associated information display method, associated information map processing method, associated information display device, associated information map processing device, associated information map display medium, associated information map processing device and associated information map processing system | |
WO2003039101A2 (en) | Computerized interactive learning system and method over a network | |
US20090043814A1 (en) | Systems and methods for comments aggregation and carryover in word pages | |
JPH1069423A (en) | Hypermedia system and its directory data managing method | |
CN107925788A (en) | Intuitively video content method for regenerating and its user interface device based on data structured | |
US11625448B2 (en) | System for superimposed communication by object oriented resource manipulation on a data network | |
US20170011774A1 (en) | Method for intuitively reproducing video contents through data structuring and the apparatus thereof | |
CN104145265A (en) | Systems and methods involving features of seach and/or search integration | |
CN113079417A (en) | Method, device and equipment for generating bullet screen and storage medium | |
Orihuela | eCommunication: the 10 paradigms of media in the digital age | |
US20230205981A1 (en) | System for superimposed communication by object oriented resource manipulation on a data network | |
CN115190364B (en) | Method for defining and controlling playing entrance of video knowledge point in website | |
Jones | A re-examination of Fortune 500 homepage design practices | |
CN100468403C (en) | Data structure of meta-data and processing method for same meta-data | |
Anniss | What Is a Website and How Do I Use It? | |
Revill et al. | Digital archives, e‐books and narrative space | |
CN112040321A (en) | Method and system for integrally previewing and accurately skipping video content and electronic equipment | |
CN115994523B (en) | Rich-format digital teaching material content numbering method and system | |
US20090006325A1 (en) | Dynamic headline switcher | |
US20230334224A1 (en) | Systems And Methods For Multi-Media Aggregator & Information Hub |
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 |