- Logic is almost entirely specified in JSON so it could be easy to make another one
- I couldn't get it working on mobile as the `playsinline` attribute was being ignored, rather than just pushing a broken thing on people I decided to squash it altogether, I've very quickly thrown together a version without the block here on a `mobile` branch if anyone wants to investigate https://5e8f0bd4606eb6000765706a--dvd-rom.netlify.com/root
- I'm clearly not very good at ripping menus from DVDs!
- I couldn't figure out at all how to get the video menu hover images from the DVD, they're definitely stored in there somehow though
- Have it muted on launch cos I figure otherwise would both drive people nuts and would stumble into some video playing restrictions
- It seems to bug out a bit when swapping video files (as can be seen in some of the special features entries)
- reach/router was used to handle transitions between pages and routing
Hey, it really wasn't that complicated! Tbh the stubborn choice to stick with youtube as the host source was by far the hardest part as it limited what I could do hugely (e.g. you can't pause youtube videos without an annoying popover...)but it means someone could just use youtube, a few image assets and update the JSON files to do another dvd menu.
If you were using MP4s directly it'd be so much easier...
-------
What I knew:
1. DVD's break the video into these .VOB files within the VIDEO_TS directory
2. the menus, their transitions and their static content seem to be in the VIDEO_TS.VOB file. In the case of Shrek this was a 26 minute video which contained the menus in three different languages
3. the data relating to the menu is contained within a corresponding .IFO (or maybe .BUP, I forget) file which were overall very basic from what I could see
4. Ultimately most DVDs could be easily charted into a flow chart of menus, transitions(videos that cant be skipped) and videos. So a JSON file that defines an overlay for a video wrapper and controls its actions could largely mimic the process.
5. I never actually investigated how subtitles and audio are handled but I assume it's not too complex
-------
What I done:
- Converted VIDEO_TS.VOB to mp4 with ffmpeg: this could be done way better I'm sure. I know nothing about VOB but ffmpeg was definitely (but inconsistently) picking up the endpoints of videos within the container so I had to do a stream record
- The tools I could find for reading the .IFO data file were very very old and for windows, struggled on my computer via Wine, I think theoretically you could generate most the data straight from these files but it was faster to just do it manually, I mocked up what the highlight icons look like (the ones for scene select were way too hard though)
- I couldn't find a way to even view the styles for highlights over selected buttons so I just took the two most generic ones and used them where I could
- Included the functionality of audio/subtitles via local storage, I assume this could easily be relayed into the video component if needed too
- Tried to keep the Shrek specifics separate from the JS but ultimately cut a few corners, should be easy to fix
-------
As far as motive, I was always just a bit curious as to how some menus worked. Discovering they're all just always playing a video file in the background was one of those "oh... I guess that was really obvious actually, why was I assuming something more complex??" moments.
I feel like someone who knows more about how DVDs work would be better equipped to do so. It was really weird having to look up this stuff though, reading dead forums from 2003 explaining how to do all this stuff to edit menu's within DVDs with obviously smart people who really clearly knew a lot about a thing where there's absolutely no value in knowing how it works anymore, they've probably forgotten themselves...
Then discovering the tech they were using at the time is still the exact same tech (right down the versions in some cases) you've to use to try and read these files.
If I could stabilise it a bit more I'd like to make a little gallery of DVD menus. The hardest part is the tedious recording of timestamps at that stage. That and maybe a talk on the value of doing deliberately worthless side projects...
6 comments
[ 2.9 ms ] story [ 25.5 ms ] thread- Logic is almost entirely specified in JSON so it could be easy to make another one
- I couldn't get it working on mobile as the `playsinline` attribute was being ignored, rather than just pushing a broken thing on people I decided to squash it altogether, I've very quickly thrown together a version without the block here on a `mobile` branch if anyone wants to investigate https://5e8f0bd4606eb6000765706a--dvd-rom.netlify.com/root
- I'm clearly not very good at ripping menus from DVDs!
- I couldn't figure out at all how to get the video menu hover images from the DVD, they're definitely stored in there somehow though
- Have it muted on launch cos I figure otherwise would both drive people nuts and would stumble into some video playing restrictions
- It seems to bug out a bit when swapping video files (as can be seen in some of the special features entries)
- reach/router was used to handle transitions between pages and routing
Actual menu footage: https://www.youtube.com/watch?v=GBi5cJ64Nf8
-------
What I knew:
1. DVD's break the video into these .VOB files within the VIDEO_TS directory
2. the menus, their transitions and their static content seem to be in the VIDEO_TS.VOB file. In the case of Shrek this was a 26 minute video which contained the menus in three different languages
3. the data relating to the menu is contained within a corresponding .IFO (or maybe .BUP, I forget) file which were overall very basic from what I could see
4. Ultimately most DVDs could be easily charted into a flow chart of menus, transitions(videos that cant be skipped) and videos. So a JSON file that defines an overlay for a video wrapper and controls its actions could largely mimic the process.
5. I never actually investigated how subtitles and audio are handled but I assume it's not too complex
-------
What I done:
- Converted VIDEO_TS.VOB to mp4 with ffmpeg: this could be done way better I'm sure. I know nothing about VOB but ffmpeg was definitely (but inconsistently) picking up the endpoints of videos within the container so I had to do a stream record
- The tools I could find for reading the .IFO data file were very very old and for windows, struggled on my computer via Wine, I think theoretically you could generate most the data straight from these files but it was faster to just do it manually, I mocked up what the highlight icons look like (the ones for scene select were way too hard though)
- I couldn't find a way to even view the styles for highlights over selected buttons so I just took the two most generic ones and used them where I could
- Included the functionality of audio/subtitles via local storage, I assume this could easily be relayed into the video component if needed too
- Tried to keep the Shrek specifics separate from the JS but ultimately cut a few corners, should be easy to fix
-------
As far as motive, I was always just a bit curious as to how some menus worked. Discovering they're all just always playing a video file in the background was one of those "oh... I guess that was really obvious actually, why was I assuming something more complex??" moments.
If I could stabilise it a bit more I'd like to make a little gallery of DVD menus. The hardest part is the tedious recording of timestamps at that stage. That and maybe a talk on the value of doing deliberately worthless side projects...