VideoJs load video file twice for m3u8

[papakapa]

Description

Hi, I came across the fact that when working with m3u8 files, the player sometimes tries to download the video file twice, and also sometimes when loading a root playlist, cors fail

m3u8 config:

EXTM3U

EXT-X-VERSION:3

EXT-X-ALLOW-CACHE:YES

EXT-X-TARGETDURATION:11

EXT-X-MEDIA-SEQUENCE:0

EXTINF:10.416667,

floor_concrete_curtain_yellow_480p_0000.ts

EXTINF:10.416667,

floor_concrete_curtain_yellow_480p_0001.ts

EXTINF:7.083333,

floor_concrete_curtain_yellow_480p_0002.ts

EXT-X-ENDLIST

Player options

 autoplay: false,
controls: false,
fluid: false,
loadingSpinner: false,
hls: {
  withCredentials: true
},

How i can fix this?

Additional Information

versions

videojs

videojs 7.14.3

browsers

Chrome

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[gkatsev]

CORS errors are generally something that you need to fix on your backend. You need to make sure that both OPTIONS and GET requests succeed and that the appropriate CORS headers are enabled, see https://enable-cors.org/ for more info. Otherwise, it'll be really hard to help out without a live minimal example page.

[papakapa]

in fact, I do not have a server part, I stored video files in the public folder of the project and received them along absolute paths, I think this is not a problem with CORS. This problem occurs only when trying to load the first segment, i.e. the current time of the video refers to the first segment. In those cases when it is necessary to load the second or third segment of the video, everything loads normally

[umi0410]

I'm suffering a similar issue. I'm using AWS S3 and CloudFront as hls storage.

I think it' wouldn't be a backend problem because the result differs even though the files are in the same S3 bucket. This is the successful request which included Origin request header. And the following are the failed request which excluded Origin request header (I don't know the reason).

I'm not sure what the partial request and the 206 status code means. But there is no Origin header in the failed request. The type of the first request was media (I guess this type of request doesn't need CORS) and the type of the next request was xhr which needs CORS. But there is no Origin header and then the request failed.

Deleting all the browser cache, it works fine. Any idea about this??

[umi0410]

After further debugging, I guess it is because the response is cached by the browser.

The same request but whose type is media doesn't have Origin request header. Therefore, its response also doesn't have headers related to CORS.

If xhr request is responded first, it will be cached properly. However if media request is responded first, CORS rejecting response will be cached.

In my ubuntu, chrome doesn't send media request, but it does in my android phone and iOS devices. what is the media request for?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mersal-developing]

@umi0410 how did you fix this issue
i faced it since 4 days and can't get any thing it

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.