There’s this thing called “Interactive Video” (lit.) that got implemented roughly a few years ago on Bilibili. It’s actually Choose-Your-Own-Adventure but implemented with video, really nothing new.
There’s two part to this demo: an “Editor”, and a “Standalone Component”. The main goal about this demo is actually not the Interactive Video part per se (that thing is not hard, one could finish building that in like 3 afternoons), so the actual available “interaction"s is rather limiting. I was originally planning to add stuff like SVG overlay so that one could mask part of the video screen to achieve some kind of information conveying effect but I lost steam mid-way.
I started working on this demo since the day I was told that I have to leave the company I was working for. The hard part during the process (I mean completing this project, not unemployment) is to achieve proper data synchronization between Editor, Timeline and Preview thru Observable-like stores (and coaxing HTML elements of course). There are a lot of times that some views have to be controlled by some model store and the DOM events on the views have to be sync-ed to the model store and thus creating feedback loop everywhere, ended up re-inventing read/write lock for those. The Text Editor is there because I of course would like some ways to store the “interaction” data, and the Timeline has to be there because in this particular case editing the “interaction” part in any kind of text editor will probably never be as convenient. I never enjoyed libraries like Redux (especially Redux; I hate Redux with a burning passion) and I guess Redux probably could never do this correctly (unless one implement Observables, but that AFAIK is not very Redux-y and kinda defeats the whole purpose of using Redux).
With a certain kind of spite towards a certain entity or group of entities the source code of this demo will be distributed under BSD-3-Clause. Or MIT. Or both, I actually don’t care which as long as you can obtain the full source code for free and you don’t stop other people from doing that.
I always feel like nobody ever take my words seriously when I talk about stuff like “this will do” or “this probably won’t do” or “this is good stuff” or “this will be a problem”, it’s like I was an unwanted guest showing up at the wrong parties and everyone’s like “what the hell is this dumbass doing here”, even if I was right most of the time and things bite them back almost exactly as I’ve predicted how it would be. It’s okay as long as I got the money for my work, it’s them who’s being stupid anyway…
2021.9.10
Click here for git repo.
Click here to go to the editor.
npm install # build npm run build # local dev server npm run dev
The editor is at [the-base-url]/#/Editor, and the component is at [the-base-url]/#/StandaloneComponent. You have to provide your own assets/vid.mp4.