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

【问题标题】：How to set .currentTime of HTMLMediaElement within canplay event, call play and avoid dispatching pause event?如何在 canplay 事件中设置 HTMLMediaElement 的 .currentTime，调用 play 并避免调度 pause 事件？
【发布时间】：2018-02-28 19:19:26
【问题描述】：

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

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

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

如何在HTMLMediaElement 的HTMLMediaElement 的canplay 或canplaythrough 事件中设置.currentTime 而不调度pause 事件，或者如何从pause 事件处理程序中调用.play() 以从该集合开始媒体播放.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>

【问题讨论】：

标签： javascript google-chrome html5-video html5-audio chromium

【解决方案1】：

这是你遇到的一个非常奇怪的错误，我不确定它来自哪里，也不知道你遇到它的几率是多少。

如果我没记错的话，当您设置currentTime 属性时，chrome 将不再支持src 的时间范围#t=start,end 参数。

所以他们会有点忘记它，并表现得好像您通过了end 阈值并因此暂停视频。

但真正奇怪的地方在于，在尝试编写测试用例时，我发现这仅发生在 canplay 事件中，仅在此视频中发生，并且仅在时间范围设置为 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;

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

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

【讨论】：

为了它的价值，我得到了 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.
铬问题bugs.chromium.org/p/chromium/issues/detail?id=767163