CN106534973A - Mobile web platform-based automatic video image playing method - Google Patents
Mobile web platform-based automatic video image playing method Download PDFInfo
- Publication number
- CN106534973A CN106534973A CN201611158681.XA CN201611158681A CN106534973A CN 106534973 A CN106534973 A CN 106534973A CN 201611158681 A CN201611158681 A CN 201611158681A CN 106534973 A CN106534973 A CN 106534973A
- Authority
- CN
- China
- Prior art keywords
- picture
- video
- video image
- mobile web
- big
- 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
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/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/44—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs
- H04N21/4402—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display
- H04N21/440281—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display by altering the temporal resolution, e.g. by frame skipping
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/432—Content retrieval operation from a local storage medium, e.g. hard-disk
- H04N21/4325—Content retrieval operation from a local storage medium, e.g. hard-disk by playing back content from the storage medium
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/433—Content storage operation, e.g. storage operation in response to a pause request, caching operations
- H04N21/4333—Processing operations in response to a pause request
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/44—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs
- H04N21/44016—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs involving splicing one content stream with another content stream, e.g. for substituting a video clip
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/44—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs
- H04N21/4402—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display
- H04N21/440236—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display by media transcoding, e.g. video is transformed into a slideshow of still pictures, audio is converted into text
-
- 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
- H04N21/47202—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 for requesting content on demand, e.g. video on demand
-
- 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/478—Supplemental services, e.g. displaying phone caller identification, shopping application
- H04N21/4782—Web browsing, e.g. WebTV
-
- 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/854—Content authoring
- H04N21/8543—Content authoring using a description language, e.g. Multimedia and Hypermedia information coding Expert Group [MHEG], eXtensible Markup Language [XML]
Abstract
The present invention discloses a mobile web platform-based automatic video image playing method. The method comprises the following steps of transcoding a video into multiple corresponding pictures, and then splicing the multiple pictures to obtain a big picture; initializing a canvas interface and a timer; when loading starts, setting total time for a whole screen recording process and a key position, and performing corresponding operation at the key position; according to an external instruction operation, drawing a specific region of the big picture in the canvas of a page to play; and when drawing is finished, finishing playing the video. According to the method, the user does not need to trigger by hands to play and control the whole screen forcibly, so that the user experience is improved and the interaction effect is better.
Description
Technical field
The present invention relates to mobile Internet field, more particularly to a kind of to play video figure based on automatic on mobile web platforms
The method of picture.
Background technology
In recent years, with the fast development of mobile Internet and HTML5, increasing web page starts embedded video
To increase user interaction and reading content.
Video is played in the browser of current mobile terminal, be there are problems that following two：
(1) browser meeting automatic forced full screen plays video, and cannot be broadcast under non-screen mode toggle by technological means
Put.
(2) browser can Qiang Zhiyaoqiu that user could play video after confirming, and cannot be realized by technological means automatic
Play.
As this two limit, cause video directly cannot be played on the page automatically, while content of pages also cannot be with
Video carries out interaction, such as barrage, pop-up etc..Some will be had a greatly reduced quality based on the interactive advertisement bandwagon effect of video playback.
The content of the invention
It is an object of the invention to overcome the shortcoming and deficiency of prior art, there is provided a kind of to be based on mobile web platforms certainly
The dynamic method for playing video image.
The purpose of the present invention is realized by following technical scheme：
A kind of method based on video image is played automatically on mobile web platforms, comprises the steps of：
S1, whole or a part of video is obtained, be correspondence by video code conversion according to frame rate by video capture instrument
Plurality of pictures, according to actual conditions, the parameter of video capture instrument is set, the parameter of the video capture instrument is used to carry out
The size of frame frequency and the selection for splitting dimension of picture；
S2, the plurality of pictures picture synthetics for generating video piece together a big picture；The picture chi of synthesis
Very little size should be as the dimension of picture size for splitting；
S3, browser get the big picture, and initialize painting canvas interface (canvas api) and timer；Start loading
When, the total time of whole record screen requirements of process is set, is recorded in units of millisecond, key position is set (for example：Work as game
When running to herein, during current picture, suspended, carried out other operations), when reaching the key position, operated (for example
Suspend, picture stops), while the time stopped of operation, when the time value now suspended is constant, carries out peripheral operation, has operated
Into afterwards, time value before obtaining, based on this time value, is played video image again automatically；Carry out by that analogy
Flow operations；
S4, according to outside command operating, according to broadcasting speed, order and original position, big picture specific region is painted
Play out in the painting canvas (canvas) for making the page；
S5, when all regions of big picture are all completed, then illustrate video finished playing, picture can arrange stop
In specified position, timer is then removed, whole interaction is completed.
In step S1, the video capture instrument is preferably ffmpeg instruments.The advantage function of ffmpeg instruments is powerful, easily
Operation, and cross operating system, including Windows, Mac OS X etc..
In step S2, the picture synthetics is Montage Guide.
The picture synthetics can carry out following operation：
Adjustment (allowing the image size of change), cutting (can be with the region of cutting image), text (are set for inscribing image
Meter), separate (allow object being stored is separated from background be subsequently transferred on another photo), application background effect,
Pasted objects (a detached image is pasted another photo), intelligence are deleted (delete object without vestige), intelligence
Size (change image size deletes the part of " unnecessary " while holding " important " feature is intact), intelligent repairing (allow
From image, one region is repaired to another region).The single picture that video can be generated by aforesaid operations is carried out successively
Piece together a big picture；Dimension of picture (such as the length and width) size of synthesis should be with the dimension of picture for splitting (such as length and width)
Size is consistent size；The dimension of picture for splitting same equipment size, is adapted to, it is to avoid entanglement, is consistent.
If rule of thumb mobile device system is below iOS9.0, need the picture splicing synthesis for entirely splitting several
The continuous picture of block, prevents equipment smudgy Chu of image quality under this system.
In step S4, also have during the broadcasting and suspend or continue playing function.With time-out or continuation
Playing function carries out depth interactive operation so as to same user.
The present invention compared with prior art, has the advantage that and beneficial effect：
1st, the present invention can solve the problem that user triggers web video manually and plays, forces played in full screen to cause Consumer's Experience to decline,
More interactive interaction schemes based on video cannot be carried out.The present invention does not need user to trigger broadcasting manually and force full frame, carries
High Consumer's Experience and interaction effect.
2nd, the present invention can be chosen whether automatically as the case may be by being the method for picture set by Video Quality Metric
Or video content is played manually, video can be controlled according to the play parameter (speed, order, original position etc.) of video
Play.Simultaneously in playing process, video and user can be made to carry out depth using painting canvas relevant interface interactive.
Description of the drawings
Fig. 1 is a kind of flow chart based on the method that video image is played automatically on mobile web platforms of the present invention.
Specific embodiment
With reference to embodiment and accompanying drawing, the present invention is described in further detail, but embodiments of the present invention are not limited
In this.
Embodiment one
Such as Fig. 1, a kind of method based on video image is played automatically on mobile web platforms, comprise the steps of：
A kind of method based on video image is played automatically on mobile web platforms, comprises the steps of：
S1, whole or a part of video is obtained, be correspondence by video code conversion according to frame rate by video capture instrument
Plurality of pictures, according to actual conditions, the parameter of video capture instrument is set, the parameter of the video capture instrument is used to carry out
The size of frame frequency and the selection for splitting dimension of picture；
S2, the plurality of pictures picture synthetics for generating video piece together a big picture；The picture chi of synthesis
Very little size should be as the dimension of picture size for splitting；
S3, browser get the picture, and initialize painting canvas interface (canvas api) and timer；Start loading
When, the total time of whole record screen requirements of process is set, is recorded in units of millisecond, key position is set (for example：Work as game
When running to herein, during current picture, suspended, carried out other operations), when reaching the key position, operated (for example
Suspend, picture stops), while the time stopped of operation, when the time value now suspended is constant, carries out peripheral operation, has operated
Into afterwards, time value before obtaining, based on this time value, is played video image again automatically；Carry out by that analogy
Flow operations；
S4, according to outside command operating, according to broadcasting speed, order and original position, big picture specific region is painted
Play out in the painting canvas (canvas) for making the page；
S5, when all regions of big picture are all completed, then illustrate video finished playing, picture can arrange stop
In specified position, timer is then removed, whole interaction is completed.
In step S1, the video capture instrument is preferably ffmpeg instruments.The advantage function of ffmpeg instruments is powerful, easily
Operation, and cross operating system, including Windows, Mac OS X etc..
In step S2, the picture synthetics is Montage Guide.
The picture synthetics can carry out following operation：
Adjustment (allowing the image size of change), cutting (can be with the region of cutting image), text (are set for inscribing image
Meter), separate (allow object being stored is separated from background be subsequently transferred on another photo), application background effect,
Pasted objects (a detached image is pasted another photo), intelligence are deleted (delete object without vestige), intelligence
Size (change image size deletes the part of " unnecessary " while holding " important " feature is intact), intelligent repairing (allow
From image, one region is repaired to another region).The single picture that video can be generated by aforesaid operations is carried out successively
Piece together a big picture；Dimension of picture (such as the length and width) size of synthesis should be with the dimension of picture for splitting (such as length and width)
Size is consistent size；The dimension of picture for splitting same equipment size, is adapted to, it is to avoid entanglement, is consistent.
If rule of thumb mobile device system is below iOS9.0, need the picture splicing synthesis for entirely splitting several
The continuous picture of block, prevents equipment smudgy Chu of image quality under this system.
In step S4, also have during the broadcasting and suspend or continue playing function.With time-out or continuation
Playing function carries out depth interactive operation so as to same user.
Embodiment two
Experience specific to game sample, a kind of method based on video image is played automatically on mobile web platforms, comprising with
Lower step：
(1) game be to be recorded according to screen on the basis of iphone6 and iphone6s screen sizes, video size also with
Based on dimensions above, this size is optimal, can carry out downwards compatibility upwards, with this come compatible iphone5, iphone5s and
Then game sample video is transcoded into response according to particular demands by iphone6 plus, iphone6s plus screen sizes
Picture set (if ipad sizes, it is proposed that change matching material size again, it is ensured that game definition).
(2) the picture intersection of response is spliced into into a big picture, is operated, the key frame of game sample is carried out really
Recognize and write corresponding response action (such as suspend and continue game replaying, cyclic part scene etc.).
(3) due to this interaction be using decoupling picture by video, afterwards synthesize as needed it is single or
Multiple big pictures, now picture size is relatively contrasting, than larger, to inconvenient with Consumer's Experience with the loading in later stage, mutual
Should first be preloaded before dynamic and required Ziyuan County is loaded out, so as to Interactive Experience, be prevented interim card etc. bad
Phenomenon (due to being in mobile terminal, go operation, overall resource size to be preferably kept in 3M-4M).
(4) movable game it is pre-loaded complete after, game action is responded accordingly according to reproduction time, and is touched
Send out time-out video playback, playback and jump to the action such as a certain frame and cyclic part scene, the operation setting for carrying out around here finds
Key frame, corresponding time are processed, and after required flow process is finished, the clear of device are timed
Remove.
Above-described embodiment is the present invention preferably embodiment, but embodiments of the present invention not by above-described embodiment
Limit, other any Spirit Essences without departing from the present invention and the change, modification, replacement made under principle, combine, simplification,
Equivalent substitute mode is should be, is included within protection scope of the present invention.
Claims (5)
1. it is a kind of based on the automatic method for playing video image on mobile web platforms, it is characterised in that to comprise the steps of：
S1, whole or a part of video is obtained, be corresponding many by video code conversion according to frame rate by video capture instrument
Pictures, arrange the parameter of video capture instrument according to actual conditions, and the parameter of the video capture instrument is used to carry out frame frequency
Size with split the selection of dimension of picture；
S2, the plurality of pictures picture synthetics for generating video piece together a big picture；The dimension of picture of synthesis is big
It is little should be as the dimension of picture size for splitting；
S3, browser get the big picture, and initialize painting canvas interface and timer；When starting loading, whole record screen is set
The total time of requirements of process, recorded in units of millisecond, key position be set, when reaching the key position, operated,
The time stopped of operation, when the time value now suspended is constant, carries out peripheral operation, after operation is completed, before obtaining simultaneously
Time value, based on this time value, is played video image again automatically；Flow operations are carried out by that analogy；
S4, according to outside command operating, according to broadcasting speed, order and original position, big picture specific region is plotted to
Play out in the painting canvas of the page；
S5, when all regions of big picture are all completed, then illustrate video finished playing, picture can be arranged and rest on finger
Fixed position, then removes timer, and whole interaction is completed.
2. according to claim 1 based on the method that video image is played automatically on mobile web platforms, it is characterised in that step
In rapid S1, the video capture instrument is preferably ffmpeg instruments.
3. according to claim 1 based on the method that video image is played automatically on mobile web platforms, it is characterised in that step
In rapid S2, the picture synthetics is Montage Guide.
4. based on the method that video image is played automatically on mobile web platforms according to claim 1 or 3, it is characterised in that
The picture synthetics can carry out following operation：
Adjustment, cutting, text, separation, application background effect, pasted objects, intelligence deletion, smart dimensions, intelligence are repaired.
5. according to claim 1 based on the method that video image is played automatically on mobile web platforms, it is characterised in that step
In rapid S4, also have during the broadcasting and suspend or continue playing function.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611158681.XA CN106534973B (en) | 2016-12-15 | 2016-12-15 | A method of video image is played automatically on web platforms based on moving |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611158681.XA CN106534973B (en) | 2016-12-15 | 2016-12-15 | A method of video image is played automatically on web platforms based on moving |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106534973A true CN106534973A (en) | 2017-03-22 |
| CN106534973B CN106534973B (en) | 2018-07-17 |
Family
ID=58339599
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201611158681.XA Active CN106534973B (en) | 2016-12-15 | 2016-12-15 | A method of video image is played automatically on web platforms based on moving |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106534973B (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120272263A1 (en) * | 2011-04-20 | 2012-10-25 | Verizon Patent And Licensing Inc. | Method and apparatus for providing an interactive application within a media stream |
| CN104469437A (en) * | 2014-12-23 | 2015-03-25 | 小米科技有限责任公司 | Advertisement pushing method and device |
| CN105657514A (en) * | 2015-11-20 | 2016-06-08 | 乐视移动智能信息技术（北京）有限公司 | Method and apparatus for playing video key information on mobile device browser |
| CN106210451A (en) * | 2016-08-02 | 2016-12-07 | 成都索贝数码科技股份有限公司 | A kind of method and system of multi-track video editing based on html5 |
| CN106210841A (en) * | 2016-07-06 | 2016-12-07 | 深圳市矽伟智科技有限公司 | A kind of audio video synchronization player method, device |
-
2016
- 2016-12-15 CN CN201611158681.XA patent/CN106534973B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120272263A1 (en) * | 2011-04-20 | 2012-10-25 | Verizon Patent And Licensing Inc. | Method and apparatus for providing an interactive application within a media stream |
| CN104469437A (en) * | 2014-12-23 | 2015-03-25 | 小米科技有限责任公司 | Advertisement pushing method and device |
| CN105657514A (en) * | 2015-11-20 | 2016-06-08 | 乐视移动智能信息技术（北京）有限公司 | Method and apparatus for playing video key information on mobile device browser |
| CN106210841A (en) * | 2016-07-06 | 2016-12-07 | 深圳市矽伟智科技有限公司 | A kind of audio video synchronization player method, device |
| CN106210451A (en) * | 2016-08-02 | 2016-12-07 | 成都索贝数码科技股份有限公司 | A kind of method and system of multi-track video editing based on html5 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106534973B (en) | 2018-07-17 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20220229536A1 (en) | Information processing apparatus display control method and program | |
| CN105340014B (en) | Touch optimization design for video editing | |
| US6449608B1 (en) | Video searching method and apparatus, video information producing method, and storage medium for storing processing program thereof | |
| US20090142030A1 (en) | Apparatus and method for photographing and editing moving image | |
| CN1107408C (en) | Apparatus and method for generating digital still image files from digital moving images | |
| JPH076565A (en) | Apparatus and method used as authering system | |
| CN103702039A (en) | Image editing apparatus and image editing method | |
| US20190364211A1 (en) | System and method for editing video contents automatically technical field | |
| CN104135611A (en) | Method and device for photographing with split-screen function | |
| EP2160892B1 (en) | Method and system for facilitating creation of content | |
| CN104796602A (en) | Method and device for combination of video files | |
| CN103458321A (en) | Method and device for loading subtitles | |
| WO2022046559A1 (en) | Presenting and editing recent content in a window during an execution of a content application | |
| US20120251081A1 (en) | Image editing device, image editing method, and program | |
| CN111970579A (en) | Video music adaptation method and system based on AI video understanding | |
| US8059167B2 (en) | Shooting apparatus and shooting method, and program | |
| CN106534973A (en) | Mobile web platform-based automatic video image playing method | |
| JP2006166407A (en) | Imaging device and its control method | |
| CN112969043B (en) | Media file generation and playing method and equipment | |
| CN113411532B (en) | Method, device, terminal and storage medium for recording content | |
| KR20080104415A (en) | System and method of editing moving picture and recording medium having the method embodied program | |
| KR102066857B1 (en) | object image tracking streaming system and method using the same | |
| US20160127807A1 (en) | Dynamically determined audiovisual content guidebook | |
| JP2009253457A (en) | Recording and reproducing device and its driving method | |
| CN104581197A (en) | Video title and end adding method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | 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 |