https://github.com/redbluevideo/redblue
Open-Source Hypervideo Player
https://github.com/redbluevideo/redblue
films hvml interactive interactive-courseware interactive-fiction interactive-plots interactive-storytelling javascript media-player mediaplayer mediasource movies nonlinear redblue video video-game video-player videos
Last synced: 13 days ago
JSON representation
Open-Source Hypervideo Player
- Host: GitHub
- URL: https://github.com/redbluevideo/redblue
- Owner: RedBlueVideo
- License: agpl-3.0
- Created: 2014-12-03T07:55:49.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-11-26T10:34:31.000Z (over 1 year ago)
- Last Synced: 2025-05-07T11:57:01.604Z (13 days ago)
- Topics: films, hvml, interactive, interactive-courseware, interactive-fiction, interactive-plots, interactive-storytelling, javascript, media-player, mediaplayer, mediasource, movies, nonlinear, redblue, video, video-game, video-player, videos
- Language: TypeScript
- Homepage: https://redblue.video/?utm_source=profile&utm_medium=github
- Size: 24.2 MB
- Stars: 20
- Watchers: 3
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
redblue
Open-Source Hypervideo Framework
----
## Stability
⚠️ The `master` branch currently represents an alpha pre-release. Features and syntax are subject to change at any time, so please don’t use it in production. Unless you’re some kind of daredevil.
## About
Hypervideo: online video annotated with time-based links and other widgets.
Hypervideo opens up a world of immersive storytelling, such as choose-your-own-story films, which boast high audience engagement, and video hotspots which trigger an action, such as jumping to a chapter marker, learning more about a topic, or buying a product/service.
Most hypervideo offerings are proprietary, requiring recurring payments and vendor lock-in to use. This hinders cash-strapped visual artists, and silos metadata that could be useful in search and beyond. RedBlue enables more people to produce hypervideo by democratizing the technology behind it. We author an open specification, [HVML (Hypervideo Markup Language)](https://hypervideo.tech/), which aims to be the HTML of video.
In conjunction, we develop this, the RedBlue JavaScript player, which brings the immersive features of HVML to any website—conveniently implemented as a [Web Component](https://www.webcomponents.org/introduction) (i.e. Custom Element).
## Support
### “Choose Your Own Story” video experiences
Choice-based narratives are implemented using the developing HTML5 [Media Source Extensions API](http://w3c.github.io/media-source/), which means all current implementations are experimental.
So far, it has the best support in Blink-based browsers such as Google Chrome, which is being used as the reference implementation for this project.
Gecko-based browsers such as Mozilla Firefox have limited support (behind an `about:config` flag), but work is being done to [catch up](https://bugzilla.mozilla.org/show_bug.cgi?id=778617) to Blink.
Internet Explorer introduces support in version 11 on Windows 8, but for MP4 videos only, which are of secondary concern to WebM in this project and not currently supported.
This is not yet integrated into the Custom Element, but a [prototype](https://redbluevideo.github.io/redblue/www/) demoing this functionality is available for Chrome Desktop.
### Hotspots
A preliminary version of hotspots are implemented for YouTube embeds. See the [Developer Guide](https://redblue.video/guide/third-party-embeds.html?utm_source=readme&utm_medium=github&utm_content=hotspots).
## Installation
- `yarn add redblue` or
- `npm install redblue`
Note that RedBlue is not yet feature-complete, so only an alpha version has been published to NPM.
## Usage
Import the RedBlue video player Custom Element. (This requires ES6 support to work directly in the browser; otherwise the source code can be transpiled to ES5.)
```html
import RedBlueVideo from './guide/modules/redblue-video-omni.js';
customElements.define( RedBlueVideo.is, RedBlueVideo );
```
Include an HVML code block as a child of ``. HVML can be represented as either XML or JSON-LD. When using the XML serialization, set the boolean `hidden` attribute to true to prevent the browser from rendering the metadata.
```xml
```
Populate the HVML data. RedBlue will render the appropriate video embed code and user interface. For an explanation of what this code does, see the [Developer Guide](https://redblue.video/guide/third-party-embeds.html?utm_source=readme&utm_medium=github&utm_content=usage).
```xml
Overnight Dance Party at the Museum of Fine Arts Boston
23
2016-09-17
Full Facebook Live stream: http://hugh.today/2016-09-17/live
#mfaNOW #mfaLateNites
YouTube
https://www.youtube.com/watch?v=nWdWq3hMwao
Overnight Dance Party at the Museum of Fine Arts Boston | Hugh’s Vlog | #mfaNOW #mfaLateNites
Go to: hugh.today/2016-09-17/live for the full stream
```
## Contributing
As this is alpha software, we are not currently accepting Pull Requests, but you are welcome to test it out and offer feedback by posting it to Issues, or by tweeting [@RedBlueVideo](https://twitter.com/RedBlueVideo).
## Known Issues
- Limited browser support
- Choice-based narratives not in `master`
- Hotspot animations do not respond to pauses or timeline seeking within their trigger range
## Team
RedBlue Video is a small-time operation headed by Hugh Guiney, a senior UX developer (Twitter: [@LordPancreas](https://twitter.com/LordPancreas) & [@HughxDev](https://twitter.com/HughxDev), GitHub: [@HughxDev](https://github.com/HughxDev)), with help from his brother Austin, a CS undergrad (Twitter: [@SenorKoffey](https://twitter.com/SenorKoffey), GitHub: [@pyreking](https://github.com/pyreking)).