Looking for breakthrough ideas for innovation challenges? Try Patsnap Eureka!

A precise audio and video synchronization method based on html5 video dynamic frame rate playback

A dynamic frame, audio and video technology, applied in the field of editing and recommendation, HTML5 video playback, can solve problems such as inability to playback, achieve the effect of coherent picture and solve image jitter

Active Publication Date: 2021-04-06
CHENGDU HAND SIGHT INFORMATION TECH CO LTD
View PDF9 Cites 0 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

[0004] The object of the present invention is to provide a method for precise synchronization of audio and video based on HTML5 video dynamic frame rate playback, which solves the problem that HTML5 video playback can only be played back at the original frame rate in the prior art, but cannot be played back at the dynamic frame rate problems, making HTML5 video playback images more coherent, smoother, and clearer

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Examples

Experimental program
Comparison scheme
Effect test

Embodiment 1

[0029] A method for accurately synchronizing audio and video based on HTML5 video dynamic frame rate playback, comprising the following steps:

[0030] Step 1: Convert the video stream to a video frame image and cache it in the binary data format of HTML5;

[0031] Step 2: Play the audio stream directly;

[0032] Step 3: Obtain the current moment of the audio stream played in the step 2, and convert it into the current frame image serial number; take out the cached frame image data corresponding to the serial number from the step 1 for image display, and use HTML5 included CSS3's transition method eliminates image jitter, and finally presents audio and video that are precisely synchronized.

[0033] Wherein, the corresponding cached frame image calculated in the step 3 can always be correctly acquired in view of the step 1.

Embodiment 2

[0035] The difference between this embodiment and Embodiment 1 is that in the step 1, the specific method of converting the video stream into a video frame image and caching is as follows:

[0036] S1: According to the frame rate of the video stream, the video stream is converted into a corresponding image of each frame, and cached in the data queue in the binary data format of HTML5. The queue length is 1 to 2 seconds of image data, namely: the original frame rate of the video stream *Cache duration;

[0037] S2: When caching frame images, cache frame image data at the playback frame rate, not at the original frame rate; the frame image data corresponding to the playback frame rate becomes the key frame, and the frame image data corresponding to the non-playback frame rate becomes non-key Frames, non-key frames directly use the frame image data of the previous adjacent and nearest key frames.

[0038] S3: After each frame image is played back, the cache content is updated im...

Embodiment 3

[0041] The difference between this embodiment and the above embodiment is that the specific steps of step 3 are:

[0042] Step a: Obtain the current moment of the audio stream played in step 2, and convert it to the current frame image number; that is: current moment * original frame rate of the video stream, and round up the result to correspond to the cached frame image serial number;

[0043] Step b: Take out the cached frame image data corresponding to the serial number from the step 1, use the createObjectURL method to display the image, and use the CSS3 transition method included in HTML5 to eliminate image jitter.

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

PUM

No PUM Login to View More

Abstract

The invention discloses an audio and video precise synchronization method based on HTML5 video dynamic frame rate playback, comprising the following steps: Step 1: converting video streams into video frame images and buffering them in HTML5 binary data format; Step 2: directly playing Audio stream; step 3: obtain the current moment of the audio stream played in the step 2, and convert it into the current frame image serial number; take out the cached frame image data corresponding to the serial number from the step 1 for image display, and use The transition method of CSS3 included in HTML5 eliminates image shaking, and finally presents audio and video that are precisely synchronized. The invention solves the problem in the prior art that HTML5 video playback can only be played back at the original frame rate, but cannot be played back at a dynamic frame rate, and makes the HTML5 video playback picture more coherent, smoother and clearer.

Description

technical field [0001] The invention relates to the related fields of HTML5 video playback, editing and recommendation, in particular to an accurate audio and video synchronization method based on dynamic frame rate playback of HTML5 video. Background technique [0002] HTML5 is the biggest leap forward in web standards in the last decade. HTML5 is not just used to represent web content, it also brings the web into a full-fledged application platform, where video, audio, animation, and interaction with computers are all standardized. With the development of HTML5, all browsers have or will soon support HTML5. [0003] However, when the HTML5 video in the prior art wants to be played back, the original frame rate can only be used for playback, and the dynamic frame rate cannot be played back. If you want to change the playback frame rate, you must recreate the video stream, which is time-consuming and obvious. The picture is not smooth, which affects the user experience. ...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

Application Information

Patent Timeline
no application Login to View More
Patent Type & Authority Patents(China)
IPC IPC(8): H04N21/43H04N21/44H04N21/433H04N21/4402H04N21/4782H04N21/81
CPCH04N21/4307H04N21/4331H04N21/44004H04N21/4402H04N21/4782H04N21/8173
Inventor 蔡毅
Owner CHENGDU HAND SIGHT INFORMATION TECH CO LTD
Who we serve
  • R&D Engineer
  • R&D Manager
  • IP Professional
Why Patsnap Eureka
  • Industry Leading Data Capabilities
  • Powerful AI technology
  • Patent DNA Extraction
Social media
Patsnap Eureka Blog
Learn More
PatSnap group products

Browse by: Latest US Patents, China's latest patents, Technical Efficacy Thesaurus, Application Domain, Technology Topic, Popular Technical Reports.

© 2024 PatSnap. All rights reserved.Legal|Privacy policy|Modern Slavery Act Transparency Statement|Sitemap|About US| Contact US: help@patsnap.com