Cognotion HTML5 Player

overview

Cognotion employs a unique content delivery strategy by providing interactive, educational videos in a "choose your own adventure" format. We endeavored to provide Cognotion with a foundation for independence from third-party services by developing a one-to-one replacement video player solution.

client Cognotion
category education, technology
services design, development

process

  1. discovery
  2. development
  3. launch

01

discovery

Cognotion’s original system was powered by a third-party provider that supplied both the content and delivery platforms together with the interactive player, where videos were presented to end users. The external system was an ideal solution early in the roadmap and allowed for both content and viability testing, but over time it became clearer that in order to keep up with growth, avoid breaking changes in third-party business strategies, and provide the best experience to end users - Cognotion would need to establish its own technological footprint.

Our discovery orbited around a prototyping phase which we used to further understand and explore some potential bottlenecks and whether we could actually provide a solution within the parameters. The biggest questions had to do with how video content was delivered and received on tablet devices, as well as the overlap between device compatibility and the desired feature set. We wanted to come out of this phase with some recommendations for a target range of the device landscape to support Cognotion’s on-site deployment of the program to various partners.

development & QA

02

development

When approaching development of this library we were able to explore something very important -- the developer’s experience. Too many developers commiserate when we tell tales of poor documentation, inconsistent and unintuitive APIs, time vs. quality, a lack of test coverage, and neglected repositories. The true outliers are those services, libraries, and APIs that remain a delight to use, ones that developers tell colleagues about over lunch because they had so much fun and experienced productivity using them. The opportunity to put that stamp on one of Cognotion’s core libraries from the start was (and still is) an exciting prospect.

One of the most important requirements to providing the desired developer experience is continuous integration and deployment -- having these tools in place shortens our response time and, ultimately, improves the experience from stakeholder to developer. We wanted this to be an integral part of the library’s pipeline before delivery, so that Cognotion could reap the immediate benefits of automated testing and deployment. It also opened up mental space, which helped nurture creative thought and discussion around the library. We gained creative space by employing a system that allowed us to develop without worrying about how to run a deployment or update usage examples. Both CI and CD in the foundation of Cognotion’s technical IP will set an important and valuable precedent for their future codebases.

Naturally, the library was written in JavaScript, which means we were able to take advantage of a few tools on the forefront of the JavaScript frontier, like Babel for ES6 transpilation and Webpack for packaging. It’s important for Cognotion that the library can be supported and grow in the future, so why not establish a footprint in the future of JS? The runtime configuration is powered by a JSON Schema, something that eventually an HTTP API will be responsible for producing. The schema powers configuration validation and leaves doors open for automation and integration into a larger platform.

Reporting on the previous video solution was lacking, so gaining insight on how users were interacting in detailed ways was a key requirement for the new library. The player itself broadcasts noteworthy events throughout the lifecycle of a video experience. We established a basic plugin interface that allows developers to hook into those events and send the data elsewhere. A Google Analytics plugin is included with the library, and there’s plenty of room for further customization.