Видео. js Angular XHR заголовки - PullRequest
Новая
       6

Видео. js Angular XHR заголовки

0 голосов
/ 24 марта 2020

Я пытаюсь добавить токен переноса в мой видео-вызов XHR при использовании видео. js

Я пытаюсь изменить заголовки для вызова XHR, как описано здесь

Есть ли способ включить пользовательский заголовок http в исходный вызов ?

и здесь

video js -http-streaming (VHS )

это то, что у меня сегодня (работает отлично) 

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 видео js не использует протокол Hls, поэтому его не вызывают.

Использование 

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

привело к вызову функции

Но моя проблема осталась прежней, как передать токен в заголовке для видеофайлов (без HLS) * 10 36 *

компонент 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>

пакет. 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"
  }
}

1 Ответ

0 голосов
/ 25 марта 2020

Оказалось, что это невозможно :( https://github.com/videojs/video.js/issues/6348

...