Web 端 iOS 省电模式 await PAG.PAGView.init 失败

[jiangyijie27]

Bug 描述

问题

Web 端 iOS 省电模式 await PAG.PAGView.init 失败

重现

可以用官方文档里的代码片段重现

// <canvas class="canvas" id="pag"></canvas>
const pagFile = await PAG.PAGFile.load(file);
document.getElementById("pag").width = await pagFile.width();
document.getElementById("pag").height = await pagFile.height();
// 这一步在 iOS 省电模式时 await 不会结束
const pagView = await PAG.PAGView.init(pagFile, "#pag");
pagView.setRepeatCount(0);
await pagView.play();

环境

web 版本：[email protected]
设备：iPhone 12 Pro Max iOS15.2.1

[zenoslin]

用的是 https://pag.io/file/like.pag 这个PAG文件复现的吗

[zenoslin]

我这边定位到 iOS 在低电量模式下，Safari 会拦截Video 的自动播放，导致含有视频序列帧的 PAG 文件无法正常播放。会在后续版本尝试解决这个问题

[jiangyijie27]

@zenoslin 据我所知，android 和 iOS 省电模式都是不支持直接 this.videoEl.play() 的，必须在 click 这样的交互事件后触发。我担心这个问题没有办法修复。

不过，我这边业务场景是在微信 webview 里，我把代码 fork 出来，用了一个特殊的 API 处理 this.videoEl.play()，暂时可以解决我个人的问题。

[zenoslin]

@jiangyijie27 你用了什么API解决这个问题可以分享一下吗？

我们这边考虑在无法使用Video标签解码时，采用外部注入解码器的方式，去处理视频序列帧，这样在Video标签受限的时候也能正常地解码PAG内包含的视频序列帧。

[jiangyijie27]

@zenoslin

window.WeixinJSBridge.invoke("getNetworkType", {}, () => {
  // 此时视频一定能播放
  this.videolEl.play()
})

[zenoslin]

@jiangyijie27 对于无法使用Video标签解码的场景，我们增加了 PAG.registerSoftwareDecoderFactory() 接口，可以通过外部注入解码器的方式来解决。
现已经可以实现在所有浏览器中不需要交互即可自动播放了，解码器仓库：https://github.com/libpag/ffavc/tree/main/web
但是需要注意的是，软件解码器在 iOS Safari 上表现很好，而在 Android 上的表现差强人意，我们还会持续优化。