Question

在调用.currentTime之前在HTMLMediaElement事件中设置canplay .play()时，会调度pause事件。

在设置.play()后尝试在canplay个事件中调用.currentTime并抛出错误

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

如何在.currentTime或canplay事件canplaythrough内设置HTMLMediaElement而不发送pause事件，或如何从内部调用.play() pause事件处理程序从集.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>

Answer 1

这是一个非常奇怪的错误你已经到了那里，我不知道它来自哪里，也不知道你有多大的机会。

如果我没有弄错的话，那就是当你设置src属性时，chrome不再尊重#t=start,end的时间范围currentTime参数。

所以他们会忘记它，并表现得好像你经历了end阈值，从而暂停视频。

但真正奇怪的是，在尝试编写测试用例时，我发现这只发生在canplay事件中，仅发生在此视频中，并且只在时间范围设置为{ {1}}。

将其设为10,15，可以将其设置为#t=10.0,15，可以使用 将其设置为任何其他值，它似乎正常工作 _{（不，我没有测试所有可能的值）}。
在另一个视频中将其设置为#t=10,15.0，可以使用 在同一视频上将其设置为#t=10,15，但是从其他服务器提供， 不工作...

#t=10,15

  // 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;

所以对于一个真正的修复，我认为https://bugs.chromium.org/p/chromium/issues/仍然是最好的方法，但我不确定他们会告诉你什么，因为这似乎与视频文件本身高度相关。 / p>

如何在canplay事件中设置HTMLMediaElement的.currentTime，调用play并避免调度暂停事件？

1 个答案: