Add ogv.js player - Githubissues

LoliOnTop commented 11 months ago

Hi! There's a dumb company out there that makes portable computers that can't play Theora/VP8/VP9/etc. It can not be enabled or installed, even if you paid the full cost of the computer! Of course, you should not buy a computer like that, that would be stupid but, unfortunately, I have a computer like that already! I promise I will not buy another computer with such a silly limitation, I made a mistake.

But we should try to save dumb computers from landfills. It is a shame for a computer to get thrown away for this. It is the company that is trash, not the computer!

Therefore, I have attempted to integrate the ogv.js player into Hybooru, to allow me to view very important videos even on my dumbest computers. I have tested and found even very large video can play quite well on the dumb computer using ogv.js. Who knew?

The PR adds:

Small diversion in File.tsx to decide to load ogv.js player in stead of video tag. Dumb computer detection is accomplished using HTML Video canPlayType function.
Integration of ogv.js library code using symlink to node_modules, just like Ruffle integration.
Simple ogv player component. Ogv.js do not come with player chrome so I only added simple play/pause/fullscreen.

I think we could add full player chrome but video.js seems bloated so I decided it would probably be better if we make it by hand. But, getting WebM video to play first seems better to start.

Maybe it would also be a good idea to add ability to set Ogv.js preference, "Always", "Auto-detect", "Never"?

Let me know what you think!

LoliOnTop commented 11 months ago

Not sure if you are either busy, or if you have no intent to merge a feature like this. If you do not want to have a feature like this, please feel free to close the issue, and I can just maintain a fork instead.

In the mean time, for the kind of peoples who download and execute unsigned binary packages from sketchy people with funny names, I have build with the ogv branch for my own personal usage.

https://github.com/LoliOnTop/Hybooru/pkgs/container/hybooru

I guess not many people are going to use fruit devices with Hybooru client, but ogv.js may be interesting again now that browsers are also removing Theora support.

https://winaero.com/chrome-and-firefox-may-soon-drop-theora-codec-support/

Modern Fruit devices can play VP8 WebMs at over 1080P 30FPS using ogv.js, so old Theora files should run very well on even modest computers using WebAssembly software decoding. Ugly as it may be...

Anyway, I hope this finds you well. I do not mean to bother.

funmaker commented 8 months ago

I am not sure about adding that just to fix some issue on Apple computers specifically. If this can be fixed with some JS, can't you just install some browser extension that will do it for you on all the websites? Or make a tampermonkey/greasemonkey script?

Either way, I rather not bloat the website with this. However if you can find a way to make it work with simple JS script that could be added to the website, I could add a config option to specify external scripts that would get added in HTML <head> section or something like that.

LoliOnTop commented 8 months ago

I understand. I will try to look into less obtrusive ways to do this thing. However, I would like to at least offer some thoughts on why I chose this approach:

I agree regarding bloat. I tried really hard to make the minimum impact on browsers other than Safari. The OgvPlayer component is only used when browsers can not play WebM, and like Ruffle, ogv.js code is only ever loaded lazily when a WebM file is actually loaded in a browser that does not support WebM. I realize this still requires some obtrusive code in the regular path of the program code and thus this is probably still not acceptable...
Unfortunately. I have not managed to make ogv.js work as a polyfill. I think there is no efficient way to do this. ogv.js by default will instead impersonate a <video> tag and provide a similar API, but it is not identical and internally it uses a <canvas>. If there is a way to do this I would love to do it. But the best solutions I can come up with are completely stupid and impractical.
I also understand not wanting to add code to specifically support Apple products, which are intentionally broken, and I will not try to convince anyone that this should be done. However, now other browsers are removing support for Ogg Theora, so there is a theoretical use case for Ogv.js outside of Apple's browsers now. I do not think this will be a terribly persuasive argument, because I do not think anyone cares about Ogg Theora anymore... but it's worth a shot :)

Anyway, I am sorry that my solution does not meet your expectations. For now, I will just maintain my soft-fork until I can come up with a better approach. Thanks for the consideration.

edit: actually hmm I suppose I can just DOM-replace the <video> player wholesale rather than try to jam ogv functionality into it somehow... i guess maybe i have been overthinking it a bit...

funmaker commented 8 months ago

There probably is some solution to that, that would work for any website. Quick search gave me few suggestions, but I don't know how reliable they are. But as long as you can write a browser plugin yourself that can access DOM, all you need is just document.querySelectorAll to find all <video> and MutationObserver to detect any new videos added dynamically. Then, just do whatever Ogv.js setup requires and you should be good to go.

funmaker / Hybooru

Add ogv.js player #37