Initial edX Technical Discovery (React video player)
- Sarina Canelake
Last updated: November 2022
Note: the PDF version of this document may be a bit easier to read, but may be out of date with this document. Consider this wiki page to be the most up-to-date version.
The paid versions offer the same functions as the free options that I explored. The paid options do offer more services, but they are more than what is required of the video player. The paid players have the same shortcomings (captions and transcripts) that free players have.
All of the React and plain JavaScript video players require .vtt files for captions/subtitles.
exploring how current transcripts are being processed and how to adapt that now
The current subtitles appear to be a custom component which allows them be .sjson files instead of .vtt files. In my investigation .vtt is the standard file for captions/subtitles. Is there a reason that we shouldn’t migrate to using .vtt files? There is simple code/library that could convert .srt to .vtt for existing transcripts. (This can be done client-side or server-side). If we don’t migrate to .vtt files, we will need to create a custom caption component.
All options would require building an additional side piece for transcripts.
Options considered
| Option 1 | Option 2 | Option 3 | Option 4 |
Description | https://www.npmjs.com/package/video-react , based on npm: video.js | |||
Transcript Support | REFER ABOVE | REFER ABOVE | REFER ABOVE | REFER ABOVE |
Video Types | mp4, webm, ogg, mp3, HLS, DASH | mp4, webm, ogg | mp4, webm, HLS, DASH, as well as other playback techs like YouTube and Vimeo (through plugins). | all major formats |
Support YouTube | * | |||
Pros and cons | Ability to add a custom control bar, functions provided Supports lots of videos from external sites and basic file types Can be used outside of React New ability for picture-in-picture (pip) May loose the functionality to set the start and end time of video Known to have small ui issues on mobile devices (not breaking issues) | Easy to add custom components to control bar (Custom Download Button Example ) React based Similar to the current video player experience May loose the functionality to set the end time of video Functionality is untested for Android Firefox Highly customizable, but even basic functions like play button on load requires adding code. | Fits all accessibility requirements and new feature, Audio Tracks Full, explicit support form start and stop times, i.e. supports custom duration Not a React component Highly customizable, but even basic functions like play button on load requires adding code. | very nice UI, easy to customize supported on all devices i18n support for controls New ability for picture-in-picture (pip) *YouTube is not provide out of the box. It will require additional configuration with an iFrame. Not a React component moving to another development group soon May loose the functionality to set the start and end time of video |
Estimated Developer Complexity | EASY* 3-5 story points | MEDIUM* 5 story points | MEDIUM* 5 story points | MEDIUM* 5 story points |
* These estimations do not include the building of conversion and new components for captions and transcripts
** Highly suggested by Jeff Witt. This library is currently leveraged by the platform for Prospectus