代码之家 › 专栏 › 技术社区 › GoGo

如何禁用按钮,直到视频以角度结束?

html5-video typescript angular javascript

GoGo · 技术社区 · 6 年前

我有一个mp4视频,我可以从component.ts文件控制它。我的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 按钮在视频期间禁用,并在视频结束后启用。我在角度上找不到一个好的来源来完成这个任务。我想知道你是否可以和我分享一个教程,一篇文章或者一个完成这项工作的方法。任何帮助都将不胜感激! 附:视频不是youtube视频。

1 回复 | 直到 6 年前

Pankaj Parkar 6 年前

你考虑监视 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 或直接登记 合一 关于dom使用 (ended)="videoEnd($event)" 通过视频元素。

Demo Here

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前