Issue

Currently, when the BoCips Player fails to load the video because of some error, it reflects on the UI but I could not find a way to catch the error on the component level where we are loading the BoClips player.

Why is it important?

It's important to have this feature:

• to track/monitor the errors.
• to show a different fallback on the UI

Proposed solutions

If we can have a callback function onError similar to onEnd which passes the error as a callback argument.

const player = PlayerFactory.get(playerContainer);
player.onError((error) => {
  monitorError(error);
});

Working towards resolving vulnerabilities. We have an outstanding one that tracks back to this package.

[email protected] requires axios@>=0.21.1 <1.0.0
No patched version available for axios

Are you locked out of 1.x because of the breaking changes or anything in specific?

Issue:

Currently player's forward button fast forward the video by 10s. If a user click forward button when < 10s are left for a video, video is paused at random point in player's progress bar and video is paused.
This is only happening only in Safari browser.

How to reproduce:

1. Play the video – 5c54a9e8d8eafeecae08dbde or any video with short duration or any video.
2. Play the video when less than 10s are left to complete the video.
3. Click on forward button.
4. Video stops at random point in progress bar, but current time is updated as 00:00

Expected behavior:

Video's progress bar should be updated correctly at video end time.

Priority

High priority - Our most of the user base use Chrome & Safari and this is happening for all videos.

OS & browser

OS: macOS Big Sur v11.3.1
Browser - Safari Version 14.1 (16611.1.21.161.6)

Issues

We have found multiple accessibility issues on player.

Issue 1

contrast between video current time text colour and background colours does not meet WCAG 2 AA contrast ratio thresholds. -- This is happening for videos with light background colour. For example: 5fb64a0cac970d61b36682bb (first screenshot)

Solution could be that we increase the gradient of controls background.

Priority - Critical

Issue 2

Setting options are not closing after the tabbing away to next video button.
Steps to reproduce:

1. Play any video on player
2. Click on tab key till you reach settings option then select either caption or speed
3. Press tab key again
4. Setting menu options is still open but it should be closed as user tab away.

This is causing more issues like if menu option is opened, enter key press is always captured by setting menu element.

Priority - Critical

Issue 3

track element should be used to show captions.
Captions are available for most of the videos but they are not shown correctly as per a11y practice. As per deque, captions should be shown using track element - https://dequeuniversity.com/rules/axe/4.3/video-caption?application=AxeChrome

Priority - Moderate

Issue 4

For video current time, aria-label is used but no role is added.

Priority - Moderate

Issue 5

Tab is not working as expected for player controls.
Steps to reproduce:

1. Tab till you reach the full screen control.
2. Press enter.
3. Press tab twice
4. Expected flow is that first centered Pause/ Play button is focused and on pressing tab next, Replay should be focused. But "Rewind" button is focused.

Priority - Critical

Hello,

I use the video longer then 20 minute, if i set frameCount = 1200(1 sec : 1 pic), the image api will crash. Image loading time will be to long if api does not crash.
But if i set frameCount = 120(10 sec : 1 pic), it may not be accurate.
If my video's time is getting longer, seekpreview accuracy is getting lower.

Have any solution to fix it?

Issue

Currently there is very limited support to send analytics event outside of Boclips. For example, a third party wants to consume this player with boclips videos, they would like to send events to their analytics system. But right now, the option to configure analytics is: https://github.com/boclips/boclips-player/blob/master/demo/static/index.html#L17. handleOnSegmentPlayback helps but this handler is only triggered on pausing the video or forwarding / seeking the video by clicking on progress bar. This function does not return how the event was triggered (By clicking on pause button or clicking on progress bar), which can cause data discrepancy.

boclips-player should support following use-cases for analytics:

1. send event on clicking play
2. send event on clicking pause
3. send event in some interval (This will be helpful when we want to store the video duration that user has already watched. So that when user visits the app again, video is resumed that point).

Why is it important?

• Play / Pause are very basic requirement from analytics point of view. It help to provide user a better experience.
• Sending event in some interval is helpful to save user's progress on a video. So that if users see the video again, they'd know that they have already watched it. If it was left in the middle, they can start from that point.