Got it! In OBS I had to go to file>settings>advanced>sources (scrolled down for this)…
then I unchecked “Enable Browser Source Hardware Acceleration”.
Ta da! Maybe you could put that in the documentation? Best wishes, J
EDIT: 10 minutes later: Here’s my first exported video after recording the browser source in OBS as a .mkv file, then importing into SC, chopping off a little of the beginning and end, and exporting as an mp4. I notice the scroll-bars are showing (which I could either get rid of by applying a touch of scale in SC or adjusting Chrome’s zoom. I’ve left the countdown at the beginning to show what it looks like. This is really cool, @elusien. Very clever!
I’ve looked at your HTML and there are a couple of improvements you could make. An important one is that you are animating motion using changes to the “left” and “top” CSS properties. This is inefficient as it uses the CPU and also causes a “repaint”, which means repaintingat every element on the page, not just the one being animated… You should be animating using the “transform: translate()” property, which the browser does using the GPU and doesn’t cause a repaint.
By judicious use of classes, CSS selectors and CSS variables (custom properties and their functions “var” and “calc”) you can cut down a lot on the amount of CSS you have. e.g.
e.g.
#line05_word02 { background:blue# ; margin-left: 7.2ch; width: 800px; } /* for */
#line05_word03 { background:red# ; margin-left: 10.5ch; width: 800px; } /*music */
/* Below: ANIMATIONS.*/
/*~~~~~~~~~~~~~~~~~~~~~~*/
#yellow_box {animation: slide1 6s ease 0.05s 1 normal forwards;}
#line01_word01 {animation: zoom1 6s ease 0.0s 1 normal forwards;} /*a*/
#line01_word02 {animation: zoom1 6s linear 0.1s 1 normal forwards;} /*v*/
#line01_word03 {animation: zoom1 6s linear 0.2s 1 normal forwards;} /*w*/
#line02_word01 {animation: zoom1 6s linear 0.3s 1 normal forwards;} /*o*/
#line02_word02 {animation: zoom1 6s linear 0.4s 1 normal forwards;} /*a*/
#line02_word03 {animation: zoom1 6s linear 0.5s 1 normal forwards;} /*a*/
#line02_word04 {animation: zoom1 6s linear 0.6s 1 normal forwards;} /*p*/
#line03_word01 {animation: zoom1 6s linear 0.7s 1 normal forwards;} /*t*/
#line03_word02 {animation: zoom1 6s linear 0.8s 1 normal forwards;} /*h*/
#line03_word03 {animation: zoom1 6s linear 0.9s 1 normal forwards;} /*i*/
#line04_word01 {animation: zoom1 6s linear 1s 1 normal forwards;} /*c*/
#line04_word02 {animation: zoom1 6s linear 1.1s 1 normal forwards;} /*t*/
#line04_word03 {animation: zoom1 6s linear 1.2s 1 normal forwards;} /*f*/
#line04_word04 {animation: zoom1 6s linear 1.3s 1 normal forwards;} /*h*/
#line05_word01 {animation: zoom1 6s linear 1.4s 1 normal forwards;} /*p*/
#line05_word02 {animation: zoom1 6s linear 1.5s 1 normal forwards;} /*f*/
#line05_word03 {animation: zoom1 6s linear 1.6s 1 normal forwards;} /*m*/
Ingenious! I have dabbled with var and calc before but never thought of using it in this context. Thanks again. Just a thought though, would it make a big difference in speed to the browser if the css was set out the long way compared to the abbreviated form ?
I’ve downloaded your video and tried several time but I can’t reproduce the stutter in the audio, neither when playing nor after recording. I have an SSD rather than a disk. I’ve found sometimes it’s best to run through the animation at least once before recording it. If it is a short sequence it should still be cached in memory and shouldn’t need to be reloaded from disk (if this is the problem),
My example works both with and without doing this. I did read that you need to do this if you interact with the webpage. So I will mention it on the webpage.
I have added one line of code to the sync_animations.js file on the webpage to unmute the audio (video.muted=false;), just in case the muted attribute is left on the <video> element in OBS.
Good idea, thanks for looking into it. I will try that next time.
On my system, I got just a black screen without unchecking Enable Browser Source Hardware Acceleration". I Googled “OBS browser source not working” and it led me to a forum where this was suggested. It worked for me. Thanks @elusien for your replies. I’m just working on a new design of a colour overlay transition which I’m posting on this forum soon, but will test more with the OBS thing asap.
