主页 / 问题 / 1251465
Accepted
Артур Франк
Asked:2022-03-04 18:02:42 +0000 UTC2022-03-04 18:02:42 +0000 UTC

HTML5 视频。ios中的视频缓存阻塞

  • 772

我不知道如何解决这个问题了。除 ios 外，任何地方都可以正常工作。我在 React 应用程序中有一个视频元素。在互联网较弱的 ios 上，视频被暂停加载到缓存中，此时屏幕上的所有内容都被阻止。按钮不响应按下，从左到右滑动的底座停止滑动。在停止加载视频的缓存部分后，当视频正在播放时，一切都会变得活跃。

视频占据了工作空间的一半，但一切都被阻止了，甚至所有不在视频元素区域内的东西。我没有给出组件的完整代码，因为它非常大（但问题出在视频组件中，因为一切都可以在任何地方工作，一切都可以在 ios 上运行，但没有视频）。

也许这是 ios 特定的行为，是否有某种参数可以禁用这种行为？

<video
      src={story.stories[storyIndex]?.url}
      poster={"data:image/png;base64,***"}
      className="Story__content Pointer_none"
      ref={this.refVideo}
      controls={false}
      playsInline
      disablePictureInPicture={true}
      controlsList="nodownload"
      preload="auto"
      muted={isMute}
      onWaiting={() => { this.pause(); this.setState({ loader: true }) }}
      onCanPlay={() => { this.play(); this.setState({ loader: false }) }}
      onTimeUpdate={(e) => this.progress(storyIndex, Math.round(e.currentTarget.currentTime * 100 / e.currentTarget.duration))} />
  1. 在分配新的 src 之前尝试将 src 归零
  2. 我使用密钥重绘视频

这些都没有解决问题。

javascript

1 个回答

  1. Best Answer

    总的来说，在这个问题上，这是一项相当费力的工作。事实证明，这实际上只发生在任何版本的 iOS 上（从 9 到 14 测试）。缓存视频时出现 UI 阻塞。

    结果，创建了一个新组件，其中缓存被转移到组件代码中。

    然后播放缓存视频文件的Blob对象出现问题。

    启动 Blob 不起作用，这就是为什么在 base64 中完成缓存的原因。

    现在一切正常，没有冻结+获得完全的缓存控制。如果您需要缓存的示例代码，请告诉我

    • 1

相关问题