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按钮，并在视频播放结束后将其启用。我找不到合适的角度来实现这一目标。我想知道您是否可以与我分享教程，帖子或实现此目的的方法。任何帮助，将不胜感激！ 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')
  }
}

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

Demo Here

如何禁用按钮，直到视频结束成角度？

1 个答案: