HLS3 playback artefacts, non-native Safari & Edge, playback started mid-segment

[daliwell]

Description

Our service requires that we use non-native playback (i.e. MSE tech):

videojs.options.hls.overrideNative = true;

... in order to pass some authentication values to a proxy to obtain our video:

videojs.Hls.xhr.beforeRequest = function (opt) {};

Our video seems to be encoded correctly at 5 different renditions and each 10s segment starts with a keyframe. However, we get video artefacts until the playback head crosses to the next segment, if the user has initiated playback somewhere during a segment (see "Error output" below for video of the issue).

Sources

These are samples of the content on S3 (CORS enabled): http://temp-hls3.s3-eu-west-1.amazonaws.com/list.html

To see the problem in our player, use this link. This video is free to view, but uses the same proxy. You will need to create a free account to view the video. https://aak2.app.link/nqadfenrMJ

Steps to reproduce

1. Scrub the playback head to a random position in the video or click a chapter
2. Video will start playback with artefacts, until a new segment is hit (unless the start of playback coincides with the start of a segment).

Results

Expected

Playback starts without artefacts.

Error output

Playback starts with artefacts. Artefacts don't appear to clear until the next segment is reached.

The problem seems to be restricted to Safari (Mac) and Edge (Windows). Chrome and Firefox are fine. This is how the artefacts look on Safari (they look the same on Edge): Video showing the problem (chpt 5 no artefacts. chpt 6 always artefacts): https://s3-eu-west-1.amazonaws.com/temp-hls3/problem.mov

Additional Information

This reported bug in Edge might explain the problem in Edge: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14600417/

But we are also seeing the exact same problem in all versions of Safari tested (including 11.0.3)

videojs-contrib-hls version

videojs-contrib-hls 5.12.2 (and also all previous versions tested)

videojs version

video.js 6.4.0 (and also all previous versions tested)

Browsers / Platforms

• Safari 11.0.3 - MacOS 10.13.3
• Edge - Windows 10

[daliwell]

Anyone any idea with this?

As far as I can tell, this is a problem with contrib-hls.

The fact this is on Safari and Edge makes me think that this issue reported against Edge might actually be a problem with contrib-hls, not the Edge browser: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14600417/

[gesinger]

Hey @daliwell , thanks for the samples and the notes. We should definitely check into what's going on, but one thing to note is that right now we don't have full support for non native Safari playback (we haven't tested it much), but it is something we're hoping to look into soon. As for Edge, that reported issue seems to be a likely case, but we can re-examine it with these new details.

[daliwell]

Hey @gesinger - thanks for looking into this. Anything I can do to help, please give me a yell. You can also reach me on the Video.js slack.

[ghost]

This issue was moved by forbesjo to videojs/http-streaming#137.