Video.js Angular XHR 标头答案

【问题标题】：Video.js Angular XHR HeadersVideo.js Angular XHR 标头
【发布时间】：2020-03-24 11:27:38
【问题描述】：

我正在尝试在使用 video.js 时将不记名令牌添加到我的视频 XHR 通话中

我尝试像这里描述的那样更改 XHR 调用的标头

Is there a way to include a custom http header in a <video> source call?

这里

这就是我今天所拥有的（效果很好）

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);
  }

}

问题是当我尝试使用这条线时

videojs.Hls.xhr.beforeRequest = (options1: any) => {
  alert(1);
  return options1;
};

警报根本没有被触发，所以我猜这个函数没有被调用

有什么想法吗？

**************************** 编辑 *********************** **********

我现在明白，通过使用 mp4 文件，videojs 没有使用 Hls 协议，这就是它没有被调用的原因。

使用

src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL"

导致函数被调用

但我的问题仍然存在，如何在视频文件的标头中传递令牌（没有 HLS）

组件 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"
  }
}

【问题讨论】：

标签： video.js

【解决方案1】：

事实证明这是不可能的:( https://github.com/videojs/video.js/issues/6348

【讨论】：