2

I am trying to play a live stream video with HTML5 using videojs@7.0.0 and videojs/http-streaming, but I can't make it work because I am stuck on Request Headers and CORS errors. I am using HLS protocol and the file has a m3u8 format.

Print - Headers Print - Headers

Print - Console Error Print - Console Error

This is a code from a test:

videojs.Hls.xhr.beforeRequest = function(options) {
    options.headers = {
        "Content-Type": "application/x-mpegURL",
        "Access-Control-Allow-Origin": "*"
    }
    return options;
};
player.ready(function() {
    this.src({
        src: 'http://my-url/playlist.m3u8',
        type: 'application/x-mpegURL',
    });
    player.play();
});

When I try playing videos on demand, it works fine, but with live streaming it doesn't work in any browser. I thought it might be some error from headers set on server-side, but I already did another project using Angular and Videogular and was able to make it work with no additional settings, so I think I am probably making some mistake setting the request headers on client-side or something.

1201ProgramAlarm
  • 32,384
  • 7
  • 42
  • 56
Mareps
  • 31
  • 1
  • 1
  • 3

1 Answers1

1

Access-Control-Allow-Origin is not a request header to be sent by the client. You need to configure the server delivering HLS to send the headers in its response.

https://enable-cors.org/

misterben
  • 7,455
  • 2
  • 26
  • 47