html - 在 Ionic Angular 项目的 HTML5 视频标签上播放/暂停

Question

您好，我想在视频标签的中心放置一个播放/暂停按钮。

<div id="video-container">
                        <video controls webkit-playsinline class="fillWidth" >
                            <source src="{{item.image_path}}" type="video/webm" />
                            <source src="{{item.image_path}}" type="video/mp4">
                            <source src="{{item.image_path}}" type="video/ogg">
                            Your browser does not support HTML5 video.
                        </video>
                        </div>

有什么建议么？

标签： htmlangularionic-framework

Answer 1

使用 ViewChild。 演示

<video controls webkit-playsinline class="fillWidth" #video >
     <source src="{{item.image_path}}" type="video/webm" />
     <source src="{{item.image_path}}" type="video/mp4">
     <source src="{{item.image_path}}" type="video/ogg">
     Your browser does not support HTML5 video.
</video>

<a (click)="playVideo()">Play</a>
<a (click)="stopVideo()">Pause</a>

在组件中

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


@ViewChild('video') myVideo: ElementRef;

为下面的按钮赋予功能

playVideo(){
    this.myVideo.nativeElement.play();
  }
stopVideo(){
    this.myVideo.nativeElement.pause();
  }