Jake ArchibaldRE: https://mastodon.social/@FirefoxDevTools/115573428208353380
I'm experimenting with this format. Is it… good? Like, should I do more of this kind of thing? Critical feedback welcome!
A lot of you asked for burned-in subtitles. I agree, it was already on my todo list, and well, I had a long flight, so it was something to do.
I'll improve the segmenting for the next real video, but so far so good.
I used https://github.com/m-bain/whisperX for local transcription & word by word timestamps. This was much more accurate than the results directly from OpenAI.
How do you feel about the word-by-word highlighting?
I like it
I'd rather it didn't
🤷
Poll ended at .
Cheers folks! I'll go for a much more subtle version of that effect. Hopefully that'll work for most people.
Paul@jaffathecake I like it - helps convey the pace and flow of the audio to the subtitles.
Guillaume Rossolini@jaffathecake it draws my eye to the subtitles that I sometimes wish I could even turn off; I much prefer not-burned-in subtitles
Paul Robert Lloyd 🐢@jaffathecake Also, maybe position captions at the bottom of the video?
@paulrobertlloyd unfortunately that doesn't work for other platforms where I intend to publish these videos (TikTok, YouTube Shorts, LinkedIn), which put a bunch of UI at the bottom.
James Coyle@jaffathecake I'd prefer if it were more subtle. It's rather distracting as is.
@JamesCoyle yeah, I'm going to experiment with the text being eg 80% opacity, then 100% as the words are spoken
Stuart Langridge@jaffathecake I like that they are highlighted; I don't like the way you highlight them :) This is, obviously, entirely subjective, but maybe if each word got a little bigger to highlight it, or if the colour of the word changed to be brighter, it'd look better. But... I am no designer :)
@jaffathecake this is where you wish that there was a video editor in the browser so you could say, ok, the subtitle words, I'll apply a css transition to them so they can go from opacity:0.8 filter:greyscale to opacity:1.0 instantly and then fade back again over 500ms 2s later :)
@sil hope do you think I'm making these videos??
@jaffathecake really? How are you outputting a video? Are you recording the screen? Or do you have some neat way to have the browser output what it's doing *as* a video? I've wanted that for ages but I don't know how to do it. Every time I've needed to do this I've recorded the screen
@sil https://github.com/WICG/html-in-canvas in Chrome Canary
@sil I'll bring my laptop to Birmingham
Matthew@jaffathecake @sil Ooh, visiting Birmingham? *waves* :)
@jaffathecake kinel. And then render frame by frame and getDataUrl the frames into a video with wasm ffmpeg or something? Neat. Discussion over beer!
@sil straight into the video encoder api via https://mediabunny.dev/
@jaffathecake ooooooooooooooooooooo
Marius Gundersen - mdg 🌻@jaffathecake @sil I wish the browser had native encoder that could produce video files, given that it's able to send video over the wire using webRTC.
meduz'@jaffathecake I like that subtitles are near the code.
I don’t like highlighting in general: it’s distracting when you’re already trying to focus on both the code and the subtitle at the same time, and it’s worse if you watch the video with no sound.
rem@jaffathecake the problem is, the captions are above your head, which isn't where we look when trying to track mouth movement with captions.
I saw an excellent post about captions a while back, I'll see if I can find/share it. Very much about position, fonts, highlighting etc.
@jaffathecake yay, I actually bookmarked it for a change: https://meryl.net/why-captioned-videos-are-important/
@rem my problem is, in some places there's a lot of UI at the bottom of the frame, so that's unfortunately the best place for the subtitles
@jaffathecake I mean, you could move the selfie video out too when needed... (Serious suggestion)
@rem I'd definitely do that if there wasn't room for all three. The problem is the subtitles kinda need to be in the middle
Marsh Gardiner 🌱🐝@rem @jaffathecake and you posted about it! https://front-end.social/@rem/112338069800093569
… which caused me to bookmark it right after you did. https://pinboard.in/url:198515b90fe2163ca4900d83196da1ec60699c33/
… which is a reminder that for more than a decade you've been cluing me into things that make me smarter. Thanks! 🙏
rem (@rem@front-end.social)
If you product anything that includes captions (if there's sound or video, please be in this category), this post is absolutely essential reading and viewing: https://meryl.net/why-captioned-videos-are-important/ I'm so bored of social meeja "fancy" captions being actually more distracting - I get they're trying to overcome muted videos by default, but still, lose them. /via @brucelawson@vivaldi.net's reading list.
@jaffathecake Thank you - such a considerate thing to do.