Versions Compared

Version Old Version 6 New Version Current
Changes made by

Glib Glugovskiy

Glib Glugovskiy

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents
minLevel1
maxLevel6
outlinefalse
typelist
printablefalse

List of

...

artefacts

Whiteboard: https://excalidraw.com/#room=bb5ec8f1a9402a2ef3b5,QXIMmn8cmiQV9WhcTkQc-w

View file
nameVideoJS-xBlock-Open-edX-2023-11-30-2047.excalidraw

ADR #1: Introduce React based video player into video block https://github.com/openedx/edx-platform/pull/33671

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

...

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

VideoJS supports JSON translations similar to Open edX MFEs, which are using ReactINTL library.

https://videojs.com/guides/languages/

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

Background:

https://github.com/openedx/edx-platform/blob/14d2cc8f95f22e2a9f4ab59d3fe5d558af06fdfb/xmodule/js/src/sequence/display.js#L247Courses for beta testing.
http

Video Player Backend

Current installation process for video block:
Included in setup.py https://github.com/openedx/edx.org
Under feature flagVideo Bumper -> -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/bumpertranscripts_utils.py
FEATURES.get('ENABLE_VIDEO_BUMPER')

CDN

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/

...

Video Player Backend

Transcripts

cms/djangoapps/contentstore/video_utils.py or custom plugin extension to edx-platform

Transform transcripts on Client side

Status
colourRed
titleNeed 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

Video Bumper feature

Video Bumper -> https://github.com/openedx/edx-platform/blob/master/xmodule/video_block/transcriptsbumper_utils.py
Current installation process for video block:
Included in setup.py FEATURES.get('ENABLE_VIDEO_BUMPER')

Status
colourRed
titleNeed Investigation

CDN

Video xBlock should serve videos from CDN.

Current implementation:

https://github.com/openedx/edx-platform/blob/master/setup.py#L36

...

/xmodule/video_block/video_utils.py#L39C5-L39C2

Additional notes:

Courses for beta testing.
http://edx.org
Under feature flag

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

Code Block
- Current time minus periodicity must be greater that last time viewed

ENABLE_VIDEO_BUMPER

Check if bumper enabled.

Code Block
- 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

Code Block
# 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)

Code Block
    # 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

  1. Move Current VideoBlock out of the platform and extend it with Video.js based video player

  1. Create a separate FE for the existing backend in edx-platform

  1. Create a completely new video xBlock, but leave VideoBlock inside edx-platform

  1. JS Refactoring

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

  1. Python refactoring

For python only new code will be introduced in Video xBlock required for the Video.js implementation.
Most of the backend code will work as is.

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.

  1. Installation

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.

  1. Release Management

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

Proof of concept: https://github.com/raccoongang/ms-teams-html-xblock/commit/4c98b684cc4004bd5fe9c36280b956e1f6d3e8b6#diff-d671016f5ad4dbe553c9953e7c11fac30473b5473ea341a0b7622954207076feR80

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