{"id":2568,"date":"2025-12-15T12:05:43","date_gmt":"2025-12-15T15:05:43","guid":{"rendered":"https:\/\/futbol360.online\/futbol-360\/?page_id=2568"},"modified":"2025-12-15T13:41:31","modified_gmt":"2025-12-15T16:41:31","slug":"secuencias-video","status":"publish","type":"page","link":"https:\/\/futbol360.online\/futbol-360\/secuencias-video\/","title":{"rendered":"Secuencias video"},"content":{"rendered":"\n<style>\n.video-input-container { margin-bottom: 20px; }\n#player { width: 100%; aspect-ratio: 16 \/ 9; border-radius: 8px; overflow: hidden; }\n.video-input { width: calc(100% - 130px); padding: 10px; border: 1px solid #ccc; border-radius: 5px 0 0 5px; }\n.video-button { padding: 10px 18px; background-color: #0073aa; color: white; border: none; cursor: pointer; border-radius: 0 5px 5px 0; font-weight: bold; }\n.layout-container { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; }\n.controls-column, .log-column { flex: 1; min-width: 300px; }\n.live-controls { padding: 15px; border: 1px solid #ddd; border-radius: 8px; background-color: #f0f4f8; }\n.live-controls h4 { margin-top: 0; color: #1e3a56; }\n.annotation-button { display: block; width: 100%; padding: 12px; margin-bottom: 8px; background-color: #2c3e50; color: #fff; border: none; border-radius: 5px; cursor: pointer; text-align: left; }\n.annotation-button:hover { background-color: #34495e; }\n.undo-button { background-color: #a93226; }\n.event-log-list { list-style: none; padding: 15px; border: 1px solid #ddd; border-radius: 8px; background: #fff; }\n.category-title { font-weight: bold; margin-top: 15px; color: #1e3a56; }\n.event-link { font-weight: bold; color: #005a87; cursor: pointer; }\n.play-clip-button { margin-left: 10px; font-size: 12px; padding: 4px 10px; border-radius: 15px; border: 1px solid #1e88e5; background: #e3f2fd; cursor: pointer; }\n<\/style>\n\n<h3>Anotador de Partidos en Vivo<\/h3>\n\n<div class=\"video-input-container\">\n<input type=\"text\" id=\"youtubeUrl\" class=\"video-input\" placeholder=\"Pega la URL del video de YouTube\">\n<button onclick=\"loadVideo()\" class=\"video-button\">Cargar Video<\/button>\n<\/div>\n\n<div id=\"player\"><\/div>\n\n<div class=\"layout-container\">\n<div class=\"controls-column\">\n<div class=\"live-controls\">\n<h4>Registrar Jugada<\/h4>\n<\/div>\n<\/div>\n\n<div class=\"log-column\">\n<h4>Bit\u00e1cora de Jugadas<\/h4>\n<ul id=\"event-log\" class=\"event-log-list\"><\/ul>\n<\/div>\n<\/div>\n\n<script>\nvar player;\nvar clipTimeout;\n\nconst categorias = [\n'Llegada Propia',\n'Pelota Detenida',\n'Llegada Rival',\n'Falta Cometida',\n'Falta Recibida',\n'Oportunidad de Gol'\n];\n\nvar tag = document.createElement('script');\ntag.src = \"https:\/\/www.youtube.com\/iframe_api\";\ndocument.body.appendChild(tag);\n\ndocument.addEventListener('DOMContentLoaded', () => {\nconst controls = document.querySelector('.live-controls');\n\ncategorias.forEach(cat => {\nconst btn = document.createElement('button');\nbtn.className = 'annotation-button';\nbtn.textContent = cat;\nbtn.onclick = () => logEvent(cat);\ncontrols.appendChild(btn);\n});\n\nconst undoBtn = document.createElement('button');\nundoBtn.className = 'annotation-button undo-button';\nundoBtn.textContent = 'Deshacer \u00faltima jugada';\nundoBtn.onclick = undoLastEvent;\ncontrols.appendChild(undoBtn);\n});\n\nfunction loadVideo() {\nconst url = document.getElementById('youtubeUrl').value;\nconst videoId = getYouTubeID(url);\nif (!videoId) { alert('URL inv\u00e1lida'); return; }\n\ndocument.getElementById('event-log').innerHTML = '';\n\nplayer = new YT.Player('player', {\nvideoId: videoId,\nevents: { onReady: () => loadEvents(videoId) }\n});\n}\n\nfunction logEvent(categoria) {\nif (!player || player.getPlayerState() !== 1) return;\naddEvent(categoria, player.getCurrentTime());\nsaveEvents();\n}\n\nfunction addEvent(categoria, time) {\nconst log = document.getElementById('event-log');\n\nlet section = document.querySelector(`[data-cat=\"${categoria}\"]`);\nif (!section) {\nconst title = document.createElement('div');\ntitle.className = 'category-title';\ntitle.textContent = categoria;\nlog.appendChild(title);\n\nsection = document.createElement('div');\nsection.dataset.cat = categoria;\nlog.appendChild(section);\n}\n\nconst li = document.createElement('li');\nli.dataset.time = time;\nli.innerHTML = `\n<span class=\"event-link\" onclick=\"player.seekTo(${time});player.playVideo()\">Minuto ${formatTime(time)}<\/span>\n<button class=\"play-clip-button\" onclick=\"playClip(${Math.max(0,time-10)},10)\">Clip<\/button>\n`;\nsection.appendChild(li);\n}\n\nfunction undoLastEvent() {\nconst log = document.getElementById('event-log');\nconst sections = Array.from(log.querySelectorAll('[data-cat]'));\nif (sections.length === 0) return;\n\nconst lastSection = sections[sections.length - 1];\nconst items = lastSection.querySelectorAll('li');\nitems[items.length - 1].remove();\n\nif (lastSection.querySelectorAll('li').length === 0) {\nlastSection.previousSibling.remove();\nlastSection.remove();\n}\nsaveEvents();\n}\n\nfunction saveEvents() {\nconst videoId = getYouTubeID(player.getVideoUrl());\nconst data = {};\n\ndocument.querySelectorAll('[data-cat]').forEach(section => {\nconst cat = section.dataset.cat;\ndata[cat] = [];\nsection.querySelectorAll('li').forEach(li => {\ndata[cat].push(parseFloat(li.dataset.time));\n});\n});\n\nlocalStorage.setItem('videoEvents_' + videoId, JSON.stringify(data));\n}\n\nfunction loadEvents(videoId) {\nconst data = JSON.parse(localStorage.getItem('videoEvents_' + videoId) || '{}');\nObject.keys(data).forEach(cat => {\ndata[cat].forEach(time => addEvent(cat, time));\n});\n}\n\nfunction playClip(start, dur) {\nclearTimeout(clipTimeout);\nplayer.seekTo(start);\nplayer.playVideo();\nclipTimeout = setTimeout(() => player.pauseVideo(), dur * 1000);\n}\n\nfunction getYouTubeID(url) {\nconst m = url.match(\/(?:v=|\\\/)([0-9A-Za-z_-]{11})\/);\nreturn m ? m[1] : null;\n}\n\nfunction formatTime(t) {\nconst m = Math.floor(t \/ 60);\nconst s = Math.floor(t % 60);\nreturn `${m}:${s.toString().padStart(2,'0')}`;\n}\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Anotador de Partidos en Vivo Cargar Video Registrar Jugada Bit\u00e1cora de Jugadas<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2568","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/pages\/2568","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/comments?post=2568"}],"version-history":[{"count":6,"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/pages\/2568\/revisions"}],"predecessor-version":[{"id":2577,"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/pages\/2568\/revisions\/2577"}],"wp:attachment":[{"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/media?parent=2568"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}