AlphaPlayer播放器自定义解析前加载页面-西瓜

1.创建文件夹

首先需要在播放器的运行目录创建一个名为model的文件夹，如下图

然后在创建的model的文件夹里面创建一个public的文件夹，并在里面创建一个excessive.html的预加载页面如下图

然后就可以编辑这个html文件用来自定义自己的预加载面

下面是一个举例模板

<!DOCTYPE html>
<html lang="zh">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>页面加载中...</title>
</head>
<style>
    body {
        background-color: #121212;
        color: #fff;
        font-family: sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }
    .loader {
        border: 6px solid #333;
        border-top: 6px solid #09f;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        animation: spin 1s linear infinite;
    }
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    .text {
        margin-top: 20px;
        font-size: 16px;
    }
</style>
<body>
<div class="loader"></div>
<div class="text">正在加载，请稍候...</div>

<script>
    // 获取当前URL参数，例如 ?uid=123&type=video
    const params = window.location.search;

    // 异步加载 player 页面，并携带同样参数
    fetch('/player' + params, { method: 'GET' })
        .then(response => response.text())
        .then(html => {
            // 延迟少许时间后加载（防止白屏）
            setTimeout(() => {
                document.open();
                document.write(html);
                document.close();
            }, 300);
        })
        .catch(err => {
            document.querySelector('.text').textContent = '加载失败，请刷新重试';
            console.error(err);
        });
</script>
</body>
</html>

其中最关键的就是script标签里的js代码，无论你要吧页面改成什么样子都需要加上这段代码否则将不会跳转播放页面

然后就是保存文件重新启动播放器不重启不生效（建议在本地开发完成后上传服务器后重启播放器，不然每修改一次都要重启播放器）

文章版权归作者所有，未经允许请勿转载。

THE END