Sometimes it is useful to have a CSS animation with a transparent background playing on top of a video. Unfortunately there is no standard mechanism to synchronise the animation with the video. Either the video will start to play and some time later the animation will start, or (more likely) vice versa. Often it doesn't matter that there is no synchronisation, but at other times it does.
This javascript code provides such a mechanism. It does the following:
This code was developed to enable CSS animations to be synchronously overlaid on top of a video clip. This used to be possible to some extent in Shotcut using the Text:HTML (Overlay HTML) filter and a javascript library provided on this website. However, the underlying WebVfx framework that Shotcut used to support this had to be abandoned after Shotcut V20.06.
A workaround solution has been found that involves exporting the video clip as a "visually lossless" video file, importing this as a "Video Source" into OBS Studio (obsproject.com) and running the Text:HTML filter as a "Browser Source" overlaying the clip. This however is where the lack of synchronisation causes problems. It is virtually impossible to get the CSS animation (Browser Source) to start at exactly the same instance in time as the video (Video Source). The solution is to include the video as an HTML <video> element inside the HTML, have the elements being animated positioned above the video with a transparent background and develop some javascript code to do the synchronisation.
To get synchronisation with the HTML/CSS:
The simple HTML file below is an example of a title (in the form of an <h1> header) that zooms-in on top of the video, then zooms-out again using CSS animation keyframes. Most of the CSS is designed to centre the title on the screen.
Video Title (animated)
First you need to download the Javascript file by clicking (right-clicking or ctrl-clicking) on the Javascript icon () in the table below.
Download | Description |
The Javascript code, called "sync_animation.js" |
Preset : H.264 High Profile
Interpolation: Hyper/Lanczos (Best)
Codec : libx264
Rate Control : Quality-based VBR
Quality : 66% (crf=17)
Output Recording:
Recording Quality: Indistinguishable Quality (Large File Size)
Recording Format : mkv
Encoder : Software (X264)
Video
Base (Canvas) Resolution: 1280x720 (Matches the Shotcut clip format)
Output (Scaled) Resolution: 1290x720 (Matches the Shotcut clip format)
Common FPS : 30 (Matches the Shotcut clip format)
N.B. The Google Chrome browser sometimes refuses to play sound unless the viewer clicks on the webpage. Google says this is to stop annoying sounds/music/speech that users don't want to hear. Unfortunately this means the javascript may not be able to start playing the video unless the user clicks on the webpage first, or unless the music is muted (see the <video> element in the example). This does not appear to be the case with Microsoft Edge, nor with the Chromium Embedded Framework (CEF) that is the browser in OBS Studio. So you can remove the "muted" attribute when running in OBS Studio.