如何访问angular typescript中与画中画相关的功能？

<video #videoPlayer controls>
  <source src="path/to/video.mp4" type="video/mp4">
</video>

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-video-player',
  templateUrl: './video-player.component.html',
  styleUrls: ['./video-player.component.css']
})
export class VideoPlayerComponent {
  @ViewChild('videoPlayer') videoPlayer: ElementRef;

  playVideo() {
    this.videoPlayer.nativeElement.play();
  }

  pauseVideo() {
    this.videoPlayer.nativeElement.pause();
  }

  enterPictureInPicture() {
    if (this.videoPlayer.nativeElement.requestPictureInPicture) {
      this.videoPlayer.nativeElement.requestPictureInPicture();
    } else {
      console.log('Picture-in-Picture is not supported');
    }
  }
}

<button (click)="playVideo()">播放</button>
<button (click)="pauseVideo()">暂停</button>
<button (click)="enterPictureInPicture()">进入画中画模式</button>