'How to detect when HTML5 video is played the first frame?

I ask this because I would like to show a overlay image on exact play time like on 3:00.

Therefore, I binded the "play" event and state setTimeout(...,18000) to show the image.

However, it seems the setTimeout is done too early. The image is shown faster than expected. I can unterstand as the "play" event is fired BEFORE the video is prepared.

So I also tried to bind "loadeddata" and "playing" event. But this time, the image is shown slower than expected.

Also, the image seems to show in "random manner" (not always show on the same time with a few tests, a little bit different).

Is there a event that I can use setTimeout to show image on exact time? Or in simple, how can I show an image on video exact time?

htmlhtml5-videosettimeoutjavaandroidandroid-studiogoogle-sheets-api


Solution 1:[1]

The loadeddata event is fired when the frame at the current playback position of the media has finished loading; often the first frame.

First frame is:

const video = document.querySelector('video');

video.addEventListener('loadeddata', (event) => {
  console.log('Yay! The readyState just increased to  ' +
      'HAVE_CURRENT_DATA or greater for the first time.');
});

You can relay on timeUpdate and get the current time in the event:

event?.detail?.target?.currentTime

Solution 2:[2]

Blocking the Main Thread is against the android development policies. Blocking Main Thread for too long can cause an ANR error. You can show some progress dialog or loading information until you receive a response. Or if your MainActivity class is responsible only for making that request consider moving the request to another Activity (MainMenuActivity), which you are navigating to after response.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 xonya
Solution 2 BigSt

Related Questions