chromium浏览器中,动画变成了一个静态图. #3025
-
|
我有一张动画,当前需要用chromium浏览器渲染,在渲染出来后成了一个静态的图片,报错信息如下图附件所示, <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PAG动画测试</title>
<link rel="icon" href="https://pag.io/img/favicon.png" />
<style>
body {
padding: 12px;
}
.header {
height: 64px;
border-bottom: 1px solid rgb(193, 193, 193);
margin-bottom: 24px;
}
</style>
</head>
<body>
<div>
<canvas class="canvas" id="pag"></canvas>
</div>
<!-- <script src="https://cdn.jsdelivr.net/npm/libpag@latest/lib/libpag.min.js"></script>
<script src="https://unpkg.com/ffavc@latest/lib/ffavc.min.js"></script> -->
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script src="./libpag.min.js"></script>
<script src="./ffavc.min.js"></script>
<script>
window.FLUTERCALLWEBVIEW = function () {
//
};
window.onload = async () => {
// 获取完整的用户代理字符串
console.log("User Agent:", navigator.userAgent);
// 检测是否为Chromium内核
const isChromium = "chrome" in window;
console.log("Is Chromium:", isChromium);
// 检测具体版本信息
const ua = navigator.userAgent;
const chromiumMatch = ua.match(/Chrom(e|ium)\/([0-9]+)\./);
if (chromiumMatch) {
console.log("Chromium Version:", chromiumMatch[2]);
}
// var vConsole = new window["VConsole"]({});
const pagUrl = "./玻璃破碎转场.pag";
// Initialize pag webassembly module.
const PAG = await window.libpag.PAGInit({
locateFile: () => {
return "./libpag.wasm";
},
});
// Initialize ffavc webassembly module.
const FFAVC = await window.ffavc.FFAVCInit();
const ffavcDecoderFactory = new FFAVC.FFAVCDecoderFactory();
PAG.registerSoftwareDecoderFactory(ffavcDecoderFactory);
// Fetch pag file.
const buffer = await fetch(pagUrl).then((response) =>
response.arrayBuffer()
);
// Load the PAGFile from file.
const pagFile = await PAG.PAGFile.load(buffer);
// Set the width from the PAGFile.
const canvas = document.getElementById("pag");
canvas.width = pagFile.width();
canvas.height = pagFile.height();
// Create PAGView.
const pagView = await PAG.PAGView.init(pagFile, canvas);
// Set PAGView play infinity.
pagView.setRepeatCount(0);
await pagView.play();
};
</script>
</body>
</html>请各位大佬帮忙看看是啥原因导致的 |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 4 replies
-
|
有大佬能帮忙看看不,生产需要使用的 |
Beta Was this translation helpful? Give feedback.
-
|
请问你用的 libpag 是哪个版本，另外请将出现时使用的 pag 文件上传下 |
Beta Was this translation helpful? Give feedback.
-
|
demo.zip |
Beta Was this translation helpful? Give feedback.
-
|
好的，我基于上述 dmeo 排查下该问题 |
Beta Was this translation helpful? Give feedback.
-
|
大佬,有排查出什么问题吗 |
Beta Was this translation helpful? Give feedback.
-
|
该问题原因是 chromium 浏览器解码不了 h264 格式的视频，同时你使用的 libpag 版本在注入 FFAVC 后有些问题，所以软件解码器也没有调用成功，该问题在新版本中已经修复了，请将 libpag 更新至最新版使用。 |
Beta Was this translation helpful? Give feedback.
该问题原因是 chromium 浏览器解码不了 h264 格式的视频，同时你使用的 libpag 版本在注入 FFAVC 后有些问题，所以软件解码器也没有调用成功，该问题在新版本中已经修复了，请将 libpag 更新至最新版使用。