I am trying to add bearer token to my video XHR call while using video.js
I try to change the headers for the XHR call like it is described here
Is there a way to include a custom http header in a <video> source call?
and here
this is what I have today (which works perfectly)
import videojs from 'video.js';
import { Component, AfterViewInit, Input } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
title = 'videojs-poc';
public vjs: videojs.Player;
urlVideo = 'https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4';
urlPoster = 'https://store.storeimages.cdn-apple.com/4667/as-images.apple.com/is/image/AppleInc/aos/published/images/w/at/watch/modelheader/watch-modelheader-series4-hero-201809?wid=629&hei=383&fmt=jpeg&qlt=95&op_usm=0.5,0.5&.v=1536009686693';
constructor() { }
ngAfterViewInit() {
const options = {
sources: [{
src: this.urlVideo,
type: 'video/mp4'
}
],
poster: this.urlPoster
};
videojs.Hls.xhr.beforeRequest = (options1: any) => {
alert(1);
return options1;
};
this.vjs = videojs('my-player', options);
}
}
The issue is that when I try to use this line
videojs.Hls.xhr.beforeRequest = (options1: any) => {
alert(1);
return options1;
};
the alert is not being fired at all so I guess the function is not being called
any ideas?
*********************** EDIT *********************************
I now understand that by using the mp4 file the videojs is not using the Hls protocol and that is why it is not being called.
Using
src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL"
resulted in the function being called
But my problem stayed the same how to pass the token in the header for video files (Without HLS)
component HTML
<video id="my-player" class="video-js" controls preload="auto">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video
</a>
</p>
</video>
package.json
{
"name": "videojs-poc",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~8.2.14",
"@angular/common": "~8.2.14",
"@angular/compiler": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/forms": "~8.2.14",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"video.js": "^7.7.5",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.23",
"@angular/cli": "~8.3.23",
"@angular/compiler-cli": "~8.2.14",
"@angular/language-service": "~8.2.14",
"@types/node": "~8.9.4",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}
