List of

...

artefacts

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/33671ADR#2: Gain Feature parity using Video.js functionality TBD

NFR: [DRAFT] New video player architecture (React-based Video Player)

Frontend for video player (React component to wrap Video.js)

...

https://videojs.com/guides/faqs/#q-does-videojs-work-with-react

Video.js Options

https://videojs.com/guides/options/

...

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?

...

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/cms/djangoapps/

...

Video Player Backend

Transcripts

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

Transform transcripts on Client side

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.pyCurrent installation process for video block:
Included in setup.py
FEATURES.get('ENABLE_VIDEO_BUMPER')

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

Default video controls

...

Optional Features (waffles and Flags) in Old Video block

...