Utilizing the Vimeo Player API within my Angular project, I have installed it via
npm i @vimeo/player.
This is specifically for privately playing videos (restricted to my website), and when embedding the URL into an iframe, everything works perfectly. I've also implemented code to capture events like pausing and ending from the player, which is functioning as expected.
However, my objective now is to incorporate an API call within the 'pause' event function to retrieve the number of seconds the video has been played for, and then store this information in a database. Additionally, if a user pauses the video, closes their browser, and returns to the website later on, the video should resume from where they left off (by retrieving the saved duration from the database and continuing playback). This functionality is similar to how YouTube operates.
import Player from '@vimeo/player';
export class CoursesComponent implements OnInit, AfterViewInit {
@ViewChildren('vidPlayer') vidPlayer;
ngAfterViewInit() {
let player
console.log(this.vidPlayer.length);
player = new Player(this.vidPlayer.first.nativeElement);
player.on('pause', function (paused) {
console.log('pause', paused);
//--paused.seconds, the no. of seconds played
let duration = { duration: paused.seconds, status: false };
//--the datas are static
this.courseService.updateLastPlayed('coursename', 'sec3', 'ch9', duration).subscribe((result) => {
console.log("LastPlayed chapter updated");
}, (err) => {
console.log(err);
});
});
}}