@videogular/ngx-videogular使视频在加载组件时自动播放

Question

我正在为我的应用程序中的视频播放器使用软件包@videogular/ngx-videogular。不幸的是，我无法在加载组件的那一刻播放视频(只能点击播放按钮(。

html

<section class="video" (onPlayerReady)="onPlayerReady($event)">
<vg-player>
<vg-controls>
<vg-play-pause></vg-play-pause>
</vg-controls>
<video #media [vgMedia]="$any(media)" preload="auto" autoplay="true" crossorigin src="{{contentResponse?.data?.videoUrl}}">
Your browser does not support the video tag.
</video>
</vg-player>
</section>

ts。

api!: VgApiService

onPlayerReady(api: VgApiService) {
this.api = api;
this.api.getDefaultMedia().subscriptions.loadedMetadata.subscribe(
this.playVideo.bind(this)
);
}
playVideo() {
this.api.play();
}

视频不在组件加载时播放。我试着在网上搜索这个问题，但一无所获。有人知道我该怎么解决这个问题吗？

Answer 1

Videogular API基于RxJS，因此您可以订阅Observable并因此做出反应。要自动播放视频，我们需要监听loadedmetadata事件。

让我们添加一个新的订阅以在加载元数据时播放视频：

export class AppComponent {
// ...

onPlayerReady(api: VgAPI) {
this.api = api;
this.api.getDefaultMedia().subscriptions.loadedMetadata.subscribe(
this.playVideo.bind(this)
);
}

playVideo() {
this.api.play();
}

// ...
}

当loadedMetadata observable被触发时，我们只需通过VgAPI播放视频。