如何让字幕提示框一直固定在视频底部

Question

我想让提示框固定在屏幕底部。我有 .vtt 格式的字幕文件。我正在使用 webvtt。

.ts 文件

@ViewChild('cVideo', { read: ElementRef })
  readonly cVideo!: ElementRef<HTMLVideoElement>

ngAfterViewInit(): void {
    const video = this.cVideo.nativeElement;
    const cueTrack = video.textTracks[0];
    if (cueTrack) {
      cueTrack.addEventListener('cuechange', () => {
        const activeCues = cueTrack.activeCues;
        if (activeCues && activeCues.length) {
          const cueBox = (cueTrack.activeCues[0] as any).getCueAsHTML();
          const videoContainer = video.parentElement;
          if (videoContainer) {
            console.log('n-34');
            cueBox.style.position = 'sticky';
            cueBox.style.bottom = '0';
            cueBox.style.width = '100%';
            cueBox.style.left = '0';
            cueBox.style.margin = '0';
            cueBox.style.padding = '0';
            cueBox.style.boxSizing = 'border-box';
            cueBox.style.zIndex = '9999';
            videoContainer.appendChild(cueBox);
            console.log('n-45');
          }
        }
      });
    }
  }

我在控制台上看不到

console.log('n-45');

。我还登录了 cueBox，它确实正确显示了字幕文本。