{"id":3055,"date":"2024-08-16T11:25:52","date_gmt":"2024-08-16T11:25:52","guid":{"rendered":"https:\/\/ctmdefense.es\/?page_id=3055"},"modified":"2025-10-12T18:29:13","modified_gmt":"2025-10-12T19:29:13","slug":"tv-directo-tm-defense","status":"publish","type":"page","link":"https:\/\/ctmdefense.es\/index.php\/tv-directo-tm-defense\/","title":{"rendered":"TV DIRECTO TM DEFENSE"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3055\" class=\"elementor elementor-3055\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-20b5607 e-flex e-con-boxed e-con e-parent\" data-id=\"20b5607\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a8c016c elementor-widget elementor-widget-html\" data-id=\"a8c016c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- CTM Defense \u00b7 Reproductor Live por canal (con anuncio + sala de espera) -->\r\n<div id=\"ctm-live-wrapper\" style=\"max-width:1200px;margin:0 auto;\">\r\n  <style>\r\n    .ctm-hidden{display:none;}\r\n    .ctm-stage{position:relative;width:100%;aspect-ratio:16\/9;background:#000;border-radius:16px;overflow:hidden;box-shadow:0 10px 25px rgba(0,0,0,.25)}\r\n    .ctm-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;padding:24px}\r\n    .ctm-controls{position:absolute;left:16px;bottom:16px;display:flex;gap:8px;z-index:5}\r\n    .ctm-btn{background:#fff;color:#111;border:none;border-radius:999px;padding:10px 14px;font-weight:600;cursor:pointer;opacity:.95;transition:.2s}\r\n    .ctm-btn:hover{opacity:1;transform:translateY(-1px)}\r\n    .ctm-badge{position:absolute;right:16px;top:16px;background:#e11d48;color:#fff;font-weight:700;border-radius:999px;padding:6px 10px;letter-spacing:.5px;font-size:12px;display:flex;gap:6px;align-items:center}\r\n    .ctm-badge::before{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;animation:ctm-pulse 1.2s infinite}\r\n    @keyframes ctm-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.35}100%{transform:scale(1);opacity:1}}\r\n    .ctm-logo{max-width:320px;width:40%;height:auto;opacity:.95;filter:drop-shadow(0 4px 16px rgba(255,255,255,.25))}\r\n    .ctm-wait-text{margin-top:18px;font-size:clamp(16px,2.3vw,22px);color:#e5e5e5}\r\n    @supports not (aspect-ratio:16\/9){\r\n      .ctm-stage::before{content:\"\";display:block;padding-top:56.25%}\r\n      .ctm-center,iframe,video{position:absolute;inset:0;width:100%;height:100%}\r\n    }\r\n  <\/style>\r\n\r\n  <!-- 1) ANUNCIO -->\r\n  <div id=\"ctm-ad\" class=\"ctm-stage\">\r\n    <div class=\"ctm-badge\">ANUNCIO<\/div>\r\n    <video id=\"ctm-ad-video\" playsinline preload=\"auto\" style=\"width:100%;height:100%;object-fit:cover;\">\r\n      <source src=\"https:\/\/ctmdefense.es\/wp-content\/uploads\/2025\/10\/ruido-bien.mp4\" type=\"video\/mp4\">\r\n    <\/video>\r\n    <div class=\"ctm-controls\">\r\n      <button id=\"ctm-ad-toggle\" class=\"ctm-btn\">\u25b6\ufe0e Reproducir anuncio<\/button>\r\n      <button id=\"ctm-ad-skip\" class=\"ctm-btn\">Saltar<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- 2) SALA DE ESPERA -->\r\n  <div id=\"ctm-wait\" class=\"ctm-stage ctm-hidden\">\r\n    <div class=\"ctm-center\" style=\"flex-direction:column;\">\r\n      <img decoding=\"async\" class=\"ctm-logo\" alt=\"CTM Defense\" src=\"https:\/\/ctmdefense.es\/wp-content\/uploads\/2025\/08\/logo-defense-blanco_-1-5.png\">\r\n      <div class=\"ctm-wait-text\">En breve comienza el directo\u2026<\/div>\r\n    <\/div>\r\n    <audio id=\"ctm-music\" loop preload=\"auto\">\r\n      <source src=\"https:\/\/ctmdefense.es\/wp-content\/uploads\/2024\/08\/Emotional-main.wav\" type=\"audio\/wav\">\r\n    <\/audio>\r\n    <div class=\"ctm-controls\">\r\n      <button id=\"ctm-music-toggle\" class=\"ctm-btn\">\u25b6\ufe0e M\u00fasica<\/button>\r\n      <button id=\"ctm-force-check\" class=\"ctm-btn\">Comprobar directo<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- 3) DIRECTO -->\r\n  <div id=\"ctm-live\" class=\"ctm-stage ctm-hidden\">\r\n    <div class=\"ctm-badge\">EN DIRECTO<\/div>\r\n    <div id=\"ctm-player\" class=\"ctm-center\" style=\"padding:0;\"><\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  \/\/ Usaremos el canal que nos diste (la URL es https:\/\/www.youtube.com\/channel\/UCelsFhI7_qtuyDbZZLs4-jA)\r\n  const CHANNEL_ID = \"UCelsFhI7_qtuyDbZZLs4-jA\";\r\n\r\n  \/\/ Elementos\r\n  const ad      = document.getElementById('ctm-ad');\r\n  const adVid   = document.getElementById('ctm-ad-video');\r\n  const adTg    = document.getElementById('ctm-ad-toggle');\r\n  const adSkip  = document.getElementById('ctm-ad-skip');\r\n\r\n  const wait    = document.getElementById('ctm-wait');\r\n  const music   = document.getElementById('ctm-music');\r\n  const musicTg = document.getElementById('ctm-music-toggle');\r\n  const forceBtn= document.getElementById('ctm-force-check');\r\n\r\n  const live    = document.getElementById('ctm-live');\r\n  const playerBox = document.getElementById('ctm-player');\r\n\r\n  let refreshTimer = null;\r\n\r\n  const show = el => el.classList.remove('ctm-hidden');\r\n  const hide = el => el.classList.add('ctm-hidden');\r\n\r\n  function go(stage){\r\n    [ad, wait, live].forEach(hide);\r\n    if(stage==='ad')   show(ad);\r\n    if(stage==='wait') show(wait);\r\n    if(stage==='live') show(live);\r\n  }\r\n\r\n  \/\/ ---------- ANUNCIO ----------\r\n  adVid.muted = true; \/\/ para permitir autoplay\r\n  adVid.play().catch(()=>{});\r\n  adTg.addEventListener('click', ()=>{\r\n    if(adVid.paused){ adVid.muted = false; adVid.play(); adTg.textContent=\"\u275a\u275a Pausar anuncio\";}\r\n    else { adVid.pause(); adTg.textContent=\"\u25b6\ufe0e Reproducir anuncio\"; }\r\n  });\r\n  adSkip.addEventListener('click', ()=>{ adVid.pause(); startWaiting(); });\r\n  adVid.addEventListener('ended', startWaiting);\r\n\r\n  \/\/ ---------- SALA DE ESPERA ----------\r\n  function startWaiting(){\r\n    go('wait');\r\n    music.volume = 0.4;\r\n    music.play().catch(()=>{});\r\n    ensureLiveEmbed(); \/\/ cargamos el iframe ya mismo\r\n    startRefreshing(); \/\/ y empezamos a refrescar\r\n  }\r\n\r\n  musicTg.addEventListener('click', ()=>{\r\n    if(music.paused){ music.play(); musicTg.textContent=\"\u275a\u275a Pausar m\u00fasica\"; }\r\n    else { music.pause(); musicTg.textContent=\"\u25b6\ufe0e M\u00fasica\"; }\r\n  });\r\n  forceBtn.addEventListener('click', ()=>{\r\n    reloadLiveIframe(true);\r\n  });\r\n\r\n  \/\/ ---------- LIVE EMBED (SIEMPRE POR CANAL) ----------\r\n  function liveSrc(){\r\n    \/\/ Embed oficial por canal: redirige al directo cuando exista.\r\n    \/\/ enablejsapi y origin ayudan en algunos servidores con CSP.\r\n    const origin = encodeURIComponent(window.location.origin);\r\n    return `https:\/\/www.youtube.com\/embed\/live_stream?channel=${CHANNEL_ID}&autoplay=1&playsinline=1&rel=0&enablejsapi=1&origin=${origin}`;\r\n  }\r\n\r\n  function ensureLiveEmbed(){\r\n    if(playerBox.querySelector('iframe')) return;\r\n    const ifr = document.createElement('iframe');\r\n    ifr.src = liveSrc();\r\n    ifr.width = \"100%\";\r\n    ifr.height = \"100%\";\r\n    ifr.allow = \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\";\r\n    ifr.allowFullscreen = true;\r\n    playerBox.innerHTML = \"\";\r\n    playerBox.appendChild(ifr);\r\n  }\r\n\r\n  function reloadLiveIframe(forceShow){\r\n    \/\/ Reconstruimos el iframe (evita cach\u00e9 de YouTube cuando arranca el directo)\r\n    const cur = playerBox.querySelector('iframe');\r\n    const ifr = document.createElement('iframe');\r\n    let url = liveSrc();\r\n    url += `&t=${Date.now()}`; \/\/ bust cache\r\n    ifr.src = url;\r\n    ifr.width = \"100%\";\r\n    ifr.height = \"100%\";\r\n    ifr.allow = \"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\";\r\n    ifr.allowFullscreen = true;\r\n    playerBox.innerHTML = \"\";\r\n    playerBox.appendChild(ifr);\r\n\r\n    \/\/ En cuanto queramos forzar visualizaci\u00f3n del live, paramos m\u00fasica y mostramos la etapa\r\n    if(forceShow){ music.pause(); go('live'); }\r\n  }\r\n\r\n  function startRefreshing(){\r\n    \/\/ Mostramos WAIT al principio; cuando haya directo, el iframe empezar\u00e1 a reproducir.\r\n    \/\/ Para que el cambio sea visible sin recargar toda la p\u00e1gina, refrescamos el iframe cada 30s.\r\n    if(refreshTimer) clearInterval(refreshTimer);\r\n    refreshTimer = setInterval(()=> {\r\n      \/\/ Si ya estamos en LIVE, mantenemos el iframe y no tocamos m\u00fasica.\r\n      \/\/ En WAIT, seguimos refrescando hasta forzar LIVE manualmente o cuando quieras.\r\n      reloadLiveIframe(false);\r\n    }, 30000);\r\n\r\n    \/\/ Primer refresco inmediato para \u201cenganchar\u201d si ya hay directo\r\n    reloadLiveIframe(false);\r\n  }\r\n\r\n  \/\/ Si el usuario hace clic o pulsa una tecla, habilitamos sonido del anuncio\r\n  const enableSoundOnce = ()=>{\r\n    adVid.muted = false;\r\n    document.removeEventListener('click', enableSoundOnce);\r\n    document.removeEventListener('keydown', enableSoundOnce);\r\n  };\r\n  document.addEventListener('click', enableSoundOnce);\r\n  document.addEventListener('keydown', enableSoundOnce);\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-17d8c18 e-flex e-con-boxed e-con e-parent\" data-id=\"17d8c18\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bf99873 elementor-widget elementor-widget-html\" data-id=\"bf99873\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"ttm-player\" style=\"max-width:900px;margin:0 auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\">\r\n  <div style=\"display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px;\">\r\n    <label for=\"ttm-select\" style=\"font-weight:600;\">Elegir video:<\/label>\r\n    <select id=\"ttm-select\" style=\"padding:8px 10px;border:1px solid #ddd;border-radius:8px;\">\r\n      <option value=\"vw8qfswIy9g\">Video 1<\/option>\r\n      <option value=\"X5hp7YM7BIk\">Video 2<\/option>\r\n      <option value=\"_p7M7CayCMk\">Video 3<\/option>\r\n    <\/select>\r\n    <button id=\"ttm-start\" type=\"button\" style=\"padding:8px 14px;border:0;border-radius:999px;background:#0ea5e9;color:#fff;cursor:pointer;\">\r\n      Inicio\r\n    <\/button>\r\n    <button id=\"ttm-stop\" type=\"button\" style=\"padding:8px 14px;border:1px solid #ddd;border-radius:999px;background:#fff;color:#111;cursor:pointer;\">\r\n      Apagado\r\n    <\/button>\r\n  <\/div>\r\n\r\n  <!-- Contenedor responsivo 16:9 -->\r\n  <div style=\"position:relative;width:100%;padding-top:56.25%;border-radius:12px;overflow:hidden;background:#000;\">\r\n    <iframe\r\n      id=\"ttm-iframe\"\r\n      title=\"Reproductor YouTube\"\r\n      style=\"position:absolute;inset:0;width:100%;height:100%;border:0;\"\r\n      src=\"https:\/\/www.youtube.com\/embed\/vw8qfswIy9g?enablejsapi=1&rel=0&modestbranding=1&playsinline=1&loop=1&playlist=vw8qfswIy9g\"\r\n      allow=\"autoplay; encrypted-media; picture-in-picture; fullscreen\"\r\n      referrerpolicy=\"strict-origin-when-cross-origin\"\r\n      allowfullscreen\r\n    ><\/iframe>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  const VIDEO_IDS = [\"vw8qfswIy9g\", \"X5hp7YM7BIk\", \"_p7M7CayCMk\"];\r\n  const iframe = document.getElementById('ttm-iframe');\r\n  const select = document.getElementById('ttm-select');\r\n  const btnStart = document.getElementById('ttm-start');\r\n  const btnStop  = document.getElementById('ttm-stop');\r\n\r\n  \/\/ Utilidad para construir la URL del embed con bucle\r\n  function buildUrl(id){\r\n    const base = \"https:\/\/www.youtube.com\/embed\/\" + id;\r\n    const params = new URLSearchParams({\r\n      enablejsapi: \"1\",\r\n      rel: \"0\",\r\n      modestbranding: \"1\",\r\n      playsinline: \"1\",\r\n      loop: \"1\",\r\n      playlist: id \/\/ necesario para bucle en un solo v\u00eddeo\r\n    });\r\n    return base + \"?\" + params.toString();\r\n  }\r\n\r\n  \/\/ Cambiar de v\u00eddeo (reinicia al principio y mantiene loop)\r\n  select.addEventListener('change', function(){\r\n    const id = this.value;\r\n    iframe.src = buildUrl(id);\r\n  });\r\n\r\n  \/\/ Enviar comandos play\/pause al iframe mediante postMessage\r\n  function ytCommand(func, args = []) {\r\n    if (!iframe || !iframe.contentWindow) return;\r\n    const message = JSON.stringify({\r\n      event: \"command\",\r\n      func,\r\n      args\r\n    });\r\n    iframe.contentWindow.postMessage(message, \"https:\/\/www.youtube.com\");\r\n  }\r\n\r\n  \/\/ Bot\u00f3n Inicio: vuelve al segundo 0 y reproduce\r\n  btnStart.addEventListener('click', function(){\r\n    ytCommand(\"seekTo\", [0, true]);\r\n    ytCommand(\"playVideo\");\r\n  });\r\n\r\n  \/\/ Bot\u00f3n Apagado: pausa\r\n  btnStop.addEventListener('click', function(){\r\n    ytCommand(\"pauseVideo\");\r\n  });\r\n\r\n  \/\/ Asegura que el <select> muestra el video inicial correcto\r\n  select.value = VIDEO_IDS[0];\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>ANUNCIO \u25b6\ufe0e Reproducir anuncio Saltar En breve comienza el directo\u2026 \u25b6\ufe0e M\u00fasica Comprobar directo EN DIRECTO Elegir video: Video 1Video [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3055","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ctmdefense.es\/index.php\/wp-json\/wp\/v2\/pages\/3055","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ctmdefense.es\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ctmdefense.es\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ctmdefense.es\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ctmdefense.es\/index.php\/wp-json\/wp\/v2\/comments?post=3055"}],"version-history":[{"count":61,"href":"https:\/\/ctmdefense.es\/index.php\/wp-json\/wp\/v2\/pages\/3055\/revisions"}],"predecessor-version":[{"id":5455,"href":"https:\/\/ctmdefense.es\/index.php\/wp-json\/wp\/v2\/pages\/3055\/revisions\/5455"}],"wp:attachment":[{"href":"https:\/\/ctmdefense.es\/index.php\/wp-json\/wp\/v2\/media?parent=3055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}