javascript - 如何在视频以 Angular 结束之前禁用按钮？

Question

我有一个从 component.ts 文件控制的 mp4 视频。我的 html 模板文件是:

<div class="row">
    <div class="col-lg-12">
        <div class="text-center">
            <button class="btn btn-primary play-button" (click)="playVideo()"><i class="fa fa-play fa-2x"></i> Play the video</button>
            <button class="btn btn-secondary play-button" (click)="pauseVideo()"><i class="fa fa-pause fa-2x"></i> Pause the video</button>
        </div>
        <div class="pull-left">
            <button class="btn btn-info play-button disabled"><i class="fa fa-arrow-left fa-2x"></i> Previous</button>
        </div>
        <div class="pull-right">
            <button class="btn btn-info play-button"><i class="fa fa-arrow-right fa-2x"></i> Next</button>
        </div>
    </div>
</div>

我的 component.ys 文件是:

playVideo(event: any) {
    this.videoplayer.nativeElement.play();
}

pauseVideo(event: any) {
    this.videoplayer.nativeElement.pause();
}

我想在视频播放期间禁用 next 按钮，并在视频结束后启用它。我找不到一个很好的 Angular 来源来完成这个。我想知道您是否可以与我分享教程、帖子或完成此操作的方法。任何帮助，将不胜感激!PS:视频不是youtube视频。

Answer 1

您考虑监视 onend 事件以跟踪视频何时结束，但就按钮隐藏部分而言，您可以在视频开始和结束时立即启用标志 onend 事件触发。

HTML

<video #videoplayer controls (ended)="videoEnd()" style="width: 1200px;">
    <source 
      src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" 
      type="video/mp4"> 
        Your browser does not support HTML5 video.
</video>

组件

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('videoplayer') videoplayer;
  isEnded: boolean = false;
debugger
  pauseVideo(event: any) {
    this.videoplayer.nativeElement.pause();
  }

  playVideo(event: any) {
    this.videoplayer.nativeElement.play();
    this.isEnded = false
  }

  videoEnd(event: any) {
    this.isEnded = false;
    alert('Video Has Ended')
  }
}

要注册 onend 事件，您可以使用 #templateVariable 和 ViewChild 的组合，或者直接注册 onend DOM 在视频元素上使用 (ended)="videoEnd($event)"。

Demo Here