angular - 播放 80% 的视频时发出警报，角度 12 video-gular

Question

我正在使用@videogular/ngx-videogular 播放视频，我想标记其中 80% 播放的视频

注意：我已经找到了 media.duration 但它没有帮助。

额外的问题：有没有办法知道视频的持续时间，比如制作一个影子搜索栏来知道它已经看过多少？

角度版本 13，和“@videogular/ngx-videogular”：“^5.0.1”，

---

videoPlayer.component.html

     <vg-player (onPlayerReady)="videoPlayerInit($event)" >
        <vg-overlay-play ></vg-overlay-play>
        <vg-buffering></vg-buffering>
        <vg-scrub-bar>
          <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
          <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
        </vg-scrub-bar>
        <vg-controls>
          <vg-play-pause></vg-play-pause>
          <vg-playback-button></vg-playback-button>
          <vg-time-display onplay="" vgProperty="current" vgFormat="mm:ss"></vg-time-display>
          <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
          <vg-mute></vg-mute>
          <vg-volume></vg-volume>
          <vg-fullscreen></vg-fullscreen>
        </vg-controls>

        <video #media [vgMedia]="$any(media)"  [src]="currentVideo.src" id="singleVideo" preload="auto" crossorigin>
        </video>
      </vg-player>

---

videoPlayer.component.ts

export class VideoplaylistComponent implements OnInit{

  videoItems!: IVideoList[];

  activeIndex = 0;
  currentVideo = this._videoList.videos[this.activeIndex];


  data!: any;

  
  constructor(
    private _videoList: VideoListService
  ) {}

  ngOnInit(): void {
    //get video list
    this.videoItems = this._videoList.videos;
  }

  videoPlayerInit(data: any) {
    this.data = data;

    //show video
    this.data
      .getDefaultMedia()
      .subscriptions.loadedMetadata.subscribe(this.initVdo.bind(this));

    //show next video
    this.data
      .getDefaultMedia()
      .subscriptions.ended.subscribe(this.nextVideo.bind(this));
  }

  nextVideo() {
    this.activeIndex++;

    if (this.activeIndex === this._videoList.videos.length) {
      this.activeIndex = 0;
    }

    this.currentVideo = this._videoList.videos[this.activeIndex];
  }

  initVdo() {
    this.data.play();
  }

  startPlaylistVdo(item: any, index: number) {
    this.activeIndex = index;
    this.currentVideo = item;
  }
 
}

---

这是我的视频列表

videos: IVideoList[] = [
    {
      id: 1,
      name: 'First Video',
      src: 'http://static.videogular.com/assets/videos/big_buck_bunny_720p_h264.mov',
      type: 'video/mp4',
      completed: false,
    },
    
  ];