CN106973329A - A kind of barrage player and its method based on HTML5 - Google Patents

A kind of barrage player and its method based on HTML5 Download PDF

Info

Publication number
CN106973329A
CN106973329A CN201710177654.5A CN201710177654A CN106973329A CN 106973329 A CN106973329 A CN 106973329A CN 201710177654 A CN201710177654 A CN 201710177654A CN 106973329 A CN106973329 A CN 106973329A
Authority
CN
China
Prior art keywords
barrage
video
player
user
container
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
CN201710177654.5A
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.)
Shanghai Huandian Information Technology Co Ltd
Original Assignee
Shanghai Huandian Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shanghai Huandian Information Technology Co Ltd filed Critical Shanghai Huandian Information Technology Co Ltd
Priority to CN201710177654.5A priority Critical patent/CN106973329A/en
Publication of CN106973329A publication Critical patent/CN106973329A/en
Pending legal-status Critical Current

Links

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/478Supplemental services, e.g. displaying phone caller identification, shopping application
    • H04N21/4782Web browsing, e.g. WebTV
    • 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
    • H04N21/47217End-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 for controlling playback functions for recorded or on-demand content, e.g. using progress bars, mode or play-point indicators or bookmarks
    • 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/475End-user interface for inputting end-user data, e.g. personal identification number [PIN], preference data
    • H04N21/4756End-user interface for inputting end-user data, e.g. personal identification number [PIN], preference data for rating content, e.g. scoring a recommended movie
    • 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
    • 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/488Data services, e.g. news ticker
    • H04N21/4884Data services, e.g. news ticker for displaying 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/854Content authoring
    • H04N21/8543Content authoring using a description language, e.g. Multimedia and Hypermedia information coding Expert Group [MHEG], eXtensible Markup Language [XML]

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Human Computer Interaction (AREA)
  • Computer Security & Cryptography (AREA)
  • Databases & Information Systems (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

The invention discloses a kind of barrage method of the barrage player based on HTML5, it is comprised the steps of:The video playback that S1, Website server are sent according to user is asked, and video player, barrage container and barrage input area is created in a browser, and provide corresponding video flowing and barrage file;S2, user play video, and Website server judges the broadcast state and barrage on off state of player, and video playback and barrage are carried out by required video play mode according to user's selection.Its advantage is:User is easily seen comment of the other users for the video current point in time while video is watched, improve viewing entertaining and the experience of video, it is possible to allow user to be controlled content, the manifestation mode of barrage, reach that hommization is experienced.

Description

A kind of barrage player and its method based on HTML5
Technical field
The present invention relates to Internet technical field, and in particular to a kind of barrage player and its method based on HTML5.
Background technology
Barrage refers to one kind when watching video, largely with captions(Have and be not limited to word and picture)What form was presented comments By with video with the phenomenon in a picture.The comment largely sailed above video is as intensive shell, therefore barrage of gaining the name. Barrage can be presented on video in real time with the broadcasting of video, and such beholder is when watching the video it can be seen that other are watched Person and the barrage oneself sent.
HTML5 is one under the kernel language of WWW, standard generalized markup language and applies HTML (HTML)The 5th material alteration, " hypertext " just refers in the page can be comprising picture, link, or even music, program etc. Non-legible element.HTML5 is recommended by W3C in itself.
<video>It is the new label in HTML 5, it is the embedded video elementary in browser page that it, which is acted on, definition is regarded Frequently, such as vidclip or other video flowings, the label externally provide a series of interface method for outside control video
Web server refers generally to Website server, and also referred to as WWW (WORLD WIDE WEB) server, major function is to provide Network information browses service.Document can be provided to Web clients such as browsers, site file can also be placed, the whole world is allowed Browse;Data file can be placed, allows the whole world to download.
The content of the invention
It is an object of the invention to provide a kind of barrage player based on HTML5 and its method, user is set to be regarded in viewing Can easily see comment of the other users for the video current point in time while frequency, improve video viewing entertaining and Experience, it is possible to allow user to be controlled content, the manifestation mode of barrage, reaches that hommization is experienced.
In order to achieve the above object, the present invention is achieved through the following technical solutions:
A kind of barrage player based on HTML5, it is characterized in that, for the synchronous barrage and video playback realized in browser, The barrage player based on HTML5 is included:
Video player creation module, for creating video tab in browser page as video player, and to website Server obtains the corresponding video flowings of video ID and barrage file;
Barrage container creation module, for creating a barrage container on video player, ammunition feed curtain is on video player Displaying;
Barrage MIM message input module, for creating a barrage input area on browser page, for user's input barrage letter Breath, and the barrage information updating that user is inputted is into the barrage file of Website server;
Barrage renders management module, and the barrage information and current video for active user to be inputted play moment corresponding bullet Barrage information in curtain file is converted into after barrage and is shown in barrage container, or is requested timeout barrage displaying according to user;
Website server, the video playback for being sent according to user is asked, and video player creation module, bullet are sent to user The establishment logical file of curtain container creation module and barrage MIM message input module, and video flowing address and barrage letter are provided Breath;
Control module, for creating a control area, user to the operation of control area by realizing the video flowing Play, suspend, redirecting, barrage is switched.
The above-mentioned barrage player based on HTML5, wherein:
The control module can also control barrage display orientation, volume, broadcast window size, transmission barrage according to user's operation Set, video is set, barrage list.
The above-mentioned barrage player based on HTML5, wherein:
Described video player is that the rectangle size that a width and height can freely be set is occupied in browser page Space.
The above-mentioned barrage player based on HTML5, wherein:
Barrage shows motion mode to roll displaying with certain orientation in barrage container or be still in the up/down side of barrage container Or disappeared after certain time.
The above-mentioned barrage player based on HTML5, wherein:
Described barrage container is one and video player size identical transparent region.
A kind of barrage method of the barrage player based on HTML5, it is characterized in that, comprise the steps of:
The video playback that S1, Website server are sent according to user is asked, and video player, barrage are created in a browser and is held Device, barrage input area and user's control region, and corresponding video flowing and barrage file is provided;
S2, user play video, and Website server judges the broadcast state and barrage on off state of player, selected according to user Select and carry out video playback and barrage by required video play mode.
The barrage method of the above-mentioned barrage player based on HTML5, wherein, described step S2 is specifically included:
S21, player are commenced play out;
S22, Website server all carry out a judgement to every frame, if there is the barrage of current time in barrage file, take out, And be presented on barrage container, when user sends barrage, directly it is presented in barrage container;
When S23, player pause are played, stop the judgement per frame, and stop the motion of the barrage in current barrage container;Player When closing barrage, stop the judgement per frame, remove the barrage in barrage container;When player reopens barrage, restart Judgement in S22 per frame;When player redirects the time and commenced play out, the barrage in barrage container is removed, and restart in S22 Judgement per frame;When player plays are finished, stop the judgement per frame, and stop the motion of the barrage in current barrage container
The present invention has advantages below compared with prior art:User is set easily to see other while video is watched User improves viewing entertaining and the experience of video, it is possible to allow user to barrage for the comment of the video current point in time Content, manifestation mode are controlled, and reach that hommization is experienced.
Brief description of the drawings
Fig. 1 is system block diagram of the invention;
Fig. 2 is flow chart of the method for the present invention.
Embodiment
Below in conjunction with accompanying drawing, by describing a preferably specific embodiment in detail, the present invention is further elaborated.
As shown in Figure 1, 2, the invention discloses a kind of barrage player based on HTML5, browser is realized for synchronous In barrage and video playback, should based on HTML5 barrage play implement body include by Website server 1(Or Web server)、 Video player creation module 2, barrage container creation module 3, barrage MIM message input module 4, barrage render management module 5 and Control module 6.The video playback that described Website server 1 is used to be sent according to user is asked, and video playback is sent to user The establishment logical file of device creation module, barrage container creation module and barrage MIM message input module, and video flowing is provided Location and barrage information.
Described video player creation module 2 is used for the establishment video tab in browser page and is used as video playback Device, and the corresponding video flowing of video ID and barrage file are obtained to Website server 1, generally, during the newly-built contribution of user, website Server 1 can distribute unique number-mark this contribution aid, and each contribution can upload multistage video, every section of video point An empty curtain list is generated with unique number-mark this video cid, and with this cid, is sent in this section of video Barrage can store correspondence cid barrage list;User accesses a determination video, net by contribution aid and video labeling cid Site server 1 returns to corresponding video flowing address and barrage file address.In one embodiment of the invention, described video playback Device is the space that the rectangle size that a width and height can freely be set is occupied in browser page.
Described barrage container creation module 3 be used on video player create a barrage container, ammunition feed curtain regarding Shown on frequency player;Barrage container can usually show level higher than video player level with self-defined display location One piece of wide contour rectangular area, can be a common div tag element or one piece of canvas painting canvas, barrage Drafting mode realize various ways.In the present embodiment, described barrage container is one big with video player Small identical transparent region.
Described barrage MIM message input module 4 is used on browser page create a barrage input area, for user Barrage information is inputted, and the barrage information updating that user is inputted is into the barrage file of Website server 1;It is sent to from barrage There is two layers of configurable filter logic during being updated to barrage file:First layer is to judge whether user has sending permission, Whether whether the barrage number of words of input exceed limitation, hit by the shielding rules of barrage, is subsequently sent to Website server 1, net Site server 1 carries out above-mentioned checking again, can just be added to barrage file.
When described barrage renders management module 5 and is used for the barrage information that inputs active user and current video broadcasting Carve the barrage information in corresponding barrage file and be converted into after barrage and be shown in barrage container, or requested timeout bullet according to user Curtain displaying, the support various ways that render of barrage realize, CSS, CSS3, Canvas, degree of support under different browsers and Efficiency differs, can be a kind of from efficiency highest by browser species, and the ways of presentation of barrage supports various ways to realize, There are top barrage, bottom barrage, roll barrage, reverse barrage, wherein rolling barrage has used collision detection mode, it is ensured that excellent Refined ways of presentation.In the present embodiment, it is to roll to show or quiet with certain orientation in barrage container that barrage, which shows motion mode, Only disappeared behind the up/down side of barrage container or certain time.
Described control module is used to create a control area, is typically to be created on video player or on browser Various lists or button are included in one control area, control area, user realizes described by the operation to control area The broadcasting of video flowing, suspend, redirect, barrage switch, can also provide barrage display orientation, volume, broadcast window size, send Barrage is set, video is set, the control of barrage list;In the present embodiment, Website server 1 and barrage render management module 5 User's operational requirements according to being reacted in control module 6 are responded and then realize corresponding control function.
The invention also discloses a kind of barrage method of the barrage player based on HTML5, it is comprised the steps of:
The video playback that S1, Website server are sent according to user is asked, and video player, barrage are created in a browser and is held Device, barrage input area and user's control region, and corresponding video flowing and barrage file is provided;
S2, user play video, and Website server judges the broadcast state and barrage on off state of player, selected according to user Select and carry out video playback and barrage by required video play mode.
The barrage method of the above-mentioned barrage player based on HTML5, wherein, described step S2 is specifically included:
S21, player are commenced play out;
S22, Website server are to every frame(1/60 second)A judgement is all carried out, if there is the bullet of current time in barrage file Curtain, then take out, and is presented on barrage container, when user sends barrage, is directly presented in barrage container;
When S23, player pause are played, stop the judgement per frame, and stop the motion of the barrage in current barrage container;Player When closing barrage, stop the judgement per frame, remove the barrage in barrage container;When player reopens barrage, restart Judgement in S22 per frame;When player redirects the time and commenced play out, the barrage in barrage container is removed, and restart in S22 Judgement per frame;When player plays are finished, stop the judgement per frame, and stop the motion of the barrage in current barrage container.
Although present disclosure is discussed in detail by above preferred embodiment, but it should be appreciated that above-mentioned Description is not considered as limitation of the present invention.After those skilled in the art have read the above, for the present invention's A variety of modifications and substitutions all will be apparent.Therefore, protection scope of the present invention should be limited to the appended claims.

Claims (7)

1. a kind of barrage player based on HTML5, it is characterised in that realize that the barrage in browser is broadcast with video for synchronous Put, be somebody's turn to do the barrage player based on HTML5 and include:
Video player creation module(2), for creating video tab in browser page as video player, and to net Site server(1)Obtain the corresponding video flowings of video ID and barrage file;
Barrage container creation module(3), for creating a barrage container on video player, ammunition feed curtain is in video player Upper displaying;
Barrage MIM message input module(4), for creating a barrage input area on browser page, barrage is inputted for user Information, and the barrage information updating that user is inputted is to Website server(1)Barrage file in;
Barrage renders management module(5), barrage information and current video for active user to be inputted play moment correspondence Barrage file in barrage information be converted into after barrage and be shown in barrage container, or requested timeout barrage exhibition according to user Show;
Website server(1), the video playback for being sent according to user is asked, to user's transmission video player creation module (2), barrage container creation module(3)And barrage MIM message input module(4)Establishment logical file, and provide video flowing address And barrage information;
Control module(6), for creating a control area, user realizes the video flowing by the operation to control area Broadcasting, suspend, redirect, barrage switch.
2. the barrage player as claimed in claim 1 based on HTML5, it is characterised in that:
The control module(6)Barrage display orientation, volume, broadcast window size, transmission can be also controlled according to user's operation Barrage is set, video is set, barrage list.
3. the barrage player as claimed in claim 1 based on HTML5, it is characterised in that:
Described video player is that the rectangle size that a width and height can freely be set is occupied in browser page Space.
4. the barrage player as claimed in claim 1 based on HTML5, it is characterised in that:
Barrage shows motion mode to roll displaying with certain orientation in barrage container or be still in the up/down side of barrage container Or disappeared after certain time.
5. the barrage player based on HTML5 as described in claim 1 or 3, it is characterised in that:
Described barrage container is one and video player size identical transparent region.
6. a kind of barrage method of the barrage player based on HTML5, it is characterised in that comprise the steps of:
S1, Website server(1)The video playback request sent according to user, creates video player, barrage in a browser Container, barrage input area and control area, and corresponding video flowing and barrage file is provided;
S2, user play video, and Website server judges the broadcast state and barrage on off state of player, selected according to user Select and carry out video playback and barrage by required video play mode.
7. the barrage method of the barrage player as claimed in claim 6 based on HTML5, it is characterised in that described step S2 is specifically included:
S21, player are commenced play out;
S22, Website server all carry out a judgement to every frame, if there is the barrage of current time in barrage file, take out, And be presented on barrage container, when user sends barrage, directly it is presented in barrage container;
When S23, player pause are played, stop the judgement per frame, and stop the motion of the barrage in current barrage container;Player When closing barrage, stop the judgement per frame, remove the barrage in barrage container;When player reopens barrage, restart Judgement in S22 per frame;When player redirects the time and commenced play out, the barrage in barrage container is removed, and restart in S22 Judgement per frame;When player plays are finished, stop the judgement per frame, and stop the motion of the barrage in current barrage container.
CN201710177654.5A 2017-03-23 2017-03-23 A kind of barrage player and its method based on HTML5 Pending CN106973329A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710177654.5A CN106973329A (en) 2017-03-23 2017-03-23 A kind of barrage player and its method based on HTML5

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710177654.5A CN106973329A (en) 2017-03-23 2017-03-23 A kind of barrage player and its method based on HTML5

Publications (1)

Publication Number Publication Date
CN106973329A true CN106973329A (en) 2017-07-21

Family

ID=59329536

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710177654.5A Pending CN106973329A (en) 2017-03-23 2017-03-23 A kind of barrage player and its method based on HTML5

Country Status (1)

Country Link
CN (1) CN106973329A (en)

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108259977A (en) * 2018-04-13 2018-07-06 上海哔哩哔哩科技有限公司 Internet video client barrage active shield method, system and storage medium
CN108650557A (en) * 2018-04-27 2018-10-12 Oppo广东移动通信有限公司 A kind of method, device and mobile terminal of display barrage
CN109189537A (en) * 2018-08-31 2019-01-11 掌阅科技股份有限公司 The dynamic display method of page info calculates equipment and computer storage medium
CN109429088A (en) * 2017-08-22 2019-03-05 北京国双科技有限公司 Program interaction method and system
CN110300334A (en) * 2018-03-22 2019-10-01 上海哔哩哔哩科技有限公司 Barrage control method for playing back, server and barrage broadcasting control system
CN110662118A (en) * 2019-09-29 2020-01-07 携程旅游网络技术(上海)有限公司 Bullet screen loading method and system, electronic equipment and medium

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104113785A (en) * 2014-06-26 2014-10-22 小米科技有限责任公司 Information acquisition method and device
CN104462482A (en) * 2014-12-18 2015-03-25 百度在线网络技术(北京)有限公司 Content providing method and system for medium display
CN104661096A (en) * 2013-11-21 2015-05-27 深圳市快播科技有限公司 Video barrage adding method and device, video playing method and video player
US20150382077A1 (en) * 2014-06-26 2015-12-31 Xiaomi Inc. Method and terminal device for acquiring information
CN106060674A (en) * 2016-06-27 2016-10-26 武汉斗鱼网络科技有限公司 System and method for achieving intelligent video live broadcast on front end

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104661096A (en) * 2013-11-21 2015-05-27 深圳市快播科技有限公司 Video barrage adding method and device, video playing method and video player
CN104113785A (en) * 2014-06-26 2014-10-22 小米科技有限责任公司 Information acquisition method and device
US20150382077A1 (en) * 2014-06-26 2015-12-31 Xiaomi Inc. Method and terminal device for acquiring information
CN104462482A (en) * 2014-12-18 2015-03-25 百度在线网络技术(北京)有限公司 Content providing method and system for medium display
CN106060674A (en) * 2016-06-27 2016-10-26 武汉斗鱼网络科技有限公司 System and method for achieving intelligent video live broadcast on front end

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109429088A (en) * 2017-08-22 2019-03-05 北京国双科技有限公司 Program interaction method and system
CN110300334A (en) * 2018-03-22 2019-10-01 上海哔哩哔哩科技有限公司 Barrage control method for playing back, server and barrage broadcasting control system
CN108259977A (en) * 2018-04-13 2018-07-06 上海哔哩哔哩科技有限公司 Internet video client barrage active shield method, system and storage medium
CN108650557A (en) * 2018-04-27 2018-10-12 Oppo广东移动通信有限公司 A kind of method, device and mobile terminal of display barrage
CN109189537A (en) * 2018-08-31 2019-01-11 掌阅科技股份有限公司 The dynamic display method of page info calculates equipment and computer storage medium
CN110662118A (en) * 2019-09-29 2020-01-07 携程旅游网络技术(上海)有限公司 Bullet screen loading method and system, electronic equipment and medium

Similar Documents

Publication Publication Date Title
CN106973329A (en) A kind of barrage player and its method based on HTML5
JP7013432B6 (en) Video information push methods, video information push devices, servers and computer readable storage media
US9003277B2 (en) Method and system for presenting web page resources
US7003726B2 (en) Computer network having context sensitive and interactive multimedia applications and controls, forming dynamic user interfaces on local computer terminals
CN103108248B (en) A kind of implementation method of interactive video and system
CN103369369B (en) Media content and the system and method presented are extracted from social networking service
WO2014145665A2 (en) Mobile social content-creation application and integrated website
US20080281685A1 (en) Media with embedded advertising
US20130339857A1 (en) Modular and Scalable Interactive Video Player
CN107027327A (en) Web content is tagged and filtered
US20190104325A1 (en) Event streaming with added content and context
US20080180391A1 (en) Configurable electronic interface
KR101921926B1 (en) Operating method and content providing system
CN105657502B (en) A kind of implementation method of custom menu, device, client and server
CN105593805B (en) Customization mobile media run-out user interface is oriented based on mobile device
CN102598109A (en) Multiple-screen interactive screen architecture
JP2014502436A (en) Dynamic audiovisual browser and method thereof
WO2018126899A1 (en) Method and device for displaying video interface
CN101998167A (en) Electronic program guide (EPG) display management method and system
CN103631630A (en) Dynamic skin loading method for browser and browser device
CN114025187B (en) Live broadcast method and device and electronic equipment
CN112149025B (en) Media resource display method and device, storage medium and electronic equipment
CN114501100A (en) Live broadcast page skipping method and system
JP2010165354A (en) Transmission and reception system of link information and display device of link information
US9772752B1 (en) Multi-dimensional online advertisements

Legal Events

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

Application publication date: 20170721