Skip to content

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

@pecliu

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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions