Open-Source Hypervideo Framework
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.
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.
“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.
A preliminary version of hotspots are implemented for YouTube embeds. See the Developer Guide.
yarn add redblueor
npm install redblue
Note that RedBlue is not yet feature-complete, so only an alpha version has been published to NPM.
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.)
<script type="module"> import RedBlueVideo from './examples/modules/redblue-video-omni.js'; customElements.define( RedBlueVideo.is, RedBlueVideo ); </script>
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.
<redblue-video> <hvml xmlns="https://hypervideo.tech/hvml#" hidden="hidden"></hvml> </redblue-video>
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.
<redblue-video id="redblue-youtube-xml" aspect-ratio="16:9" debug="debug"> <hvml xmlns="https://hypervideo.tech/hvml#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:css="https://www.w3.org/TR/CSS/" xml:lang="en-US" hidden="hidden"> <video type="personal" xml:id="ep-23"> <title>Overnight Dance Party at the Museum of Fine Arts Boston</title> <episode>23</episode> <recorded>2016-09-17</recorded> <description type="xhtml"> <div xmlns="http://www.w3.org/1999/xhtml"> <p>Full Facebook Live stream: http://hugh.today/2016-09-17/live</p> <p>#mfaNOW #mfaLateNites</p> </div> </description> <showing scope="release" type="internet" admission="private"> <venue type="site"> <entity site="https://www.youtube.com/">YouTube</entity> <uri>https://www.youtube.com/watch?v=nWdWq3hMwao</uri> <title>Overnight Dance Party at the Museum of Fine Arts Boston | Hugh’s Vlog | #mfaNOW #mfaLateNites</title> </venue> </showing> <presentation> <choice xml:id="full-stream"> <name>Go to: <code style="font-family: inherit; font-weight: bold;">hugh.today/2016-09-17/live</code> for the full stream</name> <goto on="duration" xlink:actuate="onRequest" xlink:href="http://hugh.today/2016-09-17/live" width="70%" height="13%" css:font-size="calc(384 / 150 * 1vw)" css:font-family="'Noto Sans CJK JP', 'Noto Sans CJK', 'Noto Sans', sans-serif" css:white-space="nowrap" css:overflow="hidden"> <animate starttime="517.292107" endtime="518.872131" startx="14.9%" starty="-15%" endx="15%" endy="10%"></animate> <animate starttime="523.373882" endtime="524.873404" startx="14.9%" starty="10%" endx="15%" endy="-15%"></animate> </goto> </choice> </presentation> </video> </hvml> </redblue-video>
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.
Another big way you can contribute is by supporting us on Patreon!
- Limited browser support
- Choice-based narratives not in
- Hotspot animations do not respond to pauses or timeline seeking within their trigger range