{"id":586,"date":"2026-03-30T15:45:57","date_gmt":"2026-03-30T07:45:57","guid":{"rendered":"https:\/\/ytubage.com\/?page_id=586"},"modified":"2026-08-12T17:08:19","modified_gmt":"2026-08-12T09:08:19","slug":"ych","status":"publish","type":"page","link":"https:\/\/ytubage.com\/index.php\/mxsp\/ych\/","title":{"rendered":"\u6f14\u5531\u4f1a"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"zztv \" content=\"width=device-width, initial-scale=1.0\">\n    <title>zztv \u6f14\u5531\u4f1a<\/title>\n    <!-- \u5f15\u5165 Tailwind CSS -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <!-- \u5f15\u5165 Font Awesome -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n    <style>\n        \/* \u81ea\u5b9a\u4e49\u6eda\u52a8\u6761\u6837\u5f0f *\/\n        ::-webkit-scrollbar {\n            width: 8px;\n        }\n        ::-webkit-scrollbar-track {\n            background: #f1f1f1; \n        }\n        ::-webkit-scrollbar-thumb {\n            background: #888; \n            border-radius: 4px;\n        }\n        ::-webkit-scrollbar-thumb:hover {\n            background: #555; \n        }\n        \n        \/* \u89c6\u9891\u5bb9\u5668\u6bd4\u4f8b\u4fdd\u6301 *\/\n        .video-container {\n            position: relative;\n            padding-bottom: 56.25%; \/* 16:9 Aspect Ratio *\/\n            height: 0;\n            overflow: hidden;\n            background-color: #000;\n            border-radius: 0.75rem;\n        }\n        .video-container video {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n        }\n\n        \/* \u6a21\u6001\u6846\u52a8\u753b *\/\n        .modal-enter {\n            opacity: 0;\n            transform: scale(0.95);\n        }\n        .modal-enter-active {\n            opacity: 1;\n            transform: scale(1);\n            transition: opacity 300ms ease-out, transform 300ms ease-out;\n        }\n        .modal-exit {\n            opacity: 1;\n            transform: scale(1);\n        }\n        .modal-exit-active {\n            opacity: 0;\n            transform: scale(0.95);\n            transition: opacity 200ms ease-in, transform 200ms ease-in;\n        }\n\n        \/* \u52a0\u8f7d\u9aa8\u67b6\u5c4f\u52a8\u753b *\/\n        @keyframes shimmer {\n            0% { background-position: -1000px 0; }\n            100% { background-position: 1000px 0; }\n        }\n        .skeleton {\n            animation: shimmer 2s infinite linear;\n            background: linear-gradient(to right, #f0f0f0 4%, #e0e0e0 25%, #f0f0f0 36%);\n            background-size: 1000px 100%;\n        }\n    <\/style>\n<\/head>\n<body class=\"bg-gray-50 text-gray-800 font-sans antialiased\">\n\n    <!-- \u5934\u90e8\u5bfc\u822a -->\n    <header class=\"bg-white shadow-sm sticky top-0 z-40\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between\">\n            <div class=\"flex items-center gap-3\">\n                <div class=\"w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center text-white shadow-lg\">\n                    <i class=\"fa-solid fa-play\"><\/i>\n                <\/div>\n                <h1 class=\"text-xl font-bold text-gray-900 tracking-tight\">live performance<span class=\"text-indigo-600\"><\/span><\/h1>\n            <\/div>\n            \n            <!-- \u641c\u7d22\u680f -->\n            <div class=\"hidden md:flex flex-1 max-w-lg mx-8 relative\">\n                <input type=\"text\" id=\"searchInput\" placeholder=\"\u641c\u7d22\u89c6\u9891\u6807\u9898\u6216\u6807\u7b7e...\" \n                    class=\"w-full pl-10 pr-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all shadow-sm\">\n                <i class=\"fa-solid fa-search absolute left-3 top-3 text-gray-400\"><\/i>\n            <\/div>\n\n            <div class=\"flex items-center gap-4\">\n                <button id=\"themeToggle\" class=\"p-2 rounded-full hover:bg-gray-100 text-gray-600 transition-colors\">\n                    <i class=\"fa-solid fa-moon\"><\/i>\n                <\/button>\n                <div class=\"w-8 h-8 rounded-full bg-gradient-to-tr from-indigo-500 to-purple-500 flex items-center justify-center text-white text-xs font-bold cursor-pointer\">\n                    U\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/header>\n\n    <!-- \u4e3b\u5185\u5bb9\u533a -->\n    <main class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8\">\n        \n        <!-- \u7edf\u8ba1\u4e0e\u7b5b\u9009 -->\n        <div class=\"flex flex-col md:flex-row justify-between items-end mb-8 gap-4\">\n            <div>\n                <h2 class=\"text-3xl font-bold text-gray-900 mb-2\">\u6700\u65b0\u4e0a\u4f20<\/h2>\n                <p class=\"text-gray-500\">\u5171\u6536\u5f55 <span id=\"videoCount\" class=\"font-semibold text-indigo-600\">9<\/span> \u4e2a\u9ad8\u6e05\u89c6\u9891\u8d44\u6e90<\/p>\n            <\/div>\n            \n            <div class=\"flex gap-2 overflow-x-auto pb-2 w-full md:w-auto no-scrollbar\">\n                <button class=\"filter-btn active px-4 py-1.5 rounded-full text-sm font-medium bg-indigo-600 text-white shadow-md transition-all\" data-filter=\"all\">\u5168\u90e8<\/button>\n                <button class=\"filter-btn px-4 py-1.5 rounded-full text-sm font-medium bg-white text-gray-600 border border-gray-200 hover:bg-gray-50 transition-all\" data-filter=\"party\">live performance<\/button>\n            <\/div>  \n        <\/div>\n\n        <!-- \u89c6\u9891\u7f51\u683c -->\n        <div id=\"videoGrid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\">\n            <!-- \u89c6\u9891\u5361\u7247\u5c06\u901a\u8fc7 JS \u52a8\u6001\u751f\u6210 -->\n        <\/div>\n\n        <!-- \u7a7a\u72b6\u6001\u63d0\u793a -->\n        <div id=\"emptyState\" class=\"hidden flex-col items-center justify-center py-20 text-center\">\n            <div class=\"w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mb-4\">\n                <i class=\"fa-solid fa-film text-3xl text-gray-400\"><\/i>\n            <\/div>\n            <h3 class=\"text-lg font-medium text-gray-900\">\u672a\u627e\u5230\u76f8\u5173\u89c6\u9891<\/h3>\n            <p class=\"text-gray-500 mt-1\">\u5c1d\u8bd5\u8c03\u6574\u641c\u7d22\u5173\u952e\u8bcd\u6216\u7b5b\u9009\u6761\u4ef6<\/p>\n            <button onclick=\"resetFilters()\" class=\"mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors\">\n                \u6e05\u9664\u7b5b\u9009\n            <\/button>\n        <\/div>\n    <\/main>\n\n    <!-- \u9875\u811a -->\n    <footer class=\"bg-white border-t border-gray-200 mt-12 py-8\">\n        <div class=\"max-w-7xl mx-auto px-4 text-center text-gray-500 text-sm\">\n            <p>&copy; 2026 zztv live performance.\u9752\u6625\u7eaa\u5ff5\uff0c\u5f53\u719f\u6089\u7684\u65cb\u5f8b\u54cd\u8d77\uff0c\u8033\u8fb9\u5e26\u7740\u4e07\u4eba\u5171\u9e23\u7684\u58f0\u54cd\uff0c\u6211\u624d\u660e\u767d\uff0c\u4e70\u7684\u4ece\u6765\u4e0d\u662f\u4e00\u5f20\u95e8\u7968\uff0c\u800c\u662f\u548c\u9752\u6625\u4e45\u522b\u91cd\u9022\u7684\u5165\u573a\u5238\u3002\u51e0\u4e07\u4eba\u4e00\u8d77\u5927\u5408\u5531\u7684\u65f6\u523b\uff0c\u6ca1\u6709\u4eba\u5728\u610f\u4f60\u662f\u8c01\u3001\u6765\u81ea\u54ea\u91cc\uff0c\u6211\u4eec\u53ea\u662f\u88ab\u540c\u4e00\u6bb5\u9752\u6625\u8bb0\u5fc6\u4e32\u8054\u8d77\u6765\u7684\u4eba\uff01<\/p>\n        <\/div>\n    <\/footer>\n\n    <!-- \u89c6\u9891\u64ad\u653e\u6a21\u6001\u6846 (Lightbox) -->\n    <div id=\"videoModal\" class=\"fixed inset-0 z-50 hidden overflow-y-auto\" aria-labelledby=\"modal-title\" role=\"dialog\" aria-modal=\"true\">\n        <!-- \u80cc\u666f\u906e\u7f69 -->\n        <div class=\"fixed inset-0 bg-gray-900 bg-opacity-90 transition-opacity backdrop-blur-sm\" id=\"modalBackdrop\"><\/div>\n\n        <div class=\"flex min-h-full items-center justify-center p-4 text-center sm:p-0\">\n            <div class=\"relative transform overflow-hidden rounded-2xl bg-black text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-5xl border border-gray-800\">\n                \n                <!-- \u6a21\u6001\u6846\u5934\u90e8 -->\n                <div class=\"absolute top-0 right-0 pt-4 pr-4 z-10\">\n                    <button type=\"button\" id=\"closeModalBtn\" class=\"rounded-full bg-black\/50 p-2 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors\">\n                        <span class=\"sr-only\">Close<\/span>\n                        <i class=\"fa-solid fa-xmark text-xl w-6 h-6 flex items-center justify-center\"><\/i>\n                    <\/button>\n                <\/div>\n\n                <!-- \u89c6\u9891\u64ad\u653e\u5668\u533a\u57df -->\n                <div class=\"video-container bg-black aspect-video\">\n                    <video id=\"mainPlayer\" controls class=\"w-full h-full\" preload=\"metadata\">\n                        <source src=\"\" type=\"video\/mp4\">\n                        \u60a8\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301 HTML5 \u89c6\u9891\u64ad\u653e\u3002\n                    <\/video>\n                <\/div>\n\n                <!-- \u89c6\u9891\u4fe1\u606f -->\n                <div class=\"bg-gray-900 px-6 py-4 border-t border-gray-800\">\n                    <h3 id=\"modalTitle\" class=\"text-xl font-semibold text-white mb-1\">\u89c6\u9891<\/h3>\n                    <div class=\"flex items-center justify-between text-sm text-gray-400\">\n                        <div class=\"flex items-center gap-4\">\n                            <span id=\"modalCategory\"><i class=\"fa-solid fa-tag mr-1\"><\/i> \u5206\u7c7b<\/span>\n                            <span id=\"modalDuration\"><i class=\"fa-regular fa-clock mr-1\"><\/i> \u65f6\u957f<\/span>\n                        <\/div>\n                        <div class=\"flex gap-3\">\n                            <button class=\"hover:text-white transition-colors\"><i class=\"fa-regular fa-heart\"><\/i> \u6536\u85cf<\/button>\n                            <button class=\"hover:text-white transition-colors\"><i class=\"fa-solid fa-share-nodes\"><\/i> \u5206\u4eab<\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ \u6a21\u62df\u89c6\u9891\u6570\u636e (9\u4e2a)\n        \/\/ \u4f7f\u7528 Picsum \u56fe\u7247\u4f5c\u4e3a\u5c01\u9762\uff0c\u4f7f\u7528\u516c\u5171\u6d4b\u8bd5\u89c6\u9891\u6e90\n        const videoData = [\n            { id: 1, title: \"\u8d70\u8fdb\u539f\u58f0\u5e26\", category: \"party\", duration: \"3:10:15\", src: \"https:\/\/hkzyz.ytubage.com\/2026\/ych\/2026ysd\/zjysdcdz.mp4\", thumb: \"https:\/\/hkzyz.ytubage.com\/2026\/ych\/2026ysd\/1.jpg\" },\n            { id: 2, title: \"\u65b0\u767d\u5357\u4eac\u573a\", category: \"party\", duration: \"2:01:45\", src: \"https:\/\/hkzyz.ytubage.com\/2026\/ych\/njz.mp4\", thumb: \"https:\/\/hkzyz.ytubage.com\/2026\/ych\/2026ysd\/2.jpg\" },\n            { id: 3, title: \"\u65b0\u767d\u676d\u5dde720\", category: \"party\", duration: \"2:11:04\", src: \"https:\/\/hkzyz.ytubage.com\/2026\/ych\/720dyc.mp4\", thumb: \"https:\/\/hkzyz.ytubage.com\/2026\/ych\/2026ysd\/3.jpg\" },\n            { id: 4, title: \"\u65b0\u767d\u676d\u5dde721\", category: \"party\", duration: \"2:54:48\", src: \"https:\/\/hkzyz.ytubage.com\/2026\/ych\/721drc.mp4\", thumb: \"https:\/\/hkzyz.ytubage.com\/2026\/ych\/2026ysd\/4.jpg\" },\n            { id: 5, title: \"\u65b0\u767d\u9547\u6c5f\u573a\", category: \"party\", duration: \"2:59:58\", src: \"https:\/\/hkzyz.ytubage.com\/2026\/ych\/zjc01.mp4\", thumb: \"https:\/\/hkzyz.ytubage.com\/2026\/ych\/2026ysd\/5.png\" },\n            { id: 6, title: \"\u65b0\u767d\u6210\u90fd523\", category: \"party\", duration: \"2:36:56\", src: \"https:\/\/hkzyz.ytubage.com\/2026\/ych\/523.mp4\", thumb: \"https:\/\/hkzyz.ytubage.com\/2026\/ych\/2026ysd\/6.png\" },\n            { id: 7, title: \"\u65b0\u767d\u6210\u90fd524\", category: \"party\", duration: \"2:41:48\", src: \"https:\/\/hkzyz.ytubage.com\/2026\/ych\/524.mp4\", thumb: \"https:\/\/hkzyz.ytubage.com\/2026\/ych\/2026ysd\/7.jpg\" },\n            { id: 8, title: \"\u65b0\u767d\u82cf\u5dde712\", category: \"party\", duration: \"2:49:55\", src: \"https:\/\/hkzyz.ytubage.com\/2026\/ych\/sz01.mp4\", thumb: \"https:\/\/hkzyz.ytubage.com\/2026\/ych\/2026ysd\/8.png\" },\n            { id: 9, title: \"\u829d\u59d0\u751f\u65e5\u6f14\u5531\u4f1a\", category: \"party\", duration: \"1:53:13\", src: \"https:\/\/hkzyz.ytubage.com\/50ych.mp4\", thumb: \"https:\/\/hkzyz.ytubage.com\/2026\/ych\/2026ysd\/9.jpg\" }\n        ];\n\n        \/\/ DOM \u5143\u7d20\n        const videoGrid = document.getElementById('videoGrid');\n        const searchInput = document.getElementById('searchInput');\n        const filterBtns = document.querySelectorAll('.filter-btn');\n        const emptyState = document.getElementById('emptyState');\n        const videoCountEl = document.getElementById('videoCount');\n        \n        \/\/ \u6a21\u6001\u6846\u5143\u7d20\n        const modal = document.getElementById('videoModal');\n        const modalBackdrop = document.getElementById('modalBackdrop');\n        const closeModalBtn = document.getElementById('closeModalBtn');\n        const mainPlayer = document.getElementById('mainPlayer');\n        const modalTitle = document.getElementById('modalTitle');\n        const modalCategory = document.getElementById('modalCategory');\n        const modalDuration = document.getElementById('modalDuration');\n\n        \/\/ \u521d\u59cb\u5316\n        document.addEventListener('DOMContentLoaded', () => {\n            renderVideos(videoData);\n            setupEventListeners();\n        });\n\n        \/\/ \u6e32\u67d3\u89c6\u9891\u5361\u7247\n        function renderVideos(videos) {\n            videoGrid.innerHTML = '';\n            videoCountEl.textContent = videos.length;\n\n            if (videos.length === 0) {\n                emptyState.classList.remove('hidden');\n                emptyState.classList.add('flex');\n                return;\n            } else {\n                emptyState.classList.add('hidden');\n                emptyState.classList.remove('flex');\n            }\n\n            videos.forEach((video, index) => {\n                const card = document.createElement('div');\n                card.className = 'group bg-white rounded-xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 flex flex-col';\n                card.style.animation = `fadeIn 0.5s ease-out ${index * 0.05}s backwards`;\n                \n                card.innerHTML = `\n                    <div class=\"relative aspect-video overflow-hidden cursor-pointer\" onclick=\"openVideo(${video.id})\">\n                        <img decoding=\"async\" src=\"${video.thumb}\" alt=\"${video.title} \u5c01\u9762\u56fe\" class=\"w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500\">\n                        <div class=\"absolute inset-0 bg-black\/20 group-hover:bg-black\/10 transition-colors\"><\/div>\n                        <div class=\"absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300\">\n                            <div class=\"w-14 h-14 bg-white\/90 rounded-full flex items-center justify-center shadow-lg backdrop-blur-sm transform scale-90 group-hover:scale-100 transition-transform\">\n                                <i class=\"fa-solid fa-play text-indigo-600 text-xl ml-1\"><\/i>\n                            <\/div>\n                        <\/div>\n                        <span class=\"absolute bottom-2 right-2 bg-black\/70 text-white text-xs px-2 py-1 rounded font-medium backdrop-blur-sm\">\n                            ${video.duration}\n                        <\/span>\n                        <span class=\"absolute top-2 left-2 bg-indigo-600\/90 text-white text-xs px-2 py-1 rounded font-medium backdrop-blur-sm uppercase tracking-wider\">\n                            ${video.category}\n                        <\/span>\n                    <\/div>\n                    <div class=\"p-4 flex-1 flex flex-col\">\n                        <h3 class=\"font-bold text-gray-900 text-lg mb-1 line-clamp-1 group-hover:text-indigo-600 transition-colors\" title=\"${video.title}\">${video.title}<\/h3>\n                        <p class=\"text-gray-500 text-sm mb-4 line-clamp-2 flex-1\">\u51e0\u4e07\u4eba\u4e00\u8d77\u5927\u5408\u5531\uff0c\u88ab\u540c\u4e00\u6bb5\u9752\u6625\u8bb0\u5fc6\u4e32\u8054\u3002<\/p>\n                        <div class=\"flex items-center justify-between mt-auto pt-4 border-t border-gray-100\">\n                            <div class=\"flex items-center gap-2 text-xs text-gray-400\">\n                                <i class=\"fa-regular fa-eye\"><\/i> ${(Math.random() * 10 + 1).toFixed(1)}k\n                                <span class=\"mx-1\">\u2022<\/span>\n                                <i class=\"fa-regular fa-thumbs-up\"><\/i> ${Math.floor(Math.random() * 500)}\n                            <\/div>\n                            <button onclick=\"openVideo(${video.id})\" class=\"text-indigo-600 text-sm font-medium hover:text-indigo-800 transition-colors\">\n                                \u7acb\u5373\u89c2\u770b <i class=\"fa-solid fa-arrow-right ml-1 text-xs\"><\/i>\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                `;\n                videoGrid.appendChild(card);\n            });\n        }\n\n        \/\/ \u8bbe\u7f6e\u4e8b\u4ef6\u76d1\u542c\n        function setupEventListeners() {\n            \/\/ \u641c\u7d22\u529f\u80fd\n            searchInput.addEventListener('input', (e) => {\n                const term = e.target.value.toLowerCase();\n                filterVideos(term, currentCategory);\n            });\n\n            \/\/ \u5206\u7c7b\u7b5b\u9009\n            filterBtns.forEach(btn => {\n                btn.addEventListener('click', () => {\n                    \/\/ \u66f4\u65b0\u6309\u94ae\u72b6\u6001\n                    filterBtns.forEach(b => {\n                        b.classList.remove('bg-indigo-600', 'text-white', 'shadow-md');\n                        b.classList.add('bg-white', 'text-gray-600', 'border', 'border-gray-200');\n                    });\n                    btn.classList.remove('bg-white', 'text-gray-600', 'border', 'border-gray-200');\n                    btn.classList.add('bg-indigo-600', 'text-white', 'shadow-md');\n\n                    currentCategory = btn.dataset.filter;\n                    filterVideos(searchInput.value.toLowerCase(), currentCategory);\n                });\n            });\n\n            \/\/ \u6a21\u6001\u6846\u5173\u95ed\n            closeModalBtn.addEventListener('click', closeVideo);\n            modalBackdrop.addEventListener('click', closeVideo);\n            document.addEventListener('keydown', (e) => {\n                if (e.key === 'Escape' && !modal.classList.contains('hidden')) {\n                    closeVideo();\n                }\n            });\n        }\n\n        let currentCategory = 'all';\n\n        \/\/ \u7b5b\u9009\u903b\u8f91\n        function filterVideos(searchTerm, category) {\n            const filtered = videoData.filter(video => {\n                const matchesSearch = video.title.toLowerCase().includes(searchTerm) || \n                                      video.category.toLowerCase().includes(searchTerm);\n                const matchesCategory = category === 'all' || video.category === category;\n                return matchesSearch && matchesCategory;\n            });\n            renderVideos(filtered);\n        }\n\n        function resetFilters() {\n            searchInput.value = '';\n            currentCategory = 'all';\n            filterBtns.forEach(b => {\n                b.classList.remove('bg-indigo-600', 'text-white', 'shadow-md');\n                b.classList.add('bg-white', 'text-gray-600', 'border', 'border-gray-200');\n            });\n            filterBtns.classList.remove('bg-white', 'text-gray-600', 'border', 'border-gray-200');\n            filterBtns.classList.add('bg-indigo-600', 'text-white', 'shadow-md');\n            renderVideos(videoData);\n        }\n\n        \/\/ \u6253\u5f00\u89c6\u9891\u6a21\u6001\u6846\n        window.openVideo = function(id) {\n            const video = videoData.find(v => v.id === id);\n            if (!video) return;\n\n            \/\/ \u8bbe\u7f6e\u5185\u5bb9\n            modalTitle.textContent = video.title;\n            modalCategory.innerHTML = `<i class=\"fa-solid fa-tag mr-1\"><\/i> ${video.category.charAt(0).toUpperCase() + video.category.slice(1)}`;\n            modalDuration.innerHTML = `<i class=\"fa-regular fa-clock mr-1\"><\/i> ${video.duration}`;\n            \n            \/\/ \u8bbe\u7f6e\u89c6\u9891\u6e90\u5e76\u64ad\u653e\n            mainPlayer.src = video.src;\n            mainPlayer.load();\n            \n            \/\/ \u663e\u793a\u6a21\u6001\u6846\n            modal.classList.remove('hidden');\n            \/\/ \u5f3a\u5236\u91cd\u7ed8\u4ee5\u89e6\u53d1\u52a8\u753b\n            void modal.offsetWidth; \n            \n            \/\/ \u81ea\u52a8\u64ad\u653e (\u6ce8\u610f\uff1a\u6d4f\u89c8\u5668\u53ef\u80fd\u963b\u6b62\u5e26\u58f0\u97f3\u7684\u81ea\u52a8\u64ad\u653e\uff0c\u901a\u5e38\u9700\u8981\u5148\u9759\u97f3\u6216\u7528\u6237\u4ea4\u4e92)\n            mainPlayer.play().catch(e => {\n                console.warn(\"Auto-play prevented:\", e);\n                \/\/ \u5982\u679c\u81ea\u52a8\u64ad\u653e\u5931\u8d25\uff0c\u663e\u793a\u64ad\u653e\u6309\u94ae\u63d0\u793a\u7528\u6237\u70b9\u51fb\n            });\n        };\n\n        \/\/ \u5173\u95ed\u89c6\u9891\u6a21\u6001\u6846\n        function closeVideo() {\n            mainPlayer.pause();\n            mainPlayer.src = \"\"; \/\/ \u6e05\u7a7a\u6e90\u4ee5\u505c\u6b62\u7f13\u51b2\n            modal.classList.add('hidden');\n        }\n\n        \/\/ \u6dfb\u52a0\u7b80\u5355\u7684\u6de1\u5165\u52a8\u753b\u5173\u952e\u5e27\n        const styleSheet = document.createElement(\"style\");\n        styleSheet.innerText = `\n            @keyframes fadeIn {\n                from { opacity: 0; transform: translateY(20px); }\n                to { opacity: 1; transform: translateY(0); }\n            }\n        `;\n        document.head.appendChild(styleSheet);\n\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>zztv \u6f14\u5531\u4f1a live performance U \u6700\u65b0\u4e0a\u4f20 \u5171\u6536\u5f55 9 \u4e2a\u9ad8\u6e05\u89c6\u9891\u8d44\u6e90 \u5168\u90e8 live  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":229,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-586","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/pages\/586","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/comments?post=586"}],"version-history":[{"count":34,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/pages\/586\/revisions"}],"predecessor-version":[{"id":2758,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/pages\/586\/revisions\/2758"}],"up":[{"embeddable":true,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/pages\/229"}],"wp:attachment":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/media?parent=586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}