List of artifacts
Whiteboard: https://excalidraw.com/#room=bb5ec8f1a9402a2ef3b5,QXIMmn8cmiQV9WhcTkQc-w
ADR #1: Introduce React based video player into video block https://github.com/openedx/edx-platform/pull/33671
ADR#2: Gain Feature parity using Video.js functionality TBD
NFR: New video player architecture (React-based Video Player)
Frontend for video player (React component to wrap Video.js)
Video.js FAQ
https://videojs.com/guides/faqs/#q-does-videojs-work-with-react
Video.js Options
https://videojs.com/guides/options/
Existing Implementation for Video.js in OeX codebase
Video.js Documentation: https://docs.videojs.com/
Existing video.js implementation: https://github.com/openedx/frontend-app-learner-portal-enterprise/tree/master/src/components/video
HLS support vs YouTube support https://github.com/openedx/frontend-app-learner-portal-enterprise/blob/master/src/components/video/VideoPlayer.jsx#L18C15-L18C15
YouTube: "videojs-youtube": "3.0.1"
https://www.npmjs.com/package/videojs-youtube
HLS m3u8 - application/x-mpegURL
Adding video.js to studio PR: https://github.com/openedx/frontend-lib-content-components/pull/58
Frontend concept: https://github.com/openedx/edx-platform/blob/14d2cc8f95f22e2a9f4ab59d3fe5d558af06fdfb/docs/concepts/frontend/javascript.rst#L43
Rendering of the player: https://github.com/openedx/edx-platform/blob/14d2cc8f95f22e2a9f4ab59d3fe5d558af06fdfb/xmodule/video_block/video_block.py#L246
Webpack config
https://github.com/videojs/video.js/pull/4261/files (legacy pr)
Work with translations for video player
Skins / theming:
https://videojs.com/getting-started/#skinning
https://codepen.io/heff/pen/DyoMvJ
Use design tokens?
Extensions for video.js:
Buffering issues analytics
Is not possible out of the box, the custom approach for monitoring can be done
https://github.com/videojs/video.js/issues/198#issuecomment-844558893
Courses for beta testing.
http://edx.org
Under feature flag
Video Bumper -> https://github.com/openedx/edx-platform/blob/master/xmodule/video_block/bumper_utils.py
FEATURES.get('ENABLE_VIDEO_BUMPER')
CDN
https://github.com/openedx/edx-platform/blob/master/xmodule/video_block/video_utils.py#L39C5-L39C2
Video Player Backend
Current installation process for video block:
Included in setup.py https://github.com/openedx/edx-platform/blob/master/setup.py#L36
Transcripts Processing
Goal:
Video.js uses VTT files for transcripts/text-tracking, while our transcript files are currently stored in SJSON format. Therefore, my main concern is to discuss and gain insights on how we can tackle the problem of converting SJSON files to VTT files.
Background:
Existing transcripts utils for video xBlock include conversion of sjson to srt.:
https://github.com/openedx/edx-platform/blob/master/xmodule/video_block/transcripts_utils.py
Ideas for transcripts transformation:
RG/Appsembler Video-block approach
All this conversion are happening in the Mixin class - https://github.com/raccoongang/xblock-video/blob/master/video_xblock/mixins.py#L64
Only SRT to VTT conversion is possible easily in Python.
Libs:
https://pypi.org/project/webvtt-py/
https://github.com/sandflow/ttconv
https://pypi.org/project/pywebvtt/
Existing utilities and python libraries can be taken as the base, and enhance it to use as utility library for example, so it can be used in several places in Open edX
it can be placed in https://github.com/openedx/edx-platform/blob/master/cms/djangoapps/contentstore/video_utils.py or custom plugin extension to edx-platform
Transform transcripts on Client side
NEED INVESTIGATION
UI for transcripts
Goal:
We should implement the ability to display the video transcript alongside the video, similar to our old LMS video player.
Enable right sidebar with transcripts for VideoJS player
There are plenty of videojs plugins written in vanilla JS that can be enabled
such as this for video player
https://github.com/raccoongang/xblock-video/blob/master/video_xblock/static/js/videojs/videojs-transcript.js
https://github.com/walsh9/videojs-transcript/tree/master
https://github.com/7Ds7/videojs-vjstranscribe
It was decided to investigate if any of this plugins are compatible with the latest version, and if not, fork the code and include it into xBlock implementation
Public sharing
Additional feature for sharing preview publicly, allowing users to watch video via iframe with branding applied.
Default video controls
Always enabled:
Play / Pause
Time / Duration
Speed option
Sound
Full screen
Optional:
Closed captions
Transcripts
Handouts below the video
Events support
Video block hooks:
save_user_state
Optional Features (waffles and Flags) in Old Video block
Flag | Description |
|---|---|
SHOW_BUMPER_PERIODICITY | - Current time minus periodicity must be greater that last time viewed |
ENABLE_VIDEO_BUMPER | Check if bumper enabled. - Feature flag ENABLE_VIDEO_BUMPER should be set to True - Do not show again button should not be clicked by user. - Current time minus periodicity must be greater that last time viewed - edxval_api should be presented |
AUTOPLAY_VIDEOS | |
ENABLE_AUTOADVANCE_VIDEOS | # This is the setting that controls whether the autoadvance button will be visible, not whether the # video will autoadvance or not. # For autoadvance controls to be shown, both the feature flag and the course setting must be true. # This allows to enable the feature for certain courses only. |
FALLBACK_TO_ENGLISH_TRANSCRIPTS | |
DEPRECATE_YOUTUBE (Waffle) | # check if youtube has been deprecated and hls as primary playback
# is enabled for this course
|
Features that might be considered for deprecation in old Video Block
Feature | Description | Decision |
|---|---|---|
Architecture Decisions
Comparison of introducing a new xBlock vs Refactoring existing Video Block to include several UI options.
Whiteboard: https://excalidraw.com/#room=bb5ec8f1a9402a2ef3b5,QXIMmn8cmiQV9WhcTkQc-w
High-level architecture:
Option 1:
Option 2:
Option 3:
Solution / Problem |
|
|
|
|---|---|---|---|
| JS Refactoring is required to move out it from the edx-platform | Completely new frontend development, it’s not required to work with the legacy Video Player implementation | No need for existing JS refactoring, only new functionality will be added |
| For python only new code will be introduced in Video xBlock required for the Video.js implementation. Slight deprecation activities are possible. | The further development on existing backend in edx-platform is required. | It’s required to refactor existing backend to adjust the required functionality for the Video.js based player. New code may be added on top or replace existing functions and utilities. |
| NPM installation into MFEs may be a little bit complicated Usual PIP installation of the xBlock into OeX system | NPM installation is simple, following the current approach with frontend-component-* repositories. | NPM installation into MFEs may be also complicated In addition a mechanism for switching between new xBlock and old video block should be implemented. |
| Frontend and Backend packages will use the same tag using SemVer scheme. | Only Frontend component will have a frontend versioning. | Only new Frontend and New Backend will have SemVer versioning. |
ARD Draft and sources:
Single xblock for Old and New Player with Frontend and backend stored in monorepo
Use React.js in xblock environment
https://github.com/openedx/XBlock/issues/635
Discussion: https://discuss.openedx.org/t/running-react-code-in-an-xblock/8532/2?u=glib_glugovskiy
Build mechanisms for the xBlock:
Standalone FE: Webpack → NPM (registry) → SPA installation
xBlock FE (LMS, CMS): Static collection → React Renderer
xBlock BE: Setup.py(or pyproject.toml) → PIP install → xBlock runtime
Course Waffle flags:
https://drive.google.com/file/d/1jv6LD5xriMYKOTpcsW6Wpt9cYr_oLFyu/view?usp=sharing