4

After running into this problem, I worked up a minimal example based on this documentation:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
<!-- ^^ video.js stylesheet ^^ -->
<title>Video.JS test</title>
</head>
<body>
<video autoplay controls id="player"
       poster="http://localhost:21212/img/tzGk0I0eb-4"
       class="video-js">
  <source src="http://localhost:21212/vid/tzGk0I0eb-4">
</video>

<script src="https://vjs.zencdn.net/7.4.1/video.js"></script>
<!-- ^^ video.js script ^^ -->
<script type="text/javascript">
  var headers = videojs.Hls.xhr.headers || {}
  headers['X-Arbitrary'] = 'some-arbitrary-header-text'
  videojs.Hls.xhr.headers = headers
  var player = videojs('player')
</script>
</body>
</html>

I also tried it with this JS (I forget where I saw this):

videojs.Hls.xhr.beforeRequest = options => {
console.log(options)
var headers = options.headers || {}
headers['X-Arbitrary'] = 'some-arbitrary-header-text'
options.headers = headers
return options
}
var player = videojs('player')

As well as this (documented here ):

videojs.xhr({
headers: {
'X-Arbitrary': 'some-arbitrary-text'
}
})
var player = videojs('player')

And this ( from here )

videojs.Hls.xhr.beforeSend = request => {
requst.setRequestHeader('X-Arbitrary', 'some-arbitrary-text')
}
var player = videojs('player')

I have a mock server which outputs the request information:

2019-01-03 17:11:56 -05:00 :: GET -> 200:: "/img/tzGk0I0eb-4"
Host:
- localhost:21212
User-Agent:
- Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:64.0) Gecko/20100101 Firefox/64.0
Accept:
- */*
Accept-Language:
- en-US,en;q=0.5
Accept-Encoding:
- gzip, deflate
DNT:
- 1
Connection:
- keep-alive
Pragma:
- no-cache
Cache-Control:
- no-cache
2019-01-03 17:11:56 -05:00 :: GET -> 200:: "/vid/tzGk0I0eb-4"
Host:
- localhost:21212
User-Agent:
- Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:64.0) Gecko/20100101 Firefox/64.0
Accept:
- video/webm,video/ogg,video/*;q=0.9,application/ogg;q=0.7,audio/*;q=0.6,*/*;q=0.5
Accept-Language:
- en-US,en;q=0.5
Range:
- bytes=0-
DNT:
- 1
Connection:
- keep-alive
Pragma:
- no-cache
Cache-Control:
- no-cache
2019-01-03 17:11:56 -05:00 :: GET -> 200:: "/img/tzGk0I0eb-4"
Host:
- localhost:21212
User-Agent:
- Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:64.0) Gecko/20100101 Firefox/64.0
Accept:
- */*
Accept-Language:
- en-US,en;q=0.5
Accept-Encoding:
- gzip, deflate
DNT:
- 1
Connection:
- keep-alive
Pragma:
- no-cache
Cache-Control:
- no-cache
2019-01-03 17:11:56 -05:00 :: GET -> 200:: "/img/tzGk0I0eb-4"
Host:
- localhost:21212
User-Agent:
- Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:64.0) Gecko/20100101 Firefox/64.0
Accept:
- */*
Accept-Language:
- en-US,en;q=0.5
Accept-Encoding:
- gzip, deflate
DNT:
- 1
Connection:
- keep-alive
Pragma:
- no-cache
Cache-Control:
- no-cache

All of the examples output similar log entries, without the requested header.

D. Scott Boggs
  • 341
  • 4
  • 9
  • 1
    I never did find a solution to this or get it working as intended. My workaround was to put the custom header value in a query parameter instead of a header. – D. Scott Boggs Mar 29 '20 at 11:12

1 Answers1

0

Pass them as query parameters. Apparently this solves the problem when other approaches fail and it is considered safe, like this discussion about passing JWTSs in query params.

Farshid
  • 5,134
  • 9
  • 59
  • 87