要在Angular 9中使用YouTube播放器组件并跳转到新的startSeconds,可以遵循以下步骤:
安装ngx-youtube-player
库:
npm install ngx-youtube-player
导入所需的模块和服务:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxYoutubePlayerModule } from 'ngx-youtube-player';
import { AppComponent } from './app.component';
import { YoutubePlayerService } from 'ngx-youtube-player';
在app.component.ts
文件中,创建一个YouTube视频ID和startSeconds变量,并在构造函数中注入YoutubePlayerService
:
export class AppComponent {
videoId = 'VIDEO_ID';
startSeconds = 60;
constructor(private youtubePlayerService: YoutubePlayerService) {}
jumpToStartSeconds() {
this.youtubePlayerService.seekTo(this.startSeconds);
}
}
在app.component.html
文件中,使用ngx-youtube-player
指令来加载YouTube播放器,并添加一个按钮来调用jumpToStartSeconds
方法:
在app.module.ts
文件中,将NgxYoutubePlayerModule
添加到imports
数组中:
@NgModule({
imports: [
BrowserModule,
NgxYoutubePlayerModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
现在,当你点击按钮时,YouTube播放器将跳转到指定的startSeconds
值。请确保将VIDEO_ID
替换为你要播放的视频的实际ID。