{"id":3865,"date":"2026-05-05T18:25:11","date_gmt":"2026-05-05T21:25:11","guid":{"rendered":"https:\/\/futbol360.online\/futbol-360\/?page_id=3865"},"modified":"2026-05-16T16:53:52","modified_gmt":"2026-05-16T19:53:52","slug":"secuencia-videos-central-espanol","status":"publish","type":"page","link":"https:\/\/futbol360.online\/futbol-360\/secuencia-videos-central-espanol\/","title":{"rendered":"secuencia videos &#8211; central espa\u00f1ol"},"content":{"rendered":"\n<style>\n.video-input-container { \n    margin-bottom: 20px; \n    display:flex;\n    flex-wrap:wrap;\n    gap:10px;\n}\n\n#player { \n    width: 100%; \n    aspect-ratio: 16 \/ 9; \n    border-radius: 8px; \n    overflow: hidden; \n}\n\n.video-input { \n    flex:1;\n    min-width:250px;\n    padding: 10px; \n    border: 1px solid #ccc; \n    border-radius: 5px; \n}\n\n.video-button { \n    padding: 10px 18px; \n    background-color: #0073aa; \n    color: white; \n    border: none; \n    cursor: pointer; \n    border-radius: 5px; \n    font-weight: bold; \n}\n\n.video-button:hover{\n    opacity:0.9;\n}\n\n.clear-button{\n    background:#a93226;\n}\n\n.layout-container { \n    display: flex; \n    flex-wrap: wrap; \n    gap: 20px; \n    margin-top: 20px; \n}\n\n.controls-column, \n.log-column { \n    flex: 1; \n    min-width: 300px; \n}\n\n.live-controls { \n    padding: 15px; \n    border: 1px solid #ddd; \n    border-radius: 8px; \n    background-color: #f0f4f8; \n}\n\n.live-controls h4 { \n    margin-top: 0; \n    color: #1e3a56; \n}\n\n.annotation-button { \n    display: block; \n    width: 100%; \n    padding: 12px; \n    margin-bottom: 8px; \n    background-color: #2c3e50; \n    color: #fff; \n    border: none; \n    border-radius: 5px; \n    cursor: pointer; \n    text-align: left; \n}\n\n.annotation-button:hover { \n    background-color: #34495e; \n}\n\n.undo-button { \n    background-color: #a93226; \n}\n\n.event-log-list { \n    list-style: none; \n    padding: 15px; \n    border: 1px solid #ddd; \n    border-radius: 8px; \n    background: #fff; \n}\n\n.category-title { \n    font-weight: bold; \n    margin-top: 15px; \n    color: #1e3a56; \n}\n\n.event-link { \n    font-weight: bold; \n    color: #005a87; \n    cursor: pointer; \n}\n\n.play-clip-button { \n    margin-left: 10px; \n    font-size: 12px; \n    padding: 4px 10px; \n    border-radius: 15px; \n    border: 1px solid #1e88e5; \n    background: #e3f2fd; \n    cursor: pointer; \n}\n<\/style>\n\n<h3>Anotador de Partidos en Vivo<\/h3>\n\n<div class=\"video-input-container\">\n\n    <input \n        type=\"text\" \n        id=\"youtubeUrl\" \n        class=\"video-input\" \n        placeholder=\"Pega la URL del video de YouTube\">\n\n    <button onclick=\"loadVideo()\" class=\"video-button\">\n        Cargar Video\n    <\/button>\n\n    <button onclick=\"clearVideo()\" class=\"video-button clear-button\">\n        Borrar Video\n    <\/button>\n\n<\/div>\n\n<div id=\"player\"><\/div>\n\n<div class=\"layout-container\">\n\n    <div class=\"controls-column\">\n\n        <div class=\"live-controls\">\n            <h4>Registrar Jugada<\/h4>\n        <\/div>\n\n    <\/div>\n\n    <div class=\"log-column\">\n\n        <h4>Bit\u00e1cora de Jugadas<\/h4>\n\n        <ul id=\"event-log\" class=\"event-log-list\"><\/ul>\n\n    <\/div>\n\n<\/div>\n\n<script>\n\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', () => {\n\n    const controls = document.querySelector('.live-controls');\n\n    categorias.forEach(cat => {\n\n        const btn = document.createElement('button');\n\n        btn.className = 'annotation-button';\n        btn.textContent = cat;\n        btn.onclick = () => logEvent(cat);\n\n        controls.appendChild(btn);\n\n    });\n\n    const undoBtn = document.createElement('button');\n\n    undoBtn.className = 'annotation-button undo-button';\n    undoBtn.textContent = 'Deshacer \u00faltima jugada';\n    undoBtn.onclick = undoLastEvent;\n\n    controls.appendChild(undoBtn);\n\n});\n\nfunction loadVideo() {\n\n    const url = document.getElementById('youtubeUrl').value;\n\n    const videoId = getYouTubeID(url);\n\n    if (!videoId) {\n\n        alert('URL inv\u00e1lida');\n        return;\n\n    }\n\n    document.getElementById('event-log').innerHTML = '';\n\n    if(player){\n\n        player.destroy();\n\n    }\n\n    player = new YT.Player('player', {\n\n        videoId: videoId,\n\n        events: {\n\n            onReady: () => loadEvents(videoId)\n\n        }\n\n    });\n\n}\n\nfunction clearVideo() {\n\n    const input = document.getElementById('youtubeUrl');\n\n    const videoId = getYouTubeID(input.value);\n\n    if(videoId){\n\n        localStorage.removeItem('videoEvents_' + videoId);\n\n    }\n\n    input.value = '';\n\n    document.getElementById('event-log').innerHTML = '';\n\n    if(player){\n\n        player.destroy();\n\n    }\n\n    document.getElementById('player').innerHTML = '';\n\n}\n\nfunction logEvent(categoria) {\n\n    if (!player || player.getPlayerState() !== 1) return;\n\n    addEvent(categoria, player.getCurrentTime());\n\n    saveEvents();\n\n}\n\nfunction addEvent(categoria, time) {\n\n    const log = document.getElementById('event-log');\n\n    let section = document.querySelector(`[data-cat=\"${categoria}\"]`);\n\n    if (!section) {\n\n        const title = document.createElement('div');\n\n        title.className = 'category-title';\n        title.textContent = categoria;\n\n        log.appendChild(title);\n\n        section = document.createElement('div');\n\n        section.dataset.cat = categoria;\n\n        log.appendChild(section);\n\n    }\n\n    const li = document.createElement('li');\n\n    li.dataset.time = time;\n\n    li.innerHTML = `\n    <span class=\"event-link\" onclick=\"player.seekTo(${time});player.playVideo()\">\n    Minuto ${formatTime(time)}\n    <\/span>\n\n    <button class=\"play-clip-button\" onclick=\"playClip(${Math.max(0,time-10)},10)\">\n    Clip\n    <\/button>\n    `;\n\n    section.appendChild(li);\n\n}\n\nfunction undoLastEvent() {\n\n    const log = document.getElementById('event-log');\n\n    const sections = Array.from(log.querySelectorAll('[data-cat]'));\n\n    if (sections.length === 0) return;\n\n    const lastSection = sections[sections.length - 1];\n\n    const items = lastSection.querySelectorAll('li');\n\n    items[items.length - 1].remove();\n\n    if (lastSection.querySelectorAll('li').length === 0) {\n\n        lastSection.previousSibling.remove();\n\n        lastSection.remove();\n\n    }\n\n    saveEvents();\n\n}\n\nfunction saveEvents() {\n\n    if(!player) return;\n\n    const videoId = getYouTubeID(player.getVideoUrl());\n\n    const data = {};\n\n    document.querySelectorAll('[data-cat]').forEach(section => {\n\n        const cat = section.dataset.cat;\n\n        data[cat] = [];\n\n        section.querySelectorAll('li').forEach(li => {\n\n            data[cat].push(parseFloat(li.dataset.time));\n\n        });\n\n    });\n\n    localStorage.setItem('videoEvents_' + videoId, JSON.stringify(data));\n\n}\n\nfunction loadEvents(videoId) {\n\n    const data = JSON.parse(localStorage.getItem('videoEvents_' + videoId) || '{}');\n\n    Object.keys(data).forEach(cat => {\n\n        data[cat].forEach(time => addEvent(cat, time));\n\n    });\n\n}\n\nfunction playClip(start, dur) {\n\n    clearTimeout(clipTimeout);\n\n    player.seekTo(start);\n\n    player.playVideo();\n\n    clipTimeout = setTimeout(() => player.pauseVideo(), dur * 1000);\n\n}\n\nfunction getYouTubeID(url) {\n\n    const m = url.match(\/(?:v=|\\\/)([0-9A-Za-z_-]{11})\/);\n\n    return m ? m[1] : null;\n\n}\n\nfunction formatTime(t) {\n\n    const m = Math.floor(t \/ 60);\n\n    const s = Math.floor(t % 60);\n\n    return `${m}:${s.toString().padStart(2,'0')}`;\n\n}\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Anotador de Partidos en Vivo Cargar Video Borrar 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-3865","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/pages\/3865","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=3865"}],"version-history":[{"count":3,"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/pages\/3865\/revisions"}],"predecessor-version":[{"id":4079,"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/pages\/3865\/revisions\/4079"}],"wp:attachment":[{"href":"https:\/\/futbol360.online\/futbol-360\/wp-json\/wp\/v2\/media?parent=3865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}