<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="YouTube Downloader , free download youtube ,background play youtube video and audio">
    <meta name="keywords" content="YouTube download,background play youtube">
    <title>YouTube Downloader & Background Player</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: Arial, sans-serif;
            padding: 15px;
            max-width: 100%;
            overflow-x: hidden;
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        
        h1 {
            text-align: center;
            margin: 15px 0;
            font-size: 1.5rem;
            color: #ff0000;
        }
        
        form {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 20px;
            width: 100%;
        }
        
        .input-group {
            display: flex;
            gap: 10px;
        }
        
        input[type="text"] {
            flex: 1;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
        }
        
        select {
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            background-color: white;
        }
        
        input[type="button"] {
            background-color: #ff0000;
            color: white;
            border: none;
            padding: 12px;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        input[type="button"]:hover {
            background-color: #cc0000;
        }
        
        input[type="button"]:disabled {
            background-color: #999;
            cursor: not-allowed;
        }
        
        video, audio {
            width: 100%;
            max-height: 50vh;
            background-color: #000;
            border-radius: 8px;
            margin-top: 10px;
        }
        
        .loading {
            display: none;
            text-align: center;
            margin: 20px 0;
        }
        
        .spinner {
            border: 4px solid rgba(0, 0, 0, 0.1);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border-left-color: #ff0000;
            animation: spin 1s linear infinite;
            display: inline-block;
            margin-bottom: 10px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 响应式调整 */
        @media (min-width: 768px) {
            body {
                max-width: 600px;
                margin: 0 auto;
                padding: 20px;
            }
            
            h1 {
                font-size: 2rem;
                margin: 20px 0;
            }
            
            form {
                flex-direction: row;
                flex-wrap: wrap;
            }
            
            .input-group {
                flex: 1;
            }
            
            input[type="button"] {
                width: auto;
                padding: 12px 20px;
            }
            
            video, audio {
                max-height: 60vh;
            }
        }
        /* Shortcuts Guide Styles */
    .shortcuts-guide {
        margin-top: 10px;
        padding: 25px;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        border: 1px solid #e0e0e0;
    }
    
    .shortcuts-guide h3 {
        color: #ff0000;
        text-align: center;
        margin-bottom: 25px;
        font-size: 1.4em;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    
    .guide-section {
        margin-bottom: 25px;
        padding-bottom: 25px;
        border-bottom: 1px dashed #e0e0e0;
    }
    
    .guide-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    h4 {
        color: #333;
        margin-bottom: 12px;
        font-size: 1.1em;
    }
    
    .steps, .usage {
        padding-left: 20px;
        margin-bottom: 20px;
    }
    
    .steps li, .usage li {
        margin-bottom: 8px;
        line-height: 1.5;
    }
    
    .btn-install {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        background: #ff0000;
        color: white;
        text-decoration: none;
        border-radius: 30px;
        font-weight: 500;
        transition: all 0.3s;
    }
    
    .btn-install:hover {
        background: #cc0000;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .btn-install img {
        width: 20px;
        height: 20px;
    }
     
     
    
    .troubleshooting {
        background: #fff8f8;
        padding: 15px;
        border-radius: 8px;
        margin-top: 20px;
    }
    
    @media (max-width: 600px) {
       
        .shortcuts-guide {
            padding: 15px;
        }
    }
    </style>
</head>
<body>

<h1>YouTube Downloader</h1>

<form>
    <div class="input-group">
        <input type="text" value="" id="txt_url" placeholder="Enter YouTube URL">
        <select id="sel_type">
            <option value="video">Video</option>
            <option value="audio">Audio Only</option>
        </select>
    </div>
    <input type="button" id="btn_fetch" value="Fetch">
</form>

<div class="loading" id="loading">
    <div class="spinner"></div>
    <p>Loading video info...</p>
</div>

<div id="video-info" class="video-info" style="display: none;">
    <div class="video-title" id="video-title"></div>
    <div class="video-keywords" id="video-keywords"></div>
    <div class="video-description" id="video-description"></div>
</div>
<div id="media-container">
    <video width="100%" controls autoplay muted playsinline>
        <source src="" type="video/mp4">
        <em>Sorry, your browser doesn't support HTML5 video.</em>
    </video>
    <audio controls autoplay style="display: none;">
        <source src="" type="audio/mpeg">
        <em>Sorry, your browser doesn't support HTML5 audio.</em>
    </audio>
    <!-- Added Download Button -->
    <button id="btn_download" class="download-btn" disabled>
        Download This Video/Audio 
        <input type="hidden" id="hidden_download_url" value="">
    </button>
</div>
<!-- Add this section below the video player -->
<div class="shortcuts-guide">
    <h3><i class="icon-shortcuts"></i> YouTube Download Shortcut</h3>
    
    <div class="guide-section">
        <h4>How to Install:</h4>
        <ol class="steps">
            <li>Tap the "Get Shortcut" button below</li>
            <li>Open the link on your iPhone/iPad</li>
            <li>Scroll down and tap <strong>Add Shortcut</strong></li>
            <li>The shortcut will be added to your Shortcuts app</li>
        </ol>
        <a href="https://www.icloud.com/shortcuts/8ac8268b10a549c986141df07195f40c" target="_blank" class="btn-install">
            <img src="https://cdn.iconscout.com/icon/free/png-256/free-my-shortcuts-icon-download-in-svg-png-gif-file-formats--ios-13-ios13-ipad-os-14-pack-user-interface-icons-1575945.png" alt="Shortcuts Icon" width="20">
            Get Shortcut
        </a>
    </div>
    
    <div class="guide-section">
        <h4>How to Use:</h4>
        <ul class="usage">
            <li><strong>From Share Sheet:</strong> Tap Share on any YouTube video → Select this shortcut</li>
            <li><strong>From Shortcuts App:</strong> Open Shortcuts → Tap the shortcut → Enter/paste YouTube URL</li>
            <li><strong>With Siri:</strong> Say "Hey Siri, [Shortcut Name]"</li>
        </ul>
    </div>
    
    
</div>


<script>
    $(function () {
        var video = $("video")[0];
        var audio = $("audio")[0];
        
        // 获取URL参数
        function getUrlParameter(name) {
            name = name.replace(/[\[\]]/g, '\\$&');
            var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
                results = regex.exec(window.location.href);
            if (!results) return null;
            if (!results[2]) return '';
            return decodeURIComponent(results[2].replace(/\+/g, ' '));
        }
        
          // 更新页面SEO信息
        function updateSEO(title, keywords,description) {
            if (title) {
                // 更新页面标题
                document.title = title + ' - YouTube Downloader';
                // 获取现有的meta标签
                var metaKeywords = document.querySelector('meta[name="keywords"]');
                var metaDescription = document.querySelector('meta[name="description"]');
                
                // 修改内容
                metaKeywords.setAttribute('content', keywords);
                metaDescription.setAttribute('content', description);
 
                // 更新视频标题显示
                $("#video-title").text(title);
                $("#video-info").show();
            }
            
            if (keywords) {
                $("#video-keywords").text(keywords);
            }
        }
        
        
        
        // 获取视频/音频信息
        function fetchMediaInfo(url, type) {
            if (!url) return;
            
            $("#txt_url").val(url);
            $("#sel_type").val(type);
            var oThis = $("#btn_fetch");
            oThis.attr('disabled', true);
            $("#loading").show();
            
            // 清除之前的媒体源
            video.pause();
            video.removeAttribute('src');
            video.load();
            audio.pause();
            audio.removeAttribute('src');
            audio.load();
            
            // 显示/隐藏适当的媒体元素
            if (type === 'audio') {
                $("video").hide();
                $("audio").show();
            } else {
                $("video").show();
                $("audio").hide();
            }
            
            $.get('video_info.php', {url: url, type: type}, function (data) {
                console.log(data);
                
                oThis.attr('disabled', false);
                $("#loading").hide();
                
                var links = data['links'];
                var error = data['error'];
                var title = data['title'];
                var keywords = data['keywords'];
                var description = data['description'];
                // 更新SEO信息
                updateSEO(title, keywords,description);
                
                if (error) {
                    alert('Error: ' + error);
                    return;
                }
                
                if (!links || links.length === 0) {
                    alert('No media found!');
                    return;
                }
                
                // 设置隐藏字段的值
                $("#hidden_download_url").val(links[0]);
                // 启用下载按钮（现在由隐藏字段控制）
                $("#btn_download").prop('disabled', false);
                // 使用第一个链接
                var stream_url = 'stream.php?url=' + encodeURIComponent(links[0]);
                
                // 设置媒体源并尝试播放
                if (type === 'audio') {
                    $("audio source").attr('src', stream_url);
                    audio.load();
                    var playPromise = audio.play();
                } else {
                    $("video source").attr('src', stream_url);
                    video.load();
                    var playPromise = video.play();
                }
                
                if (playPromise !== undefined) {
                    playPromise.catch(e => {
                        console.log('Autoplay prevented:', e);
                    });
                }
            }).fail(function() {
                oThis.attr('disabled', false);
                $("#loading").hide();
                alert('Failed to fetch media info. Please try again.');
            });
        }
         // 下载按钮点击事件
        $("#btn_download").click(function() {
            currentStreamUrl = $("#hidden_download_url").val();
            if (!currentStreamUrl) return;

            // 根据当前选择的类型决定文件名
            var type = $("#sel_type").val();
            var filename = type === 'audio' ? 'audio.mp3' : 'video.mp4';
            
            // 创建隐藏的 <a> 标签触发下载
            var a = document.createElement('a');
            a.href = currentStreamUrl;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        });
        // 按钮点击事件
        $("#btn_fetch").click(function () {
            var url = $("#txt_url").val().trim();
            var type = $("#sel_type").val();
            fetchMediaInfo(url, type);
        });
        
        // 检查URL参数
        var urlParam = getUrlParameter('url');
        var typeParam = getUrlParameter('type') || 'video'; // 默认为video
        
        if (urlParam) {
            fetchMediaInfo(urlParam, typeParam);
        }
    });
</script>

</body>
</html>