{"id":27942564,"url":"https://github.com/redbluevideo/redblue","last_synced_at":"2025-05-07T11:57:09.980Z","repository":{"id":24088869,"uuid":"27475981","full_name":"RedBlueVideo/redblue","owner":"RedBlueVideo","description":"Open-Source Hypervideo Player","archived":false,"fork":false,"pushed_at":"2023-11-26T10:34:31.000Z","size":25340,"stargazers_count":20,"open_issues_count":6,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-07T11:57:01.604Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://redblue.video/?utm_source=profile\u0026utm_medium=github","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RedBlueVideo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2014-12-03T07:55:49.000Z","updated_at":"2025-03-26T22:29:32.000Z","dependencies_parsed_at":"2023-01-14T07:00:35.436Z","dependency_job_id":"8e6c9da8-e9d0-44ef-a5e8-d59065ea611f","html_url":"https://github.com/RedBlueVideo/redblue","commit_stats":{"total_commits":164,"total_committers":5,"mean_commits":32.8,"dds":0.04878048780487809,"last_synced_commit":"48b85926cdaa63c335b35b7df3b77a51c4db8763"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RedBlueVideo%2Fredblue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RedBlueVideo%2Fredblue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RedBlueVideo%2Fredblue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RedBlueVideo%2Fredblue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RedBlueVideo","download_url":"https://codeload.github.com/RedBlueVideo/redblue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252873986,"owners_count":21817711,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2025-05-07T11:57:08.888Z","updated_at":"2025-05-07T11:57:09.969Z","avatar_url":"https://github.com/RedBlueVideo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cbr /\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/RedBlueVideo/redblue-site/master/img/redblue-logo--no-spacing.svg?sanitize=true\" width=\"113\" alt=\"logo\" /\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003eredblue\u003c/h1\u003e\n\u003cp align=\"center\"\u003eOpen-Source Hypervideo Framework\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://travis-ci.com/RedBlueVideo/redblue\"\u003e\u003cimg src=\"https://api.travis-ci.com/RedBlueVideo/redblue.svg?branch=master\" alt=\"Build Status\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://codecov.io/gh/RedBlueVideo/redblue/\"\u003e\u003cimg src=\"https://img.shields.io/codecov/c/github/RedBlueVideo/redblue/master.svg\" alt=\"Code Coverage\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/redblue\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/redblue.svg\" alt=\"Downloads per month (NPM)\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n----\n\n\n## Stability\n⚠️ 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.\n\n## About\n\u003cdfn\u003eHypervideo\u003c/dfn\u003e: online video annotated with time-based links and other widgets.\n\nHypervideo 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.\n\nMost 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, [\u003cdfn\u003eHVML\u003c/dfn\u003e (Hypervideo Markup Language)](https://hypervideo.tech/), which aims to be the HTML of video.\n\nIn 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).\n\n## Support\n\n### “Choose Your Own Story” video experiences\nChoice-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.\n\nSo 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.\n\nGecko-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.\n\nInternet 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.\n\nThis 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.\n\n### Hotspots\nA preliminary version of hotspots are implemented for YouTube embeds. See the [Developer Guide](https://redblue.video/guide/third-party-embeds.html?utm_source=readme\u0026utm_medium=github\u0026utm_content=hotspots).\n\n## Installation\n- `yarn add redblue` or\n- `npm install redblue`\n\nNote that RedBlue is not yet feature-complete, so only an alpha version has been published to NPM.\n\n## Usage\nImport 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.)\n```html\n\u003cscript type=\"module\"\u003e\n  import RedBlueVideo from './guide/modules/redblue-video-omni.js';\n  customElements.define( RedBlueVideo.is, RedBlueVideo );\n\u003c/script\u003e\n```\n\nInclude an \u003cabbr\u003eHVML\u003c/abbr\u003e code block as a child of `\u003credblue-video\u003e`. \u003cabbr\u003eHVML\u003c/abbr\u003e can be represented as either \u003cabbr\u003eXML\u003c/abbr\u003e or \u003cabbr\u003eJSON-LD\u003c/abbr\u003e. When using the \u003cabbr\u003eXML\u003c/abbr\u003e serialization, set the boolean `hidden` attribute to true to prevent the browser from rendering the metadata.\n```xml\n\u003credblue-video\u003e\n  \u003chvml xmlns=\"https://hypervideo.tech/hvml#\" hidden=\"hidden\"\u003e\u003c/hvml\u003e\n\u003c/redblue-video\u003e\n```\n\nPopulate the \u003cabbr\u003eHVML\u003c/abbr\u003e 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\u0026utm_medium=github\u0026utm_content=usage).\n```xml\n\u003credblue-video id=\"redblue-youtube-xml\" aspect-ratio=\"16:9\" debug=\"debug\"\u003e\n  \u003chvml 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\"\u003e\n    \u003cvideo type=\"personal\" xml:id=\"ep-23\"\u003e\n      \u003ctitle\u003eOvernight Dance Party at the Museum of Fine Arts Boston\u003c/title\u003e\n      \u003cepisode\u003e23\u003c/episode\u003e\n      \u003crecorded\u003e2016-09-17\u003c/recorded\u003e\n      \u003cdescription type=\"xhtml\"\u003e\n        \u003cdiv xmlns=\"http://www.w3.org/1999/xhtml\"\u003e\n          \u003cp\u003eFull Facebook Live stream: http://hugh.today/2016-09-17/live\u003c/p\u003e\n          \u003cp\u003e#mfaNOW #mfaLateNites\u003c/p\u003e\n        \u003c/div\u003e\n      \u003c/description\u003e\n      \u003cshowing scope=\"release\" type=\"internet\" admission=\"private\"\u003e\n        \u003cvenue type=\"site\"\u003e\n          \u003centity site=\"https://www.youtube.com/\"\u003eYouTube\u003c/entity\u003e\n          \u003curi\u003ehttps://www.youtube.com/watch?v=nWdWq3hMwao\u003c/uri\u003e\n          \u003ctitle\u003eOvernight Dance Party at the Museum of Fine Arts Boston | Hugh’s Vlog | #mfaNOW #mfaLateNites\u003c/title\u003e\n        \u003c/venue\u003e\n      \u003c/showing\u003e\n      \u003cpresentation\u003e\n        \u003cchoice xml:id=\"full-stream\"\u003e\n          \u003cname\u003eGo to: \u003ccode style=\"font-family: inherit; font-weight: bold;\"\u003ehugh.today/2016-09-17/live\u003c/code\u003e for the full stream\u003c/name\u003e\n          \u003cgoto 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\"\u003e\n            \u003canimate starttime=\"517.292107\" endtime=\"518.872131\" startx=\"14.9%\" starty=\"-15%\" endx=\"15%\" endy=\"10%\"\u003e\u003c/animate\u003e\n            \u003canimate starttime=\"523.373882\" endtime=\"524.873404\" startx=\"14.9%\" starty=\"10%\" endx=\"15%\" endy=\"-15%\"\u003e\u003c/animate\u003e\n          \u003c/goto\u003e\n        \u003c/choice\u003e\n      \u003c/presentation\u003e\n    \u003c/video\u003e\n  \u003c/hvml\u003e\n\u003c/redblue-video\u003e\n```\n\n## Contributing\nAs 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).\n\n## Known Issues\n- Limited browser support\n- Choice-based narratives not in `master`\n- Hotspot animations do not respond to pauses or timeline seeking within their trigger range\n\n## Team\nRedBlue Video is a small-time operation headed by Hugh Guiney, a senior UX developer (Twitter: [@LordPancreas](https://twitter.com/LordPancreas) \u0026 [@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)).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredbluevideo%2Fredblue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fredbluevideo%2Fredblue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredbluevideo%2Fredblue/lists"}