How to set .currentTime of HTMLMediaElement within canplay event, call play and avoid dispatching pause event?

Question

When setting .currentTime of HTMLMediaElement within canplay event before calling .play() the pause event is dispatched.

When trying to call .play() within canplay event after setting .currentTime and error is thrown

DOMException: The play() request was interrupted by a call to pause().

How to set .currentTime within canplay or canplaythrough event of HTMLMediaElement without dispatching pause event, or how to call .play() from within pause event handler to commence media playback from the set .currentTime?

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <video preload="auto" controls></video>
  <span></span>
  <script>
    const url = "https://mirrors.creativecommons.org/movingimages/webm/ScienceCommonsJesseDylan_240p.webm#t=10,15";

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

    let cursor = 10.5;

    video.oncanplay = e => {
      video.oncanplay = null;
      video.currentTime = cursor;
      console.log(e, video.currentTime, video.buffered.end(0));
      video.play().catch(err => document.querySelector("span").textContent = err.message);
    }

    video.onpause = e => {
      console.log(e, video.currentTime);
    }

    video.src = url;
  </script>
</body>

</html>

Kaiido · Answer 1 · 2017-09-20T05:33:31.140

That's a really weird bug you've got there, I'm not sure where it comes from nor what were the odds you fall on it.

If I'm not mistaken, it would be that chrome doesn't honor the src's timerange #t=start,end parameter anymore when you set the currentTime property.

So they will kind of forget it, and act as if you gone through the end threshold and thus pause the video.

But where it becomes really weird, is that when trying to write a test-case, I found out that this occurs only in the canplay event, only with this video, and only with the timerange set to 10,15.

Set it to #t=10.0,15, it works.
Set it to #t=10,15.0, it works.
Set it to any other value, it seems to work _{(no I didn't tested all possible values)}.
Set it to #t=10,15 on an other video, it works.
Set it to #t=10,15 on the same video, but served from an other server, it doesn't work...

  // changed the #t parameter
  const url = "https://mirrors.creativecommons.org/movingimages/webm/ScienceCommonsJesseDylan_240p.webm#t=10.0,15";

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

    let cursor = 10.5;

    video.oncanplay = e => {
      video.oncanplay = null;
      video.currentTime = cursor;
      console.log(e, video.currentTime, video.buffered.end(0));
      video.play().catch(err => document.querySelector("span").textContent = err.message);
    }

    video.onpause = e => {
      console.log(e, video.currentTime);
    }

    video.src = url;

  <video preload="auto" controls></video>
  <span></span>

So for a real fix, I think that https://bugs.chromium.org/p/chromium/issues/ is still the best way to go, but I'm not sure what they will tell you since this seems to be highly related with the video file itself.

For what it's worth, I've got *FFmpegVideoDecoder: avcodec_decode_video2(): Invalid data found when processing input, at timestamp: 10009000 duration: 41000 size: 502 side_data_size: 0 is_key_frame: 0 encrypted: 0 discard_padding (ms): (0, 0)* in chrome://media-internals. — Kaiido, Sep 20 '17 at 05:38
Chromium issue https://bugs.chromium.org/p/chromium/issues/detail?id=767163 — guest271314, Sep 20 '17 at 19:38

How to set .currentTime of HTMLMediaElement within canplay event, call play and avoid dispatching pause event?

1 Answers1