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

Audio and video precise 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: 2020-05-12
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] An accurate audio and video synchronization method based on HTML5 video dynamic frame rate playback, including the following steps:

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

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

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

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

Embodiment 2

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

[0036] S1: Convert the video stream to the corresponding image of each frame according to the frame rate of the video stream, and buffer it in the data queue in HTML5 binary data format. 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 buffering frame images, the frame image data is buffered at the playback frame rate, and the frame image data is not buffered 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 the non-key Frame, non-key frame directly uses the frame image data of the previous adjacent key frame.

[0038] S3: After each frame of image playback, the cache content is update...

Embodiment 3

[0041] The difference between this embodiment and the above embodiments 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 sequence number; that is: current moment * original frame rate of the video stream, and round the result to correspond to the buffered frame image Serial number

[0043] Step b: Take out the cached frame image data corresponding to the serial number from the step 1 and 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. The method comprises the following steps: 1, converting a video stream intoa video frame image and caching the video frame image in a binary data format of HTML5; 2, directly playing an audio stream; and 3, obtaining the current moment of the audio stream played in the step2, and converting the current moment into a current frame image serial number, taking out cached frame image data corresponding to the serial number from the step 1 for image display, and eliminatingimage jitter by using a transfer method of CSS3 contained in HTML5, thereby finally presenting accurate and synchronous audio and video. According to the method and the device, the problem that HTML5video playback in the prior art can only be performed by adopting the original frame rate and cannot be performed by adopting the dynamic frame rate is solved, so that pictures played back by the HTML5 video are more coherent, smoother and clearer.

Description

Technical field [0001] The invention relates to the related fields of HTML5 video playback, editing and recommendation, and in particular to a method for precise audio and video synchronization based on HTML5 video dynamic frame rate playback. Background technique [0002] HTML5 is the biggest leap in Web standards in the past decade. HTML5 is not only used to represent Web content, it also brings the Web into a mature application platform, on which video, audio, animation, and interaction with computers are all standardized. With the development of HTML5, various browsers have or will support HTML5. [0003] However, when the HTML5 video in the prior art wants to be played back, it can only be played back at the original frame rate, but cannot be played back at the dynamic frame rate. If you want to change the playback frame rate, you must re-create the video stream, which is time-consuming and obvious. The picture is not smooth, which affects the user experience. Summary of th...

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 Applications(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