Is there any web-media player or service that allows you to create interactive videos?
I remember way back in the day when YouTube was still in a Flash Player, you had the ability to dynamically overlay link buttons and clickable areas over videos at specific times/area and it was a lesser used but nice feature. There were a couple of videos that used it to sneak links to unlisted bonus content but it mostly helped when something was highlighted and clicking it would take you to relevant info. Think you could also use it for spesific playback controls.
I'm scoping out a small project and think it'd be cool to have a video with simmilar basic interactions and even fire off some scripts at different parts of the playback.
Since Flash died, I can't think of any web player that let's you create this sort of dynamic overlay/interface or implement logic to the media playback. I know Adobe Encore can be used to make this sort of stuff for DVD menus and I used to make training videos with old software that did similar things. But I don't believe those files are easily web compatible without Flash.
I'm sure a front-end wizard can layer a transparrent canvas and player and script their way to the same functionality and more. Or maybe use a web game engine and build a UI over video playback. But I'm curious if there's any service or library that does it already and saves me from another abandoned side-quest.
Unless I missed something obvisous, the only similiar functionality I've found in the common player libraries are overlaying adverts at set points in the display and you just set the scale and frequency.
I once went in a whole interactive storytelling wormhole in which I discovered tons of tools. It’s a really rich world with a lot of (often open source) tools. Maybe there is something in that world that can help you out.
One tool I remember is https://twinery.org/
Maybe that’s a good starting point.
Good luck!
Thanks.
Looks like a nice tool to plot out the text content of the site since wed like for it to appear in reaction to what video is played and there isn't a strict order.
Also started checking in ARG and Unfiction communities because they really get up to interesting things.
Curious if you found any interesting stories or games during your search?
Don’t remember any specific ones at the moment, but I liked browsing itch to immerse myself in that crazy creative world. They even have a ‘top games built with twine’ section on their website: https://itch.io/games/made-with-twine
Enjoy!
There are a few libraries around that can do this. H5p or something like video.js with plugins.
Having said that, I do want to comment on this bit.
I am by no means a front end wizard. But, it is all html and css these days and you can just arrange elements (including videos) however you like. All you really need to do is a tiny bit of javascript that based on time frames shows or hides it.
What I am trying to get at, is that depending on your use case it might actually not be all that difficult to do. It certainly isn't drag and drop, but it also isn't advanced front end magic either with modern html, css and a bit of javascript.
If you want multiple choice questions, info bubbles, clicking certain areas, and simple branching/skipping and stuff, I can second H5P. I use it to make teaching videos/tutorials, using Lumi as an offline editor.
Thanks for the suggestion. Whipped up a prototype in H5P and managed to meet some of the project requirements. Namely branching off to different videos, dynamic text based on choices and writing results to a cookie.
Unfortunately people don't particularly like the look and feel of the player and interface. And some videos came out a little choppy, even off localhost. And we're leaning more to Godot to since it'll be a bit better in terms of custom interfaces. Will probably come back to it if I ever need to make enablement material again though. Pretty easy to set up a workflow and it'd be nice to embed this content in a wiki or quickstart document.
In terms of development, anyone that touches front end stuff is a wizard in my eyes.
But I have been drafting a way to set the timings and commands in a companion csv file for each video and the canvas will listen for timstamp triggers to draw accordingly. If there isnt an out-of-box solution, ideal case is for editors to add the values in a spreadsheet and upload the vid and file to a test environment for review.
I'll throw out a bit of a left-field suggestion: Godot (the game engine) has WebAssembly as a compile target, meaning you can take advantage of their engine features to plop a VideoStreamPlayer into a 2D scene, and put some Buttons onto an overlaying CanvasLayer. As a bonus, you can control the timing and position of the Button nodes through animations by tying their values to an Animation player and/or Timer as appropriate.
Then, the rendered WASM can be loaded using little more than HTML5 and WebGL on the user's end.
There's some inconsistencies with things like Audio streams when comparing web vs native builds, more detail in the Godot docs: https://docs.godotengine.org/en/stable/tutorials/export/exporting_for_web.html#doc-exporting-for-web
Thanks for the suggestion. We're exploring 2 Godot options. Most likely we embed the videos in a Godot game and make it a dynamic player with all the features we need.
Managed to make a chapter select in a video that loops through a few seconds at the end of the playback and the overlay buttons jump you to the right timestamp.
But we also found a few libraries that allows an HTML webview in Godot and maybe we can make something interesting with that.