README.md

redblue

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), 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 (i.e. Custom Element).

Support

“Choose Your Own Story” video experiences

Choice-based narratives are implemented using the developing HTML5 Media Source Extensions API, 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 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 demoing this functionality is available for Chrome Desktop.

Hotspots

A preliminary version of hotspots are implemented for YouTube embeds. See the Developer Guide.

Installation

npm install redblue

yarn add redblue

Since RedBlue is not yet feature-complete, only a placeholder version 0.0.0 has been published to NPM. In the meantime, you can just clone the Git repository.

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.)

Include an HVML code block as a child of <redblue-video>. 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.