Воспроизведение / пауза на видео теге HTML5 в проекте Ioni c Angular

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>

есть предложения?

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();
  }