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 PDF

Info

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.)
Pending
Application number
CN202210761598.0A
Other languages
Chinese (zh)
Inventor
李晓涛
李朝晖
宦宣颐
冯禹鹤
梅少杰
关辉
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Qingdao Youyun Zhilian Technology Co ltd
Original Assignee
Qingdao Youyun Zhilian Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Qingdao Youyun Zhilian Technology Co ltd filed Critical Qingdao Youyun Zhilian Technology Co ltd
Priority to CN202210761598.0A priority Critical patent/CN115190364A/en
Publication of CN115190364A publication Critical patent/CN115190364A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47End-user applications
    • H04N21/472End-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
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47End-user applications
    • H04N21/482End-user interface for program selection
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47End-user applications
    • H04N21/485End-user interface for client configuration
    • H04N21/4856End-user interface for client configuration for language selection, e.g. for the menu or subtitles
    • HELECTRICITY
    • H04ELECTRIC COMMUNICATION TECHNIQUE
    • H04NPICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/80Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/85Assembly of content; Generation of multimedia applications
    • H04N21/858Linking data to content, e.g. by linking an URL to a video object, by creating a hotspot
    • H04N21/8586Linking data to content, e.g. by linking an URL to a video object, by creating a hotspot by using a URL

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

Method for defining and controlling video knowledge on-demand playing entrance in website
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:
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.
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:
step 501, calculating url of the video file, wherein the video file may be stored in a server with the same website or a separate object storage server according to the situation because the video file is large, so that in step 1, whether the video is a source or a source (boolean value) can be defined;
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, namely a video element, in the page defined in 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 step 1, and constructing a track tag, where the tag is to be a component of a video element to provide a subtitle for the video, and there are multiple subtitles in the subtitle file list, such as middle, english, and middle english, and while constructing the track tag, a radio type (i.e., a circle-shaped radio box) input tag is also constructed, and these input tags do not belong to the component of the video, but can be selected by clicking to execute a function of replacing the subtitle (see step 510);
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, so that the video source and the subtitle of the video element are completed and can be normally played;
step 507, finding a div element with id being 'video _ vtt' in the page defined in the step 2, assigning the input tag element constructed in the step 505 to innerHTML of the div element, and selecting a subtitle by a user through the input tag element;
step 508, traverse the knowledge point title and its start time list video _ entries defined in step 1, construct li label element, this element includes knowledge point start time, hierarchical indentation of 4 blank spaces, knowledge point title, onclick event and its function (playat) call, etc., search for ul element with id "sections" each traverse a title, and add li label element constructed to child element of this ul element through appndhild, at this moment, the user can see the knowledge on demand entry list with time and title, position the video to the correspondent time through clicking the list and begin to play;
step 509, finding the video element after completing the content in step 506, taking out the attribute of the textTracks, defining a change event monitoring function of the attribute, that is, when the subtitle is changed, a function to be called back, wherein the function has a task of traversing each track (subtitle) of the textTracks, if the mode of the subtitle is a watching mode, that is, when the subtitle is currently selected, finding a corresponding input element constructed in step 505, setting the clicked attribute as a true, and returning the function, otherwise, continuing traversing the next track, and when the mode of all tracks does not have a watching mode, selecting an input tag without a subtitle, where the monitoring function is used for selecting different subtitles from the play control component of the video itself, and the input tag needs to be changed accordingly, and the result of the change event function in step 510 is the same as the result of the change subtitle event function, and only the path of selecting subtitles is different;
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';
step 511, traversing the videos, pausing the videos at 0.8 second so that non-black pictures (more black screens are displayed in 0 second) can be seen, for each video, monitoring a play event, and pausing the playing of other videos by the event function, so that the situation that when a plurality of videos exist in one page, the videos can be played simultaneously is avoided.
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.
CN202210761598.0A 2022-06-30 2022-06-30 Method for defining video knowledge on-demand playing entry and controlling playing in website Pending CN115190364A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210761598.0A CN115190364A (en) 2022-06-30 2022-06-30 Method for defining video knowledge on-demand playing entry and controlling playing in website

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210761598.0A CN115190364A (en) 2022-06-30 2022-06-30 Method for defining video knowledge on-demand playing entry and controlling playing in website

Publications (1)

Publication Number Publication Date
CN115190364A true CN115190364A (en) 2022-10-14

Family

ID=83516388

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210761598.0A Pending CN115190364A (en) 2022-06-30 2022-06-30 Method for defining video knowledge on-demand playing entry and controlling playing in website

Country Status (1)

Country Link
CN (1) CN115190364A (en)

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150289022A1 (en) * 2012-09-29 2015-10-08 Karoline Gross Liquid overlay for video content
CN106804011A (en) * 2017-02-10 2017-06-06 深圳创维数字技术有限公司 The method and system of loading caption file during a kind of broadcasting video

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150289022A1 (en) * 2012-09-29 2015-10-08 Karoline Gross Liquid overlay for video content
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)

* Cited by examiner, † Cited by third party
Title
尹文刚;杨斌;: "Android平台上基于HTML5+WebRTC的视频会议系统", 单片机与嵌入式系统应用, no. 11 *
徐镇辉;: "基于HTML5的视频网站设计与Web前端EPG系统实现", 漳州职业技术学院学报, no. 02, pages 1 - 6 *
甘卫民;李毓丽;: "基于JavaScript技术的Tab面板设计与实现", 电脑编程技巧与维护, no. 10, pages 1 - 3 *

Similar Documents

Publication Publication Date Title
US11120196B2 (en) Systems and methods for sharing user generated slide objects over a network
US11816170B2 (en) Dynamic search set creation in a search engine
Pomerantz Metadata
Meixner Hypervideos and interactive multimedia presentations
US20030211447A1 (en) Computerized learning system
CN103873928B (en) A kind of method, device and application server for playing video
CN103984740B (en) Based on the method and system that the retrieved page of combination tag shows
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
US20090043814A1 (en) Systems and methods for comments aggregation and carryover in word pages
CN103092962B (en) A kind of method and system issuing internet information
KR20100057087A (en) Customization of search results
US20180157763A1 (en) System and method for generating an electronic page
CN101765979A (en) Document processing for mobile devices
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
US11625448B2 (en) System for superimposed communication by object oriented resource manipulation on a data network
CN105630792A (en) Information display method and device as well as information push method and device
US20230205981A1 (en) System for superimposed communication by object oriented resource manipulation on a data network
CN115190364A (en) Method for defining video knowledge on-demand playing entry and controlling playing in website
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
KR101302583B1 (en) An e-learning contents management system based on object units and the method thereof
CN115994523B (en) Rich-format digital teaching material content numbering method and system

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