Play-With-MPV
/
index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Play-With-MPV</title>
    <meta name="description" content="使用 MPV 播放网页上的视频">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        * {
            padding: 0px;
            margin: 0px;
        }

        body {
            background: linear-gradient(90deg, rgba(225, 221, 223, .32) 1px, transparent 0), linear-gradient(rgba(225, 221, 223, .32) 1px, transparent 0);
            background-size: 20px 20px;
            background-color: rgb(239, 239, 239);
        }

        #container-div {
            display: flex;
            flex-flow: column;
            height: 100%;
            min-width: 800px;
            min-height: 700px;
            padding-left: 100px;
            padding-right: 100px;
        }

        #header-div,
        #category-div {
            background-color: rgba(255, 255, 255, 1);
            height: 108px;
            border-radius: 5px;
            margin-top: 15px;
            padding: 15px 15px 15px 20px;
        }

        #category-div {
            height: 64px !important;
        }

        #header-div h3,
        #category-div h3 {
            color: rgb(251, 108, 40);
        }

        #header-div p,
        #header-div a {
            color: #303133;
            font-family: "微软雅黑";
            font-weight: normal;
            font-size: 15px;
            margin-top: 8px;
            text-decoration: none;
            margin-left: 30px;
        }

        #category-div button {
            color: #fb6c28;
            background-color: rgba(0, 0, 0, 0);
            margin: 20px 10px 0px 10px;
            font-size: 15px;
            border-radius: 2px;
            border: 1px solid rgb(251, 107, 40);
            cursor: pointer;
            border: none;
        }

        #category-div button:hover,
        #category-div .category-selected {
            color: rgb(82, 168, 71);
            font-weight: bold;
        }

        #content-div {
            flex: 1;
            background-color: rgba(255, 255, 255, 1);
            border-radius: 5px;
            margin-top: 15px;
            margin-bottom: 10px;
            padding: 15px;
            text-align: center;
        }

        #footer-div {
            height: 50px;
            text-align: center;
            padding-bottom: 10px;
        }

        #footer-div a {
            color: #909399;
            font-family: "微软雅黑";
            font-weight: normal;
            text-decoration: none;
            font-size: 15px;
        }

        #footer-div .site_police a::before {
            display: inline-block;
            margin-right: 4px;
            margin-bottom: 2px;
            vertical-align: text-bottom;
            content: "";
            width: 15px;
            height: 15px;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAABGdBTUEAALGPC/xhBQAAAwBQTFRFtJR+///krYt6n2hV0a52/b9Ummlc2aht27qH//eX26xi8Na74bNo+M562rB75MGP5LaA5LaC47xp68l57N2y/vrs369n/++G1qx+/tiP6sN6+//e//nQ79l/+NqC6MZ87NmN+PPJ3qdc3alT25xR46xT57xs69KY57Vcw38+2a+C05NwyoRb6che5LxZ5MJt7d6A4bBn0Ktx+/TQ3KdZ8d/H9N+L7+ij8+mS9/O48deu///i7NOF+fG28+eq/vzgAAAAgVg6o31ShGlK7HEtxGsznl8wp41Z+sREcoWUHD6XlIx1xa58tYA/6Zc09oI24kYeo5mEBAVtbmJiNhpNtJlYAAiR96Q53bZp2U4qFzCJa3OEeWRg14pGxb2H/+Jj0RUKvbp+7XE02Mx3AABqzcJxfHp502U9CwZn/7VJzng6/Mxk24Y43Z9CXllm2QAG8F4eu0wo07yHuk0kk2A2yrZ4aX6O9LBA4JU504c9+9Jv46pKABB65G82vwAR2203YB5Q118zzCcT/S0U1Ugq00AmzaxSxicTTg5OxVIkyz0h/SsKDABdzD4txBgKrKJzjYZ3/75gQiREVDhTyQACaQI2XF94wQwLqbSRzxcR0QwR+59GuYtYABuOTAA5tgAQxj4dsQ4OAABhtKNm1JY94qlXyVkqbHmKVk5vzywa/I4sTjVP/9JmhI+Z8K9I1sB41jEfvZBe0iEa83wo7cJi/+9t/9hN469L1hoX6KA945M925tF+MRY15FT2J5Y8M1k67tc3oMy8dNp1XQo1o480oM92pZK68Vd5rZW5sBV6cpt7tRw6K5J7LlP6bFL6bdS7r5Q6L9O4KRM6LlP8slW58Rm6F8mAACAlI+B0zgiAAR33pBE13U41mUw2kko1AMJ6YI+8stuAABm/sVSORQ4cniCk3ha/9te4rJT5L5R8Nh21ZBG5bFQ3qNJ57ta3plE7c1m7Mlb6cFg6r1Z7cph68BX5rlZ6cZe9eNzAABuzgACAAB51z4g1h8Y/9JY5LVdEd5zqQAAAEF0Uk5TyxjR92/D++WYNfUc+cGpn7HH4MSDIdu+rrLmKUzsMPsnWsbG0uS8jOScSBRd8PTs4ecCXOtBunyrAmkclEJBCABK/YzMAAABgElEQVQY02NwgABGKwYmK2sohwFM2vIxuzk6O7FJyCAE7Tc+KXG95hLR/2SOPUzQmnf1s833b0b+mj1jsqQ9RFCaJyRv1aa/K+/NnD4xepKUAliQ0/u6e8H9DTtm3ZxyLfHnBDmQIDfrjVu+Afl///z5++tP8s80cVGgIEt44PVQ/1/Llry8nZCU+vPGPxGgIIefT1iwR/GCu3fqY+NjfseV8wMF2XMeegUVPmjpamytTc+IelUhBhTkysr0/D2/+27nnQfNdSlljyuFgIICudlFc+ct7Gtvutc7taa06oUNUFDw9tI1a289WtTR0PPo99Pn/6uFgYLy+/buerj+2fLFbdNWPN2yc/d2WaCg4su3rw/veb7t8bp/W/8dfP3iox3IR8a6J48e+XDgzbv9h94fO6VvC/amqeH37ye+Hv/05fPbb6evmtiBBc1+vPr///ObT+ffX/r27sMPC7CgvY3e5SsXzp098/XjxS8G5pbQQNbW0VRWUdVQUlPXMgLxASGRxIfJhdfLAAAAAElFTkSuQmCC) no-repeat center;
            background-size: 100% 100%;
        }

        .item-div {
            width: 330px;
            height: 190px;
            border-radius: 5px;
            backdrop-filter: blur(30px);
            background-color: rgb(3, 150, 255, .6);
            position: relative;
            overflow: visible;
            display: inline-block;
            margin: 10px;
            box-shadow: rgb(0 0 0 / 5%) -1px -1px 5px 0, rgb(0 0 0 / 15%) 0px 20px 25px -5px, rgb(0 0 0 / 1%) 0px 10px 10px -5px;
        }

        .item-div:hover {
            background-color: rgba(251, 107, 40, .8);
            transform: translate3d(0, -3px, 0);
            cursor: pointer;
        }

        .item-div a {
            text-decoration: none;
        }

        .item-div a:hover:after {
            position: absolute;
            font-size: 12px;
            left: 208px;
            top: 10px;
            padding: 5px 5px 5px 5px !important;
            background-color: rgba(0, 0, 0, 0.6);
            color: rgba(255, 255, 255, 1);
            content: attr(data-tip);
            text-align: center;
            z-index: 999999;
            width: auto !important;
            height: auto !important;
            white-space: nowrap;
        }

        .item-button-div a:hover:after {
            background-color: rgba(0, 0, 0, 0) !important;
        }

        .item-logo-div {
            width: 330px;
            height: 120px;
            text-align: center;
        }

        .item-logo-div img {
            max-width: 210px;
            height: 60px;
            margin-top: 30px;
        }

        .item-title-div {
            width: 330px;
            height: 40px;
            text-align: center;
            color: rgba(255, 255, 255, 1);
            font-weight: bold;
            font-size: 17px;
        }

        .item-button-div {
            width: 330px;
            height: 30px;
            text-align: center;
        }

        .item-button-div button,
        .item-button-div a {
            margin-right: 10px;
            float: right;
            width: 65px;
            height: 20px;
            border-radius: 2px;
            color: rgba(255, 255, 255, 1);
            border: none;
            background-color: rgb(3, 150, 255, 1);
            font-size: 13px;
            text-decoration: none;
        }

        .item-button-div button:hover,
        .item-button-div a:hover {
            opacity: .9;
            transform: translate3d(0, -2px, 0);
            cursor: pointer;
        }

        #loading-div {
            display: none;
            position: fixed;
            bottom: 50%;
            left: 50%;
            z-index: 999999;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0);
        }

        .spinner {
            width: 40px;
            height: 40px;
            background-color: rgb(251, 107, 40);
            -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
            animation: sk-rotateplane 1.2s infinite ease-in-out;
        }

        @-webkit-keyframes sk-rotateplane {
            0% {
                -webkit-transform: perspective(120px)
            }

            50% {
                -webkit-transform: perspective(120px) rotateY(180deg)
            }

            100% {
                -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
            }
        }

        @keyframes sk-rotateplane {
            0% {
                transform: perspective(120px) rotateX(0deg) rotateY(0deg);
                -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
            }

            50% {
                transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
                -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
            }

            100% {
                transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
                -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            }
        }

        #toast-div {
            display: none;
            position: fixed;
            bottom: 80%;
            left: 50%;
            max-width: 60%;
            min-width: 150px;
            padding: 0 14px;
            height: 40px;
            color: rgb(255, 255, 255);
            line-height: 40px;
            text-align: center;
            border-radius: 4px;
            transform: translate(-50%, -50%);
            z-index: 999999;
            background: rgba(0, 255, 0, .9);
            font-size: 14px;
            font-weight: blod;
        }

        .ribbon {
            width: 106px;
            height: 108px;
            overflow: hidden;
            position: absolute;
            top: -6px;
            left: -6px;
        }

        .ribbon1 {
            line-height: 8px;
            text-align: center;
            transform: rotate(-45deg);
            position: relative;
            padding: 8px 0;
            left: -26px;
            top: 26px;
            width: 130px;
            background: #0396ff;
            color: white;
            box-shadow: 0 5px 5px rgb(0 0 0 / 10%);
            letter-spacing: 1px;
        }

        .ribbon1:before,
        .ribbon1:after {
            content: "";
            border-top: 4px solid #4e7c7d;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            position: absolute;
            bottom: -4px;
        }

        .ribbon1:before {
            left: 0;
        }

        .ribbon1:after {
            right: 0;
        }
    </style>
</head>

<body>
    <div id="container-div">
        <div id="loading-div">
            <div class="spinner"></div>
        </div>
        <div id="toast-div"></div>
        <div id="header-div">
            <h3>🧭 简介</h3>
            <p>本站是 Play-With-MPV 支持网站导航，建议配合下列项目食用 ♨️</p>
            <p><a href="https://greasyfork.org/zh-CN/scripts/444056-play-with-mpv" target="_blank"
                    style="color: #fb6c28;"> - Play-With-MPV 👆</a>&nbsp;一个支持一键调用 mpv / potplayer / iina
                等播放下列网页上的视频的油猴脚本
            </p>
            <p><a href="https://kutt.lckp.top/uVaT3U" target="_blank" style="color: #fb6c28;"> -
                    mpv.net_CM&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 👆</a>&nbsp;一款使用方便，功能强大，并且已经集成了多种着色器，滤镜和脚本的的播放器</p>
        </div>
        <div id="category-div">
            <h3>🏳️‍🌈 分类</h3>
            <button id="anime" onclick="choose(this.id);">动漫</button>
            <button id="serial" onclick="choose(this.id);">电视剧</button>
            <button id="movie" onclick="choose(this.id);">电影</button>
            <button id="show" onclick="choose(this.id);">综艺</button>
            <button id="user" onclick="choose(this.id);">用户投稿</button>
            <button id="iptv" onclick="choose(this.id);">电视直播</button>
        </div>
        <div id="content-div"></div>
        <div id="footer-div">
            <p><a href="https://github.com/LuckyPuppy514/Play-With-MPV" target="_blank">© 2023 LuckyPuppy514
                    - <a class="icp" href="https://beian.miit.gov.cn" target="_blank"
                        rel="noopener noreferrer nofollow">粤ICP备2022080328号-1</a></a></p>
            <p class="site_police">
                <a class="site_police"
                    href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030702004874" target="_blank"
                    rel="noopener noreferrer nofollow">粤公网安备44030702004874号</a>
            </p>
        </div>
    </div>
</body>

<script>
    function choose(category) {
        if (localStorage.category) {
            document.getElementById(localStorage.category).classList.remove("category-selected");
        }
        localStorage.category = category;
        document.getElementById(category).classList.add("category-selected");
        let list = new Array();
        for (let website of websiteList) {
            if (website.category.indexOf(category) != -1) {
                list.push(website);
            }
        }
        appendWebsiteItem(list);
    }
    function loadLastChoose() {
        let category = localStorage.category;
        category = category ? category : "iptv";
        choose(category);
    }
    function loadIPTV(website) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', website.url[0], true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                let m3us = xhr.responseText.replaceAll("\r\n", "\n").matchAll(/#EXTINF:[^\n]+\nhttp[^\n]+/g);
                for (let m3u of m3us) {
                    m3u = m3u.toString();
                    let url = m3u.match(/\n(http[^\n]+)/);
                    if (url) {
                        url = url[1];
                        let title = m3u.match(/,([^\n^,]+)\n/);
                        title = title ? title[1] : "";
                        let logo = m3u.match(/tvg-logo="([^"]+)"/);
                        logo = logo ? logo[1] : "";
                        if (m3u.match(/(4K|4k|8K|8k|UHD|uhd|2160p|4320p|超清|超高清)/)) {
                            resolution = "超高清";
                        } else {
                            resolution = "高清";
                        }
                        websiteList.push({
                            "title": title,
                            "logo": logo,
                            "url": [
                                url
                            ],
                            "category": website.category,
                            "resolution": resolution
                        });
                    }
                }
                if (!localStorage.category || localStorage.category == "iptv") {
                    choose("iptv");
                }
            }
        }
        xhr.send();
    }
    async function loadWebsiteList() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', WEBSITE_LIST_URL, false);
        xhr.onreadystatechange = async function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                let wsJson = JSON.parse(xhr.responseText);
                for (let website of wsJson) {
                    if (website.category == "iptv") {
                        localStorage.iptvUrl = website.url[0];
                        await loadIPTV(website);
                    } else {
                        websiteList.push(website);
                    }
                }
            }
        }
        await xhr.send();
    }
    function loading(visiable) {
        let loadingDiv = document.getElementById("loading-div");
        if (visiable) {
            loadingDiv.style.display = "flex";
            setTimeout(() => {
                if (loadingDiv.style.display == "flex") {
                    document.getElementById("loading-div").style.display = "none";
                    toast("超时辣 ...... 😓", "error");
                }
            }, 6000);
        } else {
            loadingDiv.style.display = "none";
        }
    }
    function toast(message, type, duration) {
        type = type ? type : "info";
        duration = isNaN(duration) ? 3000 : duration;
        let toastDiv = document.getElementById("toast-div");
        toastDiv.innerHTML = message;
        toastDiv.style.display = "block";
        if (type == "info") {
            toastDiv.style.backgroundColor = "rgba(75, 180 ,54, 1)";
        } else if (type == "warn") {
            toastDiv.style.backgroundColor = "rgba(190, 190, 70, 1)";
        } else if (type == "error") {
            toastDiv.style.backgroundColor = "rgba(210, 51, 35, 1)";
        }
        setTimeout(() => {
            toastDiv.style.display = "none";
        }, duration);
    }
    function appendWebsiteItem(list) {
        let html = "";
        if (list.length > 0) {
            if (list[0].category == "iptv") {
                let index = 0;
                for (const website of list) {
                    let title = website.title;
                    if (title.length > 20) {
                        title = title.substring(0, 20) + " ...";
                    }
                    let link = "";
                    let player = undefined;
                    if (localStorage.player) {
                        player = JSON.parse(localStorage.player);
                    }
                    if (player && player.name != "mpv") {
                        let param = player.params.videoUrl;
                        let videoUrl = encodeURIComponent(website.url);
                        param = param.replace('${videoUrl}', videoUrl);
                        param = param.replace('${EvideoUrl}', videoUrl);
                        param = param.replace('${DvideoUrl}', website.url);
                        link = param;
                        param = player.params.title;
                        if (param) {
                            let title = encodeURIComponent(website.title);
                            param = param.replace('${title}', title);
                            param = param.replace('${Etitle}', title);
                            param = param.replace('${Dtitle}', website.title);
                            link = link + " " + param;
                        }
                        link = link.replaceAll('"', "%22") + "%20";
                    } else {
                        link = `mpv://%22${encodeURIComponent(website.url)}%22 --force-media-title=%22${encodeURIComponent(website.title)}%22%20`;
                    }
                    let potplayer = `potplayer://${website.url} /current /title=%22${encodeURIComponent(website.title)}%22%20`;
                    html = html + `
                <div class="item-div">
                    <div class='ribbon'>
					    <div class='ribbon1'>${website.resolution}</div>
				    </div>
                    <a href="${link}" target="_blank" data-tip="调用外部播放器打开">
                        <div class="item-logo-div">
                            <img src="${website.logo}" onerror="this.src='${ERROR_IMG_URL}'" referrerpolicy="no-referrer">
                        </div>
                        <div class="item-title-div">${title}</div>
                    </a>
                    <div class="item-button-div">
                        <input type="text" value="${website.url[0]}" id="website-url-${index}" style="display: none">
                        <span>
                            <button onclick="copyUrl(this.value)" value="website-url-${index}">复制链接</button>
                            <a href="${potplayer}" target="_blank">potplayer</a>
                        </span>
                    </div>
                </div>`;
                    index++;
                }
            } else {
                for (const website of list) {
                    html = html + `
                <div class="item-div">
                    <div class='ribbon'>
					    <div class='ribbon1'>${website.resolution}</div>
				    </div>
                    <a href="${website.url[0]}" target="_blank" data-tip="点击打开主站首页">
                        <div class="item-logo-div">
                            <img src="${website.logo}" onerror="this.src='${ERROR_IMG_URL}'" referrerpolicy="no-referrer">
                        </div>
                        <div class="item-title-div">${website.title}</div>
                    </a>
                    <div class="item-button-div">
                        <span>`;
                    for (let index = website.url.length - 1; index > 0; index--) {
                        html = html + `<a href="${website.url[index]}" target="_blank" style="width: 42px;">备用</a>`;
                    }
                    html = html + `<a href="${website.url[0]}" target="_blank" style="width: 50px;">主站</a>
                        </span>
                    </div>
                </div>`;
                }
            }
        } else {
            html = `<div style="position: relative; top: 49%; left: 49%; transform:translate(-50%,-50%);">空空如也~~</div>`;
        }
        document.getElementById("content-div").innerHTML = html;
    }
    function copyUrl(id) {
        let input = document.getElementById(id);
        input.style.display = "block";
        input.select();
        document.execCommand("copy");
        input.style.display = "none";
        toast("复制成功");
    }
    const WEBSITE_LIST_URL = "./website/list.json";
    const ERROR_IMG_URL = "./website/logo/404.png";
    var websiteList = new Array;
    loading(true);
    window.onload = async function () {
        await loadWebsiteList();
        loadLastChoose();
        loading(false);
    }
</script>

</html>