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

https://github.com/openedx/edx-platform/blob/14d2cc8f95f22e2a9f4ab59d3fe5d558af06fdfb/xmodule/js/src/sequence/display.js#L247

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

Transcripts

https://github.com/openedx/edx-platform/blob/master/xmodule/video_block/transcripts_utils.py

Current installation process for video block:
Included in setup.py https://github.com/openedx/edx-platform/blob/master/setup.py#L36

Public sharing?

Video block hooks:

save_user_state

Default video controls

Optional Features around Video block

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

- 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

# 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.

    # check if youtube has been deprecated and hls as primary playback
    # is enabled for this course