How to run a function when a html5 video starts playing

Question

i am building an app with ionic, i want to run a function whenever a video starts to play,like hide a button and etc. here's my code

    let video = <HTMLVideoElement> document.getElementById(i)
    if(video.paused) {
        video.play()
        video.oncanplay=()=>console.log('Starts playing');
    }

The code is not working, please how can i run a function whenever any video on that page starts playing

Answer 1

var vid = document.getElementById("myVideo");
vid.onplay = function() {
    alert("The video has started to play");
};

From here: https://www.w3schools.com/tags/av_event_play.asp

Answer 2

Try this, play returns a promise.

const video = document.getElementById("myVideo");

async function playVideo() {
  try {
    await video.play();
    // video is playing, do your stuff here
  } catch(err) {
    // video is not playing
  }
}

if(video.paused) {
    playVideo()
 }

For more info: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play