How to call <video> method in ionic


#1

hi all,
i’m beginner to start with ionic, i have issue when call tag method in .ts file,
could you help me, how to call pause(), play(), and hanlding event ‘playing’, ‘paused’…

thanks


#2

It’s the same as for Javascript unless you import a video library. Start here.


#3

Thanks for your reply, but i have issue. this is my source code:

home.html

<ion-content>
  <video id="mainVideo" fullscreen="fullscreen" autoplay="true" controls (cli)>
    <source src="assets/videos/voya_vid.mov" type="video/mp4">
  </video>
</ion-content>

home.ts

playVideo(){
    let mainVideo = document.getElementById('mainVideo');
    mainVideo.play();
 }

mainVideo.play() get error message is: Property ‘play’ does not exist on type ‘HTMLElement’

After search some thing by google, i find solution and want share detail for every one.

i modify some thing, at home.html file:

<ion-content padding>
  <video id="mainVideo" fullscreen="fullscreen" autoplay="true" controls>
  </video>
  <button ion-button (click)="playVideo();"></button>
</ion-content>

and at home.ts file

playVideo(){
    let mainVideo = <HTMLMediaElement>document.getElementById('mainVideo');
    mainVideo.src = "file.mp4";
    mainVideo.play();
 }

read more here: https://stackoverflow.com/questions/12989741/the-property-value-does-not-exist-on-value-of-type-htmlelement

but i dont know, how to hanlder event in ts file like that: playing, paused, stop


#4
const mainVideo: HTMLVideoElement = <HTMLVideoElement> document.getElementById('mainVideo');
mainVideo.play();

#5

Thanks, but do you know, how to hanlde event, playing, paused,… some thing like that in .ts file?


#6

You mean with addEventListener? Use HTMLVideoElement the way I did in that code snippet. It has available all the HTMLMediaElement events, including playing and paused. Use addEventListener the way it appears in the code snippet at the bottom of this page, with any event you want.

Edit: also, I recommend you take autoplay out of your video tag. A lot of devices won’t accept it. So it’s better if you assume that it isn’t there, and write your code accordingly.


#7

i try like that, but it not working
this.mainVideo = document.getElementById(‘mainVideo’);
this.mainVideo.addEventListener(‘durationchange’, function () {
console.log(this.currentTime);
},true);

some event it working but for durationchange is not, it dont fire anything.


#8

Maybe the duration doesn’t change?


#9

html:
<video #videoPlayer preload=“metadata” webkit-playsinline=“webkit-playsinline”>

.ts:
import:
import { ViewChild, ElementRef } from ‘@angular/core’;
attribute:
@ViewChild(‘videoPlayer’) mVideoPlayer: ElementRef;
usage:
let video = this.mVideoPlayer.nativeElement;
video.onended = () => {
console.log(‘finished’);
};
video.onerror = (e) => {
console.log('error ’ + JSON.stringify(video.error));
};
video.type = ‘video/mp4’;
video.src = ‘myvideo.mp4’;
video.load();
video.oncanplay = () => {
//ok video is ready to play and duration is avaible
console.log(video.currentTime);
video.ontimeupdate = () => console.log(‘video time updated’);
video.play()
}