resume video from the place where it stopped in Angular

Question

resume video from the place where it stopped in Angular. Below is the code snippet,

 @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      name = 'Angular 6';

  constructor() 
   {  }

    @ViewChild('iframe') iframe: ElementRef;

    ngOnInit() {

    }



    ngAfterViewInit() {
        alert('success');
        let doc = this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow;
        if (typeof doc.addEventListener !== undefined) {
          doc.addEventListener("click", this.iframeClickHandler, false)
        } else if (typeof doc.attachEvent !== undefined) {
          doc.attachEvent("onclick", this.iframeClickHandler);
        }
      }
      iframeClickHandler() {
        alert("Iframe clicked");
      }
}

html

   <div>
        <iframe width="560" height="315" src="https://player.vimeo.com/video/197933516" frameborder="0" id="iframe" allowfullscreen
            #iframe></iframe>
    </div>

Answer 1

There are a few things you need here:

• Get the current time of the video
• Save that current time somewhere
• Play the video from the saved timestamp (if there's one)

Here's a rough idea of a possible approach:

In your component, save the timestamp of the video in a timestamp variable

Here's how you can save the time: Vimeo player time tracking using script.

Save this timestamp in the local storage or session-storage every now and then. When to save it is up to you, ngOnDestroy() is a possibility but keep in mind it isn't called if the browser is closed unexpectedly (but you can use a workaround: Angular 2 - Execute code when closing window), or you could define an interval.

Being in the local storage you don't have to worry about your component being destroyed and re-instantiated, the value is always there.

Then every time you instantiate the component with the video, check if the local storage value is set to something (localStorage.getValue('timestamp')) if so assign your component var to it (maybe in ngOnInit()), and add ?autoplay=1#t={timestamp} to your vimeo iframe url if there's a timestamp var in your component exists.

On top of all that you'll probably to clear the local storage value at some point (video finished,...) and there might be some other things to tweak but that's my idea anyway.

---

This is not a solution but more like some rough directions to solve your problem. I haven't tested any of it but I hope it gets you somewhat started. Feel free to comment on what I might have missed.