\u829d\u829d\u77ed\u89c6\u9891<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \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 *\/\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\u6837\u5f0f *\/\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: 12px;\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n }\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 \/* \u52a0\u8f7d\u52a8\u753b *\/\n .loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #3b82f6;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 10;\n display: none;\n }\n\n @keyframes spin {\n 0% { transform: translate(-50%, -50%) rotate(0deg); }\n 100% { transform: translate(-50%, -50%) rotate(360deg); }\n }\n\n \/* \u5206\u9875\u6309\u94ae\u6fc0\u6d3b\u72b6\u6001 *\/\n .page-btn.active {\n background-color: #3b82f6;\n color: white;\n border-color: #3b82f6;\n }\n \n \/* \u89c6\u9891\u5361\u7247\u60ac\u505c\u6548\u679c *\/\n .video-card {\n transition: all 0.3s ease;\n }\n .video-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 text-gray-800 font-sans min-h-screen flex flex-col\">\n\n \n <header class=\"bg-white shadow-sm sticky top-0 z-50\">\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 <i class=\"fa-solid fa-play-circle text-blue-600 text-2xl\"><\/i>\n <h1 class=\"text-xl font-bold text-gray-900 tracking-tight\">\u6211\u7684\u4e3b\u573a<\/h1>\n <\/div>\n <nav class=\"hidden md:flex space-x-8\">\n <a href=\"#\" class=\"text-blue-600 font-medium border-b-2 border-blue-600 px-1 pt-1\">\u641e\u7b11<\/a>\n <a href=\"#\" class=\"text-gray-500 hover:text-gray-900 font-medium px-1 pt-1 transition\">\u73b0\u4ee3<\/a>\n <a href=\"#\" class=\"text-gray-500 hover:text-gray-900 font-medium px-1 pt-1 transition\">\u53e4\u4ee3<\/a>\n <\/nav>\n <div class=\"flex items-center gap-4\">\n <button class=\"p-2 text-gray-400 hover:text-gray-600 transition\">\n <i class=\"fa-solid fa-search\"><\/i>\n <\/button>\n <div class=\"h-8 w-8 rounded-full bg-gradient-to-tr from-blue-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 \n <main class=\"flex-grow max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 w-full\">\n \n \n <section class=\"mb-12\">\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\n \n <div class=\"lg:col-span-2\">\n <div class=\"video-container bg-black relative group\">\n <div id=\"loader\" class=\"loader\"><\/div>\n <video id=\"main-player\" controls preload=\"metadata\" poster=\"https:\/\/hkzyz.ytubage.com\/2026\/dsp\/zz1\/01\/mp4\/76.mp4\">\n \u60a8\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301 HTML5 \u89c6\u9891\u3002\n <\/video>\n <\/div>\n <div class=\"mt-4\">\n <h2 id=\"video-title\" class=\"text-2xl font-bold text-gray-900 mb-2\">\u8bf7\u9009\u62e9\u4e00\u4e2a\u89c6\u9891\u64ad\u653e<\/h2>\n <div class=\"flex items-center justify-between text-sm text-gray-500\">\n <div class=\"flex items-center gap-4\">\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-eye\"><\/i> <span id=\"view-count\">0<\/span> \u6b21\u89c2\u770b<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-thumbs-up\"><\/i> <span id=\"like-count\">0<\/span> \u70b9\u8d5e<\/span>\n <\/div>\n <div class=\"flex gap-2\">\n <button class=\"px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full transition text-gray-700\"><i class=\"fa-solid fa-share-nodes mr-1\"><\/i> \u5206\u4eab<\/button>\n <button class=\"px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full transition text-gray-700\"><i class=\"fa-solid fa-plus mr-1\"><\/i> \u7a0d\u540e\u770b<\/button>\n <\/div>\n <\/div>\n <p id=\"video-desc\" class=\"mt-4 text-gray-600 leading-relaxed bg-white p-4 rounded-lg border border-gray-100\">\n \u70b9\u51fb\u4e0b\u65b9\u7684\u89c6\u9891\u5217\u8868\u4ee5\u5f00\u59cb\u64ad\u653e\u3002\u672c\u9875\u9762\u652f\u6301\u5206\u9875\u6d4f\u89c8\uff0c\u6d41\u7545\u5207\u6362\u4e0d\u540c\u89c6\u9891\u5185\u5bb9\u3002\n <\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"lg:col-span-1\">\n <h3 class=\"text-lg font-semibold mb-4 text-gray-800\">\u63a5\u4e0b\u6765\u64ad\u653e<\/h3>\n <div id=\"side-list\" class=\"space-y-4 max-h-[600px] overflow-y-auto pr-2\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section>\n <div class=\"flex items-center justify-between mb-6\">\n <h3 class=\"text-xl font-bold text-gray-900\">\u5168\u90e8\u89c6\u9891<\/h3>\n <div class=\"flex gap-2\">\n <select id=\"sort-select\" class=\"bg-white border border-gray-300 text-gray-700 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2\">\n <option value=\"newest\">\u6700\u65b0\u53d1\u5e03<\/option>\n <option value=\"popular\">\u6700\u591a\u89c2\u770b<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n \n <div id=\"video-grid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-8\">\n \n <\/div>\n\n \n <div class=\"flex items-center justify-center mt-8\" id=\"pagination-container\">\n \n <\/div>\n <\/section>\n <\/main>\n\n \n <footer class=\"bg-white border-t border-gray-200 mt-auto\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8\">\n <div class=\"md:flex md:items-center md:justify-between\">\n <div class=\"flex justify-center md:justify-start space-x-6 md:order-2\">\n <a href=\"#\" class=\"text-gray-400 hover:text-gray-500\">\n <span class=\"sr-only\">zztv by you<\/span>\n <i class=\"fa-brands zyz text-xl\"><\/i>\n <\/a>\n <a href=\"#\" class=\"text-gray-400 hover:text-gray-500\">\n <span class=\"sr-only\">Instagram<\/span>\n <i class=\"fa-brands fa-instagram text-xl\"><\/i>\n <\/a>\n <a href=\"#\" class=\"text-gray-400 hover:text-gray-500\">\n <span class=\"sr-only\">zztv<\/span>\n <i class=\"fa-brands fa-twitter text-xl\"><\/i>\n <\/a>\n <\/div>\n <div class=\"mt-8 md:mt-0 md:order-1\">\n <p class=\"text-center text-base text-gray-400\">© 2026 0702.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/footer>\n\n <script>\n \/\/ \u89c6\u9891\u6570\u636e\n const generateVideos = () => {\n const videos = [];\n const categories = ['\u7b11\u54c8\u54c8', '\u6253\u5996\u602a', '\u795e\u4ed9', '\u829d\u7ae5', '\u840c\u5ba0'];\n for (let i = 1; i<= 76; i++) {\n \/\/ \u4fee\u6b63\uff1a\u4f7f\u7528 (i-1) \u8ba9\u7b2c\u4e00\u4e2a\u89c6\u9891\u5bf9\u5e94\u7b2c\u4e00\u4e2a\u5206\u7c7b\n const category = categories[(i - 1) % categories.length];\n videos.push({\n id: i,\n title: `\u7cbe\u5f69\u89c6\u9891${i} - ${category}`,\n desc: `\u8fd9\u662f\u5173\u4e8e${category}\u7684\u7b2c${i}\u4e2a\u89c6\u9891\u7247\u6bb5`,\n thumbnail:`https:\/\/hkzyz.ytubage.com\/2026\/dsp\/zz1\/01\/img\/${i}.jpg`,\n src: `https:\/\/hkzyz.ytubage.com\/2026\/dsp\/zz1\/01\/mp4\/${i}.mp4`,\n views: Math.floor(Math.random() * 10000) + 500,\n likes: Math.floor(Math.random() * 1000) + 50,\n duration: `${Math.floor(Math.random() * 10) + 1}:${String(Math.floor(Math.random() * 50) + 10).padStart(2, '0')}`\n });\n }\n return videos;\n };\n\n const allVideos = generateVideos();\n const ITEMS_PER_PAGE = 10;\n let currentPage = 1;\n let currentVideoIndex = 0; \/\/ \u5f53\u524d\u6b63\u5728\u64ad\u653e\u7684\u89c6\u9891\u5728 allVideos \u4e2d\u7684\u7d22\u5f15\n\n \/\/ DOM \u5143\u7d20\n const mainPlayer = document.getElementById('main-player');\n const videoTitle = document.getElementById('video-title');\n const videoDesc = document.getElementById('video-desc');\n const viewCount = document.getElementById('view-count');\n const likeCount = document.getElementById('like-count');\n const videoGrid = document.getElementById('video-grid');\n const paginationContainer = document.getElementById('pagination-container');\n const sideList = document.getElementById('side-list');\n const loader = document.getElementById('loader');\n\n \/\/ \u521d\u59cb\u5316\n function init() {\n renderPage(1);\n \/\/ \u9ed8\u8ba4\u64ad\u653e\u7b2c\u4e00\u4e2a\u89c6\u9891\n loadVideo(0);\n }\n\n \/\/ \u6e32\u67d3\u6307\u5b9a\u9875\u7801\u7684\u5185\u5bb9\n function renderPage(page) {\n currentPage = page;\n videoGrid.innerHTML = '';\n \n const start = (page - 1) * ITEMS_PER_PAGE;\n const end = start + ITEMS_PER_PAGE;\n const pageVideos = allVideos.slice(start, end);\n\n pageVideos.forEach((video, index) => {\n const globalIndex = start + index;\n const card = document.createElement('div');\n card.className = 'video-card bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100 cursor-pointer group';\n card.onclick = () => {\n loadVideo(globalIndex);\n window.scrollTo({ top: 0, behavior: 'smooth' });\n };\n\n card.innerHTML = `\n <div class=\"relative aspect-video overflow-hidden\">\n <img decoding=\"async\" src=\"${video.thumbnail}\" alt=\"${video.title}\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-110\">\n <div class=\"absolute bottom-2 right-2 bg-black\/70 text-white text-xs px-2 py-1 rounded font-medium\">\n ${video.duration}\n <\/div>\n <div class=\"absolute inset-0 bg-black\/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center\">\n <i class=\"fa-solid fa-play text-white text-4xl drop-shadow-lg\"><\/i>\n <\/div>\n <\/div>\n <div class=\"p-4\">\n <h4 class=\"font-bold text-gray-900 line-clamp-2 mb-2 group-hover:text-blue-600 transition-colors\">${video.title}<\/h4>\n <div class=\"flex items-center justify-between text-xs text-gray-500\">\n <span>${formatNumber(video.views)} \u6b21\u89c2\u770b<\/span>\n <span>2\u5929\u524d<\/span>\n <\/div>\n <\/div>\n `;\n videoGrid.appendChild(card);\n });\n\n renderPagination();\n renderSideList(start, end);\n }\n\n \/\/ \u6e32\u67d3\u4fa7\u8fb9\u5217\u8868\uff08\u663e\u793a\u5f53\u524d\u9875\u7684\u89c6\u9891\uff0c\u9ad8\u4eae\u5f53\u524d\u64ad\u653e\u7684\uff09\n function renderSideList(start, end) {\n sideList.innerHTML = '';\n const pageVideos = allVideos.slice(start, end);\n \n pageVideos.forEach((video, index) => {\n const globalIndex = start + index;\n const isActive = globalIndex === currentVideoIndex;\n \n const item = document.createElement('div');\n item.className = `flex gap-3 p-2 rounded-lg cursor-pointer transition ${isActive ? 'bg-blue-50 border border-blue-100' : 'hover:bg-gray-50'}`;\n item.onclick = () => loadVideo(globalIndex);\n\n item.innerHTML = `\n <div class=\"relative w-32 h-20 flex-shrink-0 rounded-md overflow-hidden bg-gray-200\">\n <img decoding=\"async\" src=\"${video.thumbnail}\" alt=\"${video.title}\" class=\"w-full h-full object-cover\">\n ${isActive ? '<div class=\"absolute inset-0 bg-blue-500\/20 flex items-center justify-center\"><i class=\"fa-solid fa-volume-high text-white\"><\/i><\/div>' : ''}\n <\/div>\n <div class=\"flex-1 min-w-0\">\n <h5 class=\"text-sm font-semibold text-gray-900 line-clamp-2 mb-1 ${isActive ? 'text-blue-700' : ''}\">${video.title}<\/h5>\n <p class=\"text-xs text-gray-500 truncate\">zztv<\/p>\n <p class=\"text-xs text-gray-400 mt-1\">${formatNumber(video.views)} \u6b21\u89c2\u770b<\/p>\n <\/div>\n `;\n sideList.appendChild(item);\n });\n }\n\n \/\/ \u6e32\u67d3\u5206\u9875\u6309\u94ae\n function renderPagination() {\n paginationContainer.innerHTML = '';\n const totalPages = Math.ceil(allVideos.length \/ ITEMS_PER_PAGE);\n \n if (totalPages <= 1) return;\n\n const createBtn = (text, page, isActive = false, isDisabled = false) => {\n const btn = document.createElement('button');\n btn.className = `page-btn mx-1 px-3 py-2 rounded-lg border text-sm font-medium transition ${\n isActive \n ? 'active' \n : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'\n } ${isDisabled ? 'opacity-50 cursor-not-allowed' : ''}`;\n btn.innerHTML = text;\n if (!isDisabled) {\n btn.onclick = () => renderPage(page);\n }\n return btn;\n };\n\n \/\/ \u4e0a\u4e00\u9875\n paginationContainer.appendChild(createBtn('<i class=\"fa-solid fa-chevron-left\"><\/i>', currentPage - 1, false, currentPage === 1));\n\n \/\/ \u9875\u7801\u903b\u8f91\n let startPage = Math.max(1, currentPage - 2);\n let endPage = Math.min(totalPages, currentPage + 2);\n\n if (currentPage <= 3) {\n endPage = Math.min(5, totalPages);\n } else if (currentPage >= totalPages - 2) {\n startPage = Math.max(1, totalPages - 4);\n }\n\n if (startPage > 1) {\n paginationContainer.appendChild(createBtn('1', 1));\n if (startPage > 2) {\n const span = document.createElement('span');\n span.className = 'mx-1 text-gray-400';\n span.innerText = '...';\n paginationContainer.appendChild(span);\n }\n }\n\n for (let i = startPage; i <= endPage; i++) {\n paginationContainer.appendChild(createBtn(i, i, i === currentPage));\n }\n\n if (endPage < totalPages) {\n if (endPage < totalPages - 1) {\n const span = document.createElement('span');\n span.className = 'mx-1 text-gray-400';\n span.innerText = '...';\n paginationContainer.appendChild(span);\n }\n paginationContainer.appendChild(createBtn(totalPages, totalPages));\n }\n\n \/\/ \u4e0b\u4e00\u9875\n paginationContainer.appendChild(createBtn('<i class=\"fa-solid fa-chevron-right\"><\/i>', currentPage + 1, false, currentPage === totalPages));\n }\n\n \/\/ \u52a0\u8f7d\u89c6\u9891\u5230\u4e3b\u64ad\u653e\u5668\n function loadVideo(index) {\n if (index < 0 || index >= allVideos.length) return;\n \n currentVideoIndex = index;\n const video = allVideos[index];\n\n \/\/ \u663e\u793a\u52a0\u8f7d\u5668\n loader.style.display = 'block';\n mainPlayer.pause();\n\n \/\/ \u66f4\u65b0\u6e90\n mainPlayer.src = video.src;\n mainPlayer.poster = video.thumbnail;\n \n \/\/ \u66f4\u65b0\u6587\u672c\u4fe1\u606f\n videoTitle.innerText = video.title;\n videoDesc.innerText = video.desc;\n viewCount.innerText = formatNumber(video.views);\n likeCount.innerText = formatNumber(video.likes);\n\n \/\/ \u91cd\u65b0\u6e32\u67d3\u4fa7\u8fb9\u680f\u4ee5\u66f4\u65b0\u9ad8\u4eae\u72b6\u6001\uff08\u5982\u679c\u5f53\u524d\u9875\u5305\u542b\u8be5\u89c6\u9891\uff09\n const start = (currentPage - 1) * ITEMS_PER_PAGE;\n const end = start + ITEMS_PER_PAGE;\n if (index >= start && index < end) {\n renderSideList(start, end);\n } else {\n \/\/ \u5982\u679c\u70b9\u51fb\u7684\u89c6\u9891\u4e0d\u5728\u5f53\u524d\u9875\uff0c\u53ef\u80fd\u9700\u8981\u8df3\u8f6c\u5230\u8be5\u89c6\u9891\u6240\u5728\u9875\uff0c\u6216\u8005\u4ec5\u66f4\u65b0\u4fa7\u8fb9\u680f\u4e3a\u201c\u5176\u4ed6\u201d\n \/\/ \u8fd9\u91cc\u4e3a\u4e86\u7b80\u5355\uff0c\u6211\u4eec\u4fdd\u6301\u5f53\u524d\u5206\u9875\u4e0d\u53d8\uff0c\u4f46\u4fa7\u8fb9\u680f\u53ef\u80fd\u4e0d\u663e\u793a\u5f53\u524d\u64ad\u653e\u9879\uff0c\u9664\u975e\u6211\u4eec\u5f3a\u5236\u5237\u65b0\u4fa7\u8fb9\u680f\u903b\u8f91\n \/\/ \u66f4\u597d\u7684\u4f53\u9a8c\u662f\uff1a\u5982\u679c\u70b9\u51fb\u7f51\u683c\u4e2d\u7684\u89c6\u9891\uff0c\u81ea\u52a8\u8df3\u8f6c\u5230\u8be5\u89c6\u9891\u6240\u5728\u7684\u5206\u9875\n const targetPage = Math.floor(index \/ ITEMS_PER_PAGE) + 1;\n if (targetPage !== currentPage) {\n renderPage(targetPage);\n }\n }\n\n \/\/ \u64ad\u653e\u5904\u7406\n mainPlayer.onloadeddata = () => {\n loader.style.display = 'none';\n \/\/ \u5c1d\u8bd5\u64ad\u653e\uff0c\u5904\u7406\u81ea\u52a8\u64ad\u653e\u7b56\u7565\n const playPromise = mainPlayer.play();\n if (playPromise !== undefined) {\n playPromise.catch(error => {\n console.log(\"\u81ea\u52a8\u64ad\u653e\u88ab\u963b\u6b62\uff0c\u9700\u8981\u7528\u6237\u4ea4\u4e92\");\n \/\/ \u53ef\u4ee5\u5728\u8fd9\u91cc\u663e\u793a\u4e00\u4e2a\u5927\u7684\u64ad\u653e\u6309\u94ae\u8986\u76d6\u5c42\n });\n }\n };\n }\n\n \/\/ \u8f85\u52a9\u51fd\u6570\uff1a\u683c\u5f0f\u5316\u6570\u5b57\n function formatNumber(num) {\n if (num >= 10000) {\n return (num \/ 10000).toFixed(1) + '\u4ebf';\n }\n return num.toLocaleString();\n }\n\n \/\/ \u542f\u52a8\n document.addEventListener('DOMContentLoaded', init);\n\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u829d\u829d\u77ed\u89c6\u9891 \u6211\u7684\u4e3b\u573a \u641e\u7b11 \u73b0\u4ee3 \u53e4\u4ee3 U \u60a8\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301 HTML5 \u89c6\u9891\u3002 \u8bf7\u9009\u62e9\u4e00\u4e2a\u89c6\u9891\u64ad\u653e 0 \u6b21\u89c2 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,1,8,5,7],"tags":[],"class_list":["post-2268","post","type-post","status-publish","format-standard","hentry","category-kzjp","category-uncategorized","category-updatefile","category-dujia","category-index"],"_links":{"self":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts\/2268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"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=2268"}],"version-history":[{"count":36,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts\/2268\/revisions"}],"predecessor-version":[{"id":2565,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts\/2268\/revisions\/2565"}],"wp:attachment":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/media?parent=2268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/categories?post=2268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/tags?post=2268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2268,"date":"2026-07-26T21:23:27","date_gmt":"2026-07-26T13:23:27","guid":{"rendered":"https:\/\/ytubage.com\/?p=2268"},"modified":"2026-07-26T21:23:54","modified_gmt":"2026-07-26T13:23:54","slug":"zzdsp","status":"publish","type":"post","link":"https:\/\/ytubage.com\/index.php\/2026\/07\/26\/zzdsp\/","title":{"rendered":"\u829d\u829d\u77ed\u89c6\u9891"},"content":{"rendered":"\n\n\n\n \n \n \u829d\u829d\u77ed\u89c6\u9891<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \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 *\/\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\u6837\u5f0f *\/\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: 12px;\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n }\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 \/* \u52a0\u8f7d\u52a8\u753b *\/\n .loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #3b82f6;\n border-radius: 50%;\n width: 40px;\n height: 40px;\n animation: spin 1s linear infinite;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 10;\n display: none;\n }\n\n @keyframes spin {\n 0% { transform: translate(-50%, -50%) rotate(0deg); }\n 100% { transform: translate(-50%, -50%) rotate(360deg); }\n }\n\n \/* \u5206\u9875\u6309\u94ae\u6fc0\u6d3b\u72b6\u6001 *\/\n .page-btn.active {\n background-color: #3b82f6;\n color: white;\n border-color: #3b82f6;\n }\n \n \/* \u89c6\u9891\u5361\u7247\u60ac\u505c\u6548\u679c *\/\n .video-card {\n transition: all 0.3s ease;\n }\n .video-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 text-gray-800 font-sans min-h-screen flex flex-col\">\n\n \n <header class=\"bg-white shadow-sm sticky top-0 z-50\">\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 <i class=\"fa-solid fa-play-circle text-blue-600 text-2xl\"><\/i>\n <h1 class=\"text-xl font-bold text-gray-900 tracking-tight\">\u6211\u7684\u4e3b\u573a<\/h1>\n <\/div>\n <nav class=\"hidden md:flex space-x-8\">\n <a href=\"#\" class=\"text-blue-600 font-medium border-b-2 border-blue-600 px-1 pt-1\">\u641e\u7b11<\/a>\n <a href=\"#\" class=\"text-gray-500 hover:text-gray-900 font-medium px-1 pt-1 transition\">\u73b0\u4ee3<\/a>\n <a href=\"#\" class=\"text-gray-500 hover:text-gray-900 font-medium px-1 pt-1 transition\">\u53e4\u4ee3<\/a>\n <\/nav>\n <div class=\"flex items-center gap-4\">\n <button class=\"p-2 text-gray-400 hover:text-gray-600 transition\">\n <i class=\"fa-solid fa-search\"><\/i>\n <\/button>\n <div class=\"h-8 w-8 rounded-full bg-gradient-to-tr from-blue-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 \n <main class=\"flex-grow max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 w-full\">\n \n \n <section class=\"mb-12\">\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\n \n <div class=\"lg:col-span-2\">\n <div class=\"video-container bg-black relative group\">\n <div id=\"loader\" class=\"loader\"><\/div>\n <video id=\"main-player\" controls preload=\"metadata\" poster=\"https:\/\/hkzyz.ytubage.com\/2026\/dsp\/zz1\/01\/mp4\/76.mp4\">\n \u60a8\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301 HTML5 \u89c6\u9891\u3002\n <\/video>\n <\/div>\n <div class=\"mt-4\">\n <h2 id=\"video-title\" class=\"text-2xl font-bold text-gray-900 mb-2\">\u8bf7\u9009\u62e9\u4e00\u4e2a\u89c6\u9891\u64ad\u653e<\/h2>\n <div class=\"flex items-center justify-between text-sm text-gray-500\">\n <div class=\"flex items-center gap-4\">\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-eye\"><\/i> <span id=\"view-count\">0<\/span> \u6b21\u89c2\u770b<\/span>\n <span class=\"flex items-center gap-1\"><i class=\"fa-solid fa-thumbs-up\"><\/i> <span id=\"like-count\">0<\/span> \u70b9\u8d5e<\/span>\n <\/div>\n <div class=\"flex gap-2\">\n <button class=\"px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full transition text-gray-700\"><i class=\"fa-solid fa-share-nodes mr-1\"><\/i> \u5206\u4eab<\/button>\n <button class=\"px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full transition text-gray-700\"><i class=\"fa-solid fa-plus mr-1\"><\/i> \u7a0d\u540e\u770b<\/button>\n <\/div>\n <\/div>\n <p id=\"video-desc\" class=\"mt-4 text-gray-600 leading-relaxed bg-white p-4 rounded-lg border border-gray-100\">\n \u70b9\u51fb\u4e0b\u65b9\u7684\u89c6\u9891\u5217\u8868\u4ee5\u5f00\u59cb\u64ad\u653e\u3002\u672c\u9875\u9762\u652f\u6301\u5206\u9875\u6d4f\u89c8\uff0c\u6d41\u7545\u5207\u6362\u4e0d\u540c\u89c6\u9891\u5185\u5bb9\u3002\n <\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"lg:col-span-1\">\n <h3 class=\"text-lg font-semibold mb-4 text-gray-800\">\u63a5\u4e0b\u6765\u64ad\u653e<\/h3>\n <div id=\"side-list\" class=\"space-y-4 max-h-[600px] overflow-y-auto pr-2\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section>\n <div class=\"flex items-center justify-between mb-6\">\n <h3 class=\"text-xl font-bold text-gray-900\">\u5168\u90e8\u89c6\u9891<\/h3>\n <div class=\"flex gap-2\">\n <select id=\"sort-select\" class=\"bg-white border border-gray-300 text-gray-700 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2\">\n <option value=\"newest\">\u6700\u65b0\u53d1\u5e03<\/option>\n <option value=\"popular\">\u6700\u591a\u89c2\u770b<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n \n <div id=\"video-grid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-8\">\n \n <\/div>\n\n \n <div class=\"flex items-center justify-center mt-8\" id=\"pagination-container\">\n \n <\/div>\n <\/section>\n <\/main>\n\n \n <footer class=\"bg-white border-t border-gray-200 mt-auto\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8\">\n <div class=\"md:flex md:items-center md:justify-between\">\n <div class=\"flex justify-center md:justify-start space-x-6 md:order-2\">\n <a href=\"#\" class=\"text-gray-400 hover:text-gray-500\">\n <span class=\"sr-only\">zztv by you<\/span>\n <i class=\"fa-brands zyz text-xl\"><\/i>\n <\/a>\n <a href=\"#\" class=\"text-gray-400 hover:text-gray-500\">\n <span class=\"sr-only\">Instagram<\/span>\n <i class=\"fa-brands fa-instagram text-xl\"><\/i>\n <\/a>\n <a href=\"#\" class=\"text-gray-400 hover:text-gray-500\">\n <span class=\"sr-only\">zztv<\/span>\n <i class=\"fa-brands fa-twitter text-xl\"><\/i>\n <\/a>\n <\/div>\n <div class=\"mt-8 md:mt-0 md:order-1\">\n <p class=\"text-center text-base text-gray-400\">© 2026 0702.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/footer>\n\n <script>\n \/\/ \u89c6\u9891\u6570\u636e\n const generateVideos = () => {\n const videos = [];\n const categories = ['\u7b11\u54c8\u54c8', '\u6253\u5996\u602a', '\u795e\u4ed9', '\u829d\u7ae5', '\u840c\u5ba0'];\n for (let i = 1; i<= 76; i++) {\n \/\/ \u4fee\u6b63\uff1a\u4f7f\u7528 (i-1) \u8ba9\u7b2c\u4e00\u4e2a\u89c6\u9891\u5bf9\u5e94\u7b2c\u4e00\u4e2a\u5206\u7c7b\n const category = categories[(i - 1) % categories.length];\n videos.push({\n id: i,\n title: `\u7cbe\u5f69\u89c6\u9891${i} - ${category}`,\n desc: `\u8fd9\u662f\u5173\u4e8e${category}\u7684\u7b2c${i}\u4e2a\u89c6\u9891\u7247\u6bb5`,\n thumbnail:`https:\/\/hkzyz.ytubage.com\/2026\/dsp\/zz1\/01\/img\/${i}.jpg`,\n src: `https:\/\/hkzyz.ytubage.com\/2026\/dsp\/zz1\/01\/mp4\/${i}.mp4`,\n views: Math.floor(Math.random() * 10000) + 500,\n likes: Math.floor(Math.random() * 1000) + 50,\n duration: `${Math.floor(Math.random() * 10) + 1}:${String(Math.floor(Math.random() * 50) + 10).padStart(2, '0')}`\n });\n }\n return videos;\n };\n\n const allVideos = generateVideos();\n const ITEMS_PER_PAGE = 10;\n let currentPage = 1;\n let currentVideoIndex = 0; \/\/ \u5f53\u524d\u6b63\u5728\u64ad\u653e\u7684\u89c6\u9891\u5728 allVideos \u4e2d\u7684\u7d22\u5f15\n\n \/\/ DOM \u5143\u7d20\n const mainPlayer = document.getElementById('main-player');\n const videoTitle = document.getElementById('video-title');\n const videoDesc = document.getElementById('video-desc');\n const viewCount = document.getElementById('view-count');\n const likeCount = document.getElementById('like-count');\n const videoGrid = document.getElementById('video-grid');\n const paginationContainer = document.getElementById('pagination-container');\n const sideList = document.getElementById('side-list');\n const loader = document.getElementById('loader');\n\n \/\/ \u521d\u59cb\u5316\n function init() {\n renderPage(1);\n \/\/ \u9ed8\u8ba4\u64ad\u653e\u7b2c\u4e00\u4e2a\u89c6\u9891\n loadVideo(0);\n }\n\n \/\/ \u6e32\u67d3\u6307\u5b9a\u9875\u7801\u7684\u5185\u5bb9\n function renderPage(page) {\n currentPage = page;\n videoGrid.innerHTML = '';\n \n const start = (page - 1) * ITEMS_PER_PAGE;\n const end = start + ITEMS_PER_PAGE;\n const pageVideos = allVideos.slice(start, end);\n\n pageVideos.forEach((video, index) => {\n const globalIndex = start + index;\n const card = document.createElement('div');\n card.className = 'video-card bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100 cursor-pointer group';\n card.onclick = () => {\n loadVideo(globalIndex);\n window.scrollTo({ top: 0, behavior: 'smooth' });\n };\n\n card.innerHTML = `\n <div class=\"relative aspect-video overflow-hidden\">\n <img decoding=\"async\" src=\"${video.thumbnail}\" alt=\"${video.title}\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-110\">\n <div class=\"absolute bottom-2 right-2 bg-black\/70 text-white text-xs px-2 py-1 rounded font-medium\">\n ${video.duration}\n <\/div>\n <div class=\"absolute inset-0 bg-black\/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center\">\n <i class=\"fa-solid fa-play text-white text-4xl drop-shadow-lg\"><\/i>\n <\/div>\n <\/div>\n <div class=\"p-4\">\n <h4 class=\"font-bold text-gray-900 line-clamp-2 mb-2 group-hover:text-blue-600 transition-colors\">${video.title}<\/h4>\n <div class=\"flex items-center justify-between text-xs text-gray-500\">\n <span>${formatNumber(video.views)} \u6b21\u89c2\u770b<\/span>\n <span>2\u5929\u524d<\/span>\n <\/div>\n <\/div>\n `;\n videoGrid.appendChild(card);\n });\n\n renderPagination();\n renderSideList(start, end);\n }\n\n \/\/ \u6e32\u67d3\u4fa7\u8fb9\u5217\u8868\uff08\u663e\u793a\u5f53\u524d\u9875\u7684\u89c6\u9891\uff0c\u9ad8\u4eae\u5f53\u524d\u64ad\u653e\u7684\uff09\n function renderSideList(start, end) {\n sideList.innerHTML = '';\n const pageVideos = allVideos.slice(start, end);\n \n pageVideos.forEach((video, index) => {\n const globalIndex = start + index;\n const isActive = globalIndex === currentVideoIndex;\n \n const item = document.createElement('div');\n item.className = `flex gap-3 p-2 rounded-lg cursor-pointer transition ${isActive ? 'bg-blue-50 border border-blue-100' : 'hover:bg-gray-50'}`;\n item.onclick = () => loadVideo(globalIndex);\n\n item.innerHTML = `\n <div class=\"relative w-32 h-20 flex-shrink-0 rounded-md overflow-hidden bg-gray-200\">\n <img decoding=\"async\" src=\"${video.thumbnail}\" alt=\"${video.title}\" class=\"w-full h-full object-cover\">\n ${isActive ? '<div class=\"absolute inset-0 bg-blue-500\/20 flex items-center justify-center\"><i class=\"fa-solid fa-volume-high text-white\"><\/i><\/div>' : ''}\n <\/div>\n <div class=\"flex-1 min-w-0\">\n <h5 class=\"text-sm font-semibold text-gray-900 line-clamp-2 mb-1 ${isActive ? 'text-blue-700' : ''}\">${video.title}<\/h5>\n <p class=\"text-xs text-gray-500 truncate\">zztv<\/p>\n <p class=\"text-xs text-gray-400 mt-1\">${formatNumber(video.views)} \u6b21\u89c2\u770b<\/p>\n <\/div>\n `;\n sideList.appendChild(item);\n });\n }\n\n \/\/ \u6e32\u67d3\u5206\u9875\u6309\u94ae\n function renderPagination() {\n paginationContainer.innerHTML = '';\n const totalPages = Math.ceil(allVideos.length \/ ITEMS_PER_PAGE);\n \n if (totalPages <= 1) return;\n\n const createBtn = (text, page, isActive = false, isDisabled = false) => {\n const btn = document.createElement('button');\n btn.className = `page-btn mx-1 px-3 py-2 rounded-lg border text-sm font-medium transition ${\n isActive \n ? 'active' \n : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'\n } ${isDisabled ? 'opacity-50 cursor-not-allowed' : ''}`;\n btn.innerHTML = text;\n if (!isDisabled) {\n btn.onclick = () => renderPage(page);\n }\n return btn;\n };\n\n \/\/ \u4e0a\u4e00\u9875\n paginationContainer.appendChild(createBtn('<i class=\"fa-solid fa-chevron-left\"><\/i>', currentPage - 1, false, currentPage === 1));\n\n \/\/ \u9875\u7801\u903b\u8f91\n let startPage = Math.max(1, currentPage - 2);\n let endPage = Math.min(totalPages, currentPage + 2);\n\n if (currentPage <= 3) {\n endPage = Math.min(5, totalPages);\n } else if (currentPage >= totalPages - 2) {\n startPage = Math.max(1, totalPages - 4);\n }\n\n if (startPage > 1) {\n paginationContainer.appendChild(createBtn('1', 1));\n if (startPage > 2) {\n const span = document.createElement('span');\n span.className = 'mx-1 text-gray-400';\n span.innerText = '...';\n paginationContainer.appendChild(span);\n }\n }\n\n for (let i = startPage; i <= endPage; i++) {\n paginationContainer.appendChild(createBtn(i, i, i === currentPage));\n }\n\n if (endPage < totalPages) {\n if (endPage < totalPages - 1) {\n const span = document.createElement('span');\n span.className = 'mx-1 text-gray-400';\n span.innerText = '...';\n paginationContainer.appendChild(span);\n }\n paginationContainer.appendChild(createBtn(totalPages, totalPages));\n }\n\n \/\/ \u4e0b\u4e00\u9875\n paginationContainer.appendChild(createBtn('<i class=\"fa-solid fa-chevron-right\"><\/i>', currentPage + 1, false, currentPage === totalPages));\n }\n\n \/\/ \u52a0\u8f7d\u89c6\u9891\u5230\u4e3b\u64ad\u653e\u5668\n function loadVideo(index) {\n if (index < 0 || index >= allVideos.length) return;\n \n currentVideoIndex = index;\n const video = allVideos[index];\n\n \/\/ \u663e\u793a\u52a0\u8f7d\u5668\n loader.style.display = 'block';\n mainPlayer.pause();\n\n \/\/ \u66f4\u65b0\u6e90\n mainPlayer.src = video.src;\n mainPlayer.poster = video.thumbnail;\n \n \/\/ \u66f4\u65b0\u6587\u672c\u4fe1\u606f\n videoTitle.innerText = video.title;\n videoDesc.innerText = video.desc;\n viewCount.innerText = formatNumber(video.views);\n likeCount.innerText = formatNumber(video.likes);\n\n \/\/ \u91cd\u65b0\u6e32\u67d3\u4fa7\u8fb9\u680f\u4ee5\u66f4\u65b0\u9ad8\u4eae\u72b6\u6001\uff08\u5982\u679c\u5f53\u524d\u9875\u5305\u542b\u8be5\u89c6\u9891\uff09\n const start = (currentPage - 1) * ITEMS_PER_PAGE;\n const end = start + ITEMS_PER_PAGE;\n if (index >= start && index < end) {\n renderSideList(start, end);\n } else {\n \/\/ \u5982\u679c\u70b9\u51fb\u7684\u89c6\u9891\u4e0d\u5728\u5f53\u524d\u9875\uff0c\u53ef\u80fd\u9700\u8981\u8df3\u8f6c\u5230\u8be5\u89c6\u9891\u6240\u5728\u9875\uff0c\u6216\u8005\u4ec5\u66f4\u65b0\u4fa7\u8fb9\u680f\u4e3a\u201c\u5176\u4ed6\u201d\n \/\/ \u8fd9\u91cc\u4e3a\u4e86\u7b80\u5355\uff0c\u6211\u4eec\u4fdd\u6301\u5f53\u524d\u5206\u9875\u4e0d\u53d8\uff0c\u4f46\u4fa7\u8fb9\u680f\u53ef\u80fd\u4e0d\u663e\u793a\u5f53\u524d\u64ad\u653e\u9879\uff0c\u9664\u975e\u6211\u4eec\u5f3a\u5236\u5237\u65b0\u4fa7\u8fb9\u680f\u903b\u8f91\n \/\/ \u66f4\u597d\u7684\u4f53\u9a8c\u662f\uff1a\u5982\u679c\u70b9\u51fb\u7f51\u683c\u4e2d\u7684\u89c6\u9891\uff0c\u81ea\u52a8\u8df3\u8f6c\u5230\u8be5\u89c6\u9891\u6240\u5728\u7684\u5206\u9875\n const targetPage = Math.floor(index \/ ITEMS_PER_PAGE) + 1;\n if (targetPage !== currentPage) {\n renderPage(targetPage);\n }\n }\n\n \/\/ \u64ad\u653e\u5904\u7406\n mainPlayer.onloadeddata = () => {\n loader.style.display = 'none';\n \/\/ \u5c1d\u8bd5\u64ad\u653e\uff0c\u5904\u7406\u81ea\u52a8\u64ad\u653e\u7b56\u7565\n const playPromise = mainPlayer.play();\n if (playPromise !== undefined) {\n playPromise.catch(error => {\n console.log(\"\u81ea\u52a8\u64ad\u653e\u88ab\u963b\u6b62\uff0c\u9700\u8981\u7528\u6237\u4ea4\u4e92\");\n \/\/ \u53ef\u4ee5\u5728\u8fd9\u91cc\u663e\u793a\u4e00\u4e2a\u5927\u7684\u64ad\u653e\u6309\u94ae\u8986\u76d6\u5c42\n });\n }\n };\n }\n\n \/\/ \u8f85\u52a9\u51fd\u6570\uff1a\u683c\u5f0f\u5316\u6570\u5b57\n function formatNumber(num) {\n if (num >= 10000) {\n return (num \/ 10000).toFixed(1) + '\u4ebf';\n }\n return num.toLocaleString();\n }\n\n \/\/ \u542f\u52a8\n document.addEventListener('DOMContentLoaded', init);\n\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u829d\u829d\u77ed\u89c6\u9891 \u6211\u7684\u4e3b\u573a \u641e\u7b11 \u73b0\u4ee3 \u53e4\u4ee3 U \u60a8\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301 HTML5 \u89c6\u9891\u3002 \u8bf7\u9009\u62e9\u4e00\u4e2a\u89c6\u9891\u64ad\u653e 0 \u6b21\u89c2 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,1,8,5,7],"tags":[],"class_list":["post-2268","post","type-post","status-publish","format-standard","hentry","category-kzjp","category-uncategorized","category-updatefile","category-dujia","category-index"],"_links":{"self":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts\/2268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"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=2268"}],"version-history":[{"count":36,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts\/2268\/revisions"}],"predecessor-version":[{"id":2565,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts\/2268\/revisions\/2565"}],"wp:attachment":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/media?parent=2268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/categories?post=2268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/tags?post=2268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}