Post AkerdxsHOSBFdRchhA by jaffathecake@mastodon.social
(DIR) More posts by jaffathecake@mastodon.social
(DIR) Post #AkegxVcZ39LWIwOCye by jaffathecake@mastodon.social
2024-08-05T11:29:11Z
0 likes, 0 repeats
📝 I set off to find the best way to make video with transparency work on the web.Over 10 bug reports later, it turns out it's better to handle the transparency manually with WebGL. Here's how:https://jakearchibald.com/2024/video-with-transparency/
(DIR) Post #Akej0HxEWC9ahAVhR2 by ashley@fosstodon.org
2024-08-05T11:52:05Z
0 likes, 0 repeats
@jaffathecake the web is so cool these days!
(DIR) Post #Akelpg0l2E75z1n3cO by frederik@mastodon.social
2024-08-05T12:23:49Z
0 likes, 0 repeats
@jaffathecake I’m using HEVC for Safari + VP9 webm on Chrome / Firefox / Edge – works without any issues!
(DIR) Post #AkenQA9kX9Ntr6xSMK by jaffathecake@mastodon.social
2024-08-05T12:41:22Z
0 likes, 0 repeats
@frederik did you read the article? It covers the issues with that strategy.
(DIR) Post #AkenYD8xJMFLR9QMts by davatron5000@mastodon.social
2024-08-05T12:43:04Z
0 likes, 0 repeats
@jaffathecake Nice exploration! And a web component too!
(DIR) Post #AkeomTZh7IviPEITzM by williamoconnell@mas.to
2024-08-05T12:56:47Z
0 likes, 0 repeats
@jaffathecake Amazing that Apple somehow managed to bring their famous "you have to compile your app on a computer we made" experience to the web. Nice work on the WebGL version, looks great!
(DIR) Post #AkeqUdUdhXnNraYNv6 by MerriNet@mastodon.social
2024-08-05T13:15:21Z
0 likes, 0 repeats
@jaffathecake At least with Firefox on Windows the "And here it is" example doesn't work at all or very well until you pause the video above and then retry playing.I guess that might be some sort of issue playing the same video file at the same time on the same page.
(DIR) Post #Aker4A1OkmOCsqodhA by paulrobertlloyd@mastodon.social
2024-08-05T13:21:52Z
0 likes, 0 repeats
@jaffathecake You should get jet lagged more often 😂
(DIR) Post #AkerdxsHOSBFdRchhA by jaffathecake@mastodon.social
2024-08-05T13:28:26Z
0 likes, 0 repeats
@MerriNet huh, interesting. I'll dig into that when I'm near my Windows machine. It doesn't happen on my Mac
(DIR) Post #Aketk5D7EN7M28PkeW by MerriNet@mastodon.social
2024-08-05T13:52:27Z
0 likes, 0 repeats
@jaffathecake I'll check soon on another Windows machine and I can also check how it fares on my 10 year old 4+8 core laptop running Linux Mint + Firefox.
(DIR) Post #Akf35Y81oDF7ODLU8m by MerriNet@mastodon.social
2024-08-05T14:11:36Z
0 likes, 0 repeats
@jaffathecake On the other laptops the performance is good. Although both of those have a discrete GPU while the troublesome work laptop only has an integrated Intel 630 which is also plugged to external 1440p display.And yes, I know, my work laptop isn't that high spec for a developer machine.
(DIR) Post #Akf35YuwsKNHpwEYOO by MerriNet@mastodon.social
2024-08-05T14:32:23Z
0 likes, 0 repeats
@jaffathecake Update! I looked a bit more after I noticed the Linux machine having sluggish video for a while when I got back to looking at it.The native video is much more easy on the CPU: Ryzen 4800HS sits between 25 - 33% when viewing it, but once I scroll to the web component the CPU jumps up to 42 - 52% range. It stays there until first full playback after which it goes down to around 35% range, but still remains heavier than the non-JS video.Repeatable each time coming back to the tab.
(DIR) Post #Akf35ZaQO7YFuZdg2a by MerriNet@mastodon.social
2024-08-05T14:44:12Z
0 likes, 0 repeats
@jaffathecake The Linux machine is different: it first works fine, and CPU is around 50% total use. However over time it just keeps getting worse and worse, one thread after another hitting spikes until the video slows down until it visually stops while still keeping CPU usage high.So I guess there is some sort of performance ceiling in the processing after which the visual playback simply stops due to processing not keeping up. Or at least that is what it seems like.
(DIR) Post #Akf35a0IpuFfCpkLNQ by jaffathecake@mastodon.social
2024-08-05T15:37:01Z
0 likes, 0 repeats
@MerriNet whoa, that's surprising. Fwiw I just pushed an update so it now uses WebGL2 if it's available. I don't know if that will change anything.
(DIR) Post #Akf3BmjyOWwwRg4EsK by jaffathecake@mastodon.social
2024-08-05T15:38:07Z
0 likes, 0 repeats
@MerriNet here's an isolated demo https://codepen.io/jaffathecake/pen/GRbmVNx?editors=1100
(DIR) Post #Akf5w7YnWGAiFJ3wBs by pwheeler@mastodon.social
2024-08-05T16:09:02Z
0 likes, 0 repeats
@jaffathecake omg this is such a great write up...bringing back ptsd i got trying to make a replacement gif component. the state of video makes me want to scream. look at all these lovely, modern video codecs. oh btw this one doesn't work on X, that one doesn't support hardware decode on Y, etc...did you know you have to pay a dollar if you want to view h265 in the default media player on Windows? AHHHHGG.
(DIR) Post #Akf94gn4iYDRgpWAi0 by asuh@mastodon.social
2024-08-05T16:44:12Z
0 likes, 0 repeats
@jaffathecake Interesting, an animated VP9/.webm + transparency issue in Safari is why we had to use a video element that included the bloated HEVC/.mov version for Safari and WebM for everything else. Could it be that the animated AVIF + transparency bug is similar to WebM + transparency bug? It's really great seeing validation of at least a few things we noticed coming to different results (I don't think we were ready for AVIF at the time)
(DIR) Post #AkfzQLvi9Y3wykCzXE by Joshuamcvey@qoto.org
2024-08-06T02:30:44Z
0 likes, 0 repeats
@jaffathecake Thanks for going through this and documenting each alternative. Valuable overall + a creative solution
(DIR) Post #AkhSOSQK87qsMtw4ps by krinkle@fosstodon.org
2024-08-06T19:30:02Z
0 likes, 0 repeats
@jaffathecake "This is 1.1 MB [..] via VP9, and 3.4 MB [..] via HEVC. The VP9 is double the size of the AVIF, which shows the generational gap between codecs."Wow! I wonder what playback performance is like on different devices. That's a factor in what we transcode to and serve on Wikipedia. Sometimes decoding in ogv.js.https://phabricator.wikimedia.org/T209437Currently (see format options in player control, or transcode list at bottom of page):https://commons.wikimedia.org/wiki/File:Eurasian_jay_(Garrulus_glandarius)_feeding.webm#VP9 #WebM #AV1 #webperf #mediawiki
(DIR) Post #AkhXeyDsAWWTObnz04 by jaffathecake@mastodon.social
2024-08-06T20:29:07Z
0 likes, 0 repeats
@krinkle hardware decoders for h264 are pretty common. Hardware for AV1 is in some devices too.
(DIR) Post #AkhrdJ0NvYHeM6yonQ by krinkle@fosstodon.org
2024-08-07T00:12:55Z
0 likes, 0 repeats
@jaffathecake MP4/H264 is troublesome for Wikimedia as we principally require a fully freely licensed and patent-unencumbered software stack.Safari refused for nearly two decades to (reliably) implement any free video codecs in their browser. It's gone from absent to spotty in recent years with it now depending on device age and mobile vs desktop whether it works (despite shipping the actual codecs many years ago for WebRTC, "normal" videos didn't).https://meta.wikimedia.org/wiki/Have_the_patents_for_H.264_MPEG-4_AVC_expired_yet%3F
(DIR) Post #AkiW8esCfWKbK0erB2 by nedt@mastodon.social
2024-08-07T07:46:47Z
0 likes, 0 repeats
@jaffathecake Awesome what’s possible today. 10 years ago I had to create a website with an animated element flying on top of a page with changing backgrounds. Tried a lot of tricks and in the end could only create a series on PNG as nothing else allowed the animation with transparency across the browsers back then. Also our client was spoiled by the page Apple created for the Mac Pro.
(DIR) Post #AkjGVHYm6p9fZJIRVI by frederik@mastodon.social
2024-08-07T16:26:20Z
0 likes, 0 repeats
@jaffathecake yes, saw it afterwards haha 😃