Encountering this issue, I created a simple example using guidance from 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 experimented with this JavaScript code (source forgotten):
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')
In addition to the above method documented here:
videojs.xhr({
headers: {
'X-Arbitrary': 'some-arbitrary-text'
}
})
var player = videojs('player')
Another approach taken (reference found here):
videojs.Hls.xhr.beforeSend = request => {
requst.setRequestHeader('X-Arbitrary', 'some-arbitrary-text')
}
var player = videojs('player')
A mock server is used for logging the requests:
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
...(more log entries)...
All attempted methods yield similar outcomes in the log, lacking the desired header.