html

Question

从Angular中停下来的地方恢复视频。下面是代码段，

 @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

您需要在这里做些事情：

获取视频的当前时间
将当前时间保存在某个地方
播放已保存时间戳记中的视频（如果有的话）

下面是一个可能的方法的粗略想法：

在您的组件中，将视频的时间戳保存在timestamp变量中

节省时间的方法如下：Vimeo player time tracking using script。

时不时地将此时间戳记保存在local storage或session-storage中。什么时候保存由您决定，ngOnDestroy()是可能的，但是请记住，如果浏览器意外关闭，则不会调用它（但是您可以使用变通方法：Angular 2 - Execute code when closing window），或者可以定义一个间隔。

在本地存储中，您不必担心组件被销毁并重新实例化，该值始终存在。

然后，每次用视频实例化组件时，请检查是否将本地存储值设置为某个值（localStorage.getValue('timestamp')），如果是，则将其分配给它的组件var（也许在ngOnInit()中），然后如果组件中存在?autoplay=1#t={timestamp}，则将timestamp添加到您的vimeo iframe网址中。

最重要的是，您可能会在某个时候清除local storage值（视频完成，...），并且可能需要进行其他调整，但这仍然是我的主意。

这不是解决方案，更像是解决问题的一些粗略指导。我没有测试过任何东西，但希望它能使您有所入门。随时对我可能错过的事情发表评论。

从Angular停止的地方恢复视频

html

1 个答案:

下面是一个可能的方法的粗略想法：