要解决“Angular 8 使用 Hls.xhr.beforeRequest 的动态 Videojs 问题”，您可以按照以下步骤进行操作：

1. 安装所需的库：

   • Video.js：用于构建视频播放器界面。
   • hls.js：用于处理HLS（HTTP Live Streaming）视频流。
   • @types/hls.js：Hls.js的类型定义文件（TypeScript项目需要）。

   可以使用npm来安装这些库，命令如下：

   npm install video.js hls.js @types/hls.js
   

2. 在Angular组件中导入所需的库和类型定义：

import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import { Hls } from 'hls.js';

3. 在组件类中创建方法来加载和初始化Video.js播放器：

export class VideoPlayerComponent implements OnInit {
  private player: videojs.Player;

  ngOnInit() {
    this.initPlayer();
  }

  private initPlayer() {
    const videoElement = document.getElementById('videoPlayer') as HTMLVideoElement;
    this.player = videojs(videoElement);

    this.player.ready(() => {
      const hls = new Hls();
      hls.xhr.beforeRequest = (options) => {
        // 在这里可以对请求进行处理
        console.log('Before request:', options);
        options.headers = {
          ...options.headers,
          'Custom-Header': 'Custom Value'
        };
      };

      hls.attachMedia(videoElement);
      hls.loadSource('path/to/your/video.m3u8');
    });
  }
}

4. 在HTML模板中添加一个带有id的video元素，用于Video.js播放器：

在上面的示例代码中，我们首先在ngOnInit生命周期钩子函数中调用initPlayer方法来初始化Video.js播放器。然后，我们获取video元素并将其传递给videojs函数来创建播放器实例。在播放器准备就绪（ready）时，我们创建一个Hls实例，并在beforeRequest事件中添加自定义的请求头信息。

请注意，上述示例中使用了内联的CSS类vjs-default-skin来设置Video.js的默认外观。您可以根据需要修改此类或使用其他类来自定义播放器的外观。

最后，您需要将VideoPlayerComponent添加到您的模块中，并在需要使用该播放器的页面上放置标签。

希望这个解决方案能帮助到您！