前言
最近使用壁纸引擎时，突然发觉做个动态壁纸主页好像也挺不错的诶，于是就有了这篇文章
如何提取壁纸引擎的资源？
首先，壁纸引擎的资源分为两类，视频类和场景类
视频类
对于视频类，打开你的壁纸引擎，在“已安装”选项卡里，找到你要提取的壁纸，右键选择“资源管理器”打开，就可以看到壁纸的视频文件了
因为视频类壁纸本质上就是在背景循环播放一个视频
场景类
场景类就要复杂一些了，有些壁纸本体的资源文件都被打包成了“scene.pkg”，需要使用工具解包，这里使用GitHub大佬“notscuffed”开发的“RePKG”以及哔哩哔哩大佬“Bury我们past”开发的“RePKG_GUI”RePKG图形化工具进行解包
开始解包
开始解包
打开壁纸引擎，在“已安装”选项卡里，找到你要提取的壁纸，右键选择“资源管理器”打开，就可以看到场景壁纸的资源文件“scene.pkg”了，我们打开“RePKG-GUI.exe”
然后直接把“scene.pkg”文件拖到上方的“单个”的路径栏里面，当然，你也可以选择旁边的“PKG/MPKG”手动选择，点击提取开始解包，解包完成后，它会问你要不要查看文件，默认是解包在“scene.pkg”文件的文件夹内的
可以看到解包成功了，可以看到此壁纸包含的音视频贴图以及着色器文件
找不到场景壁纸的视频文件？
这是由于场景类壁纸是由壁纸引擎直接渲染的，而非视频，所以资源解包出来都是壁纸的贴图文件之类的，那就代表场景壁纸没法提取视频文件啦？也不是，壁纸引擎提供了一种解决方案：“预渲染”，还是打开壁纸引擎，右键你需要导出视频文件的壁纸，选择“发送到移动设备”，在选择“导出.mpkg文件”
这里选择“预渲染”，这里可以调整视频的裁剪和分辨率以及帧率，调整好后选择“确认”，选择保存的路径，这时候壁纸引擎会出现一个消息框，静静等待转换壁纸完成即可。
解包视频文件
打开你保存的路径，把导出的“.mpkg文件”拖到“RePKG_GUI”提取
提取完成后可以看到，已经成功导出了视频文件
移植到网页！
这一步就非常简单了，这里我制作一个简单的小网页，自动播放一个视频，并且铺满网页的背景
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>壁纸</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container {
position: relative;
width: 100%;
height: 100%;
}
#bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.content {
position: relative;
z-index: 1;
color: white;
text-align: center;
padding-top: 50px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div class="video-container">
<video id="bg-video" autoplay muted loop playsinline>
<source src="pc.mp4" type="video/mp4">
</video>
<script>
const video = document.getElementById('bg-video');
video.addEventListener('loadedmetadata', () => {
adjustVideoSize();
});
window.addEventListener('resize', adjustVideoSize);
function adjustVideoSize() {
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
video.style.width = `${windowWidth}px`;
video.style.height = `${windowHeight}px`;
}
</script>
</body>
</html>
就可以很容易的实现动态壁纸网页的效果啦
最后
我自己做了个加了点小功能的版本，可以看看:
