Skip to content

ffavc 的 web 版本无法解决微信内无法自动播放包含 video 的 pag 问题 #4

Description

@pecliu

按照官方文档配置了 ffavc 的软解,但是微信端依然无法自动播放
image


        const event = new Event("PAGInitReady");
        async function initPag(event) {
          window.PAG = await window.libpag.PAGInit();
          // Initialize ffavc webassembly module.
          const FFAVC = await window.ffavc.FFAVCInit();
          const ffavcDecoderFactory = new FFAVC.FFAVCDecoderFactory();
          PAG.registerSoftwareDecoderFactory(ffavcDecoderFactory);
          window.dispatchEvent(event);
        }
        window.onload = async () => {
          await initPag(event);
        }
        // 清除上一个 PAG 相关的资源
        if (this.pagFile) {
          this.pagFile.destroy();
        }
        if (this.pagView) {
          this.pagView.destroy();
        }
        // 获取 PAG 素材数据
        const buffer = await fetch(this.configurationData.pagFile?.url || DEFAULT_PAG_FILE)
          .then(response => response.arrayBuffer());
        // 加载 PAG 素材为 PAGFile 对象
        this.pagFile = await this.pagInstance.PAGFile.load(buffer);

        // 动效文件的高/宽比
        this.pagWidth = this.pagFile.width() ?? 0;
        this.pagHeight = this.pagFile.height() ?? 0;
        this.pagHWRatio = this.pagHeight / this.pagWidth;
        this.calcPagCanvasSize();
        // 实例化 PAGView 对象
        // 由于 VideoReader 模块在 Web 平台依赖于 VideoElement,所以在部分移动端场景下,pagView?.init 不是在用户交互产生的调用链中,可能会存在不允许播放导致无法正常渲染画面的问题。
        // 当出现这种情况,我们推荐取消首帧渲染
        this.pagView = await this.pagInstance.PAGView.init(this.pagFile, this.pagCanvas, {
          firstFrame: false,
          useScale: false,
        });
        // 设置动画循环播放次数:0 代表无限循环
        this.pagView.setRepeatCount(this.configurationData.repeatCount || 0);
        // 播放 PAGView
        await this.pagView.play();

09e675314565d6ef77c64bc3d693c446_origin

image image image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions