blogger

柠阿乐の博客

于是,我为之努力
一个简单的短视频解析页面

直接贴代码,没什么难度,自行二开,接口是从Github找的



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ALE-短视频解析</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 0;
            background: url('https://cn.bing.com/th?id=OHR.CuvervilleIsland_ZH-CN9814166047_1920x1080.jpg') center/cover fixed;
            color: #fff;
        }

        #container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 80vh;
        }

        #title {
            font-size: 28px;
            margin-top: -200px;
            margin-bottom: 20px;
        }

        #inputBox {
            width: 70%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid rgba(0, 0, 0, 0.5);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            color: #000;
        }

        #runButton {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background-color: #4CAF50;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        #runButton:hover {
            background-color: #45a049;
        }

        #result {
            text-align: left;
        }

        #tips {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 70%;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 10px;
            text-align: center;
            color: #000;
        }

        #tips p {
            margin: 0;
        }

        .video-info {
            margin-bottom: 10px;
        }

        .video-info strong {
            font-weight: bold;
            color: #4CAF50;
        }

        .video-info a {
            color: #2196F3;
            text-decoration: none;
        }

        .video-info a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div id="container">
        <h2 id="title">ALE-短视频解析</h2>
        <input type="text" id="inputBox" placeholder="在这里粘贴视频链接">
        <button id="runButton" onclick="getVideoInfo()">获取信息</button>
        <div id="result"></div>
    </div>
    <div id="tips">
        <p>支持列表: 皮皮虾, 抖音, 微视, 快手, 6间房, 哔哩哔哩, 微博, 绿洲, 度小视, 开眼, 陌陌, 皮皮搞笑, 全民k歌, 逗拍, 虎牙,
            新片场, 哔哩哔哩, Acfun, 美拍, 西瓜视频, 火山小视频, 网易云Mlog, 好看视频, QQ小世界</p>
        <p>温馨提示:哔哩哔哩/6间房/微博仅支持下载无法去除水印</p>
    </div>
    <script>
        function getVideoInfo() {
            var videoUrl = document.getElementById("inputBox").value;
            var apiUrl = "https://tenapi.cn/v2/video?url=" + encodeURIComponent(videoUrl);
            fetch(apiUrl)
                .then(response => response.json())
                .then(data => {
                    displayVideoInfo(data.data.title, data.data.cover, data.data.url);
                })
                .catch(error => {
                    console.error('Error:', error);
                    displayVideoInfo('请求失败,请检查链接或稍后重试。', '', '');
                });
        }

        function displayVideoInfo(title, cover, url, musicUrl) {
            var resultDiv = document.getElementById("result");
            resultDiv.innerHTML = "";
            resultDiv.innerHTML = "<div class='video-info'><strong>视频标题:</strong> " + title + "</div>" +
                "<div class='video-info'><strong>封面图:</strong> <a href='" + cover + "' target='_blank'>点击查看</a></div>" +
                "<div class='video-info'><strong>视频地址:</strong> <a href='" + url + "' target='_blank'>点击查看</a></div>" +
                "<div class='video-info'><strong>音乐地址:</strong> " + (musicUrl ? "<a href='" + musicUrl + "' target='_blank'>点击查看</a>" : "未获取到音乐地址") + "</div>";
        }
    </script>
</body>

</html>

 


评论(0)

© 2018  柠阿乐の博客  · emlog

蜀ICP备19013579号-柠阿乐   Design by 柠阿乐