Reproductor de TikTok con tu publicidad

🎬 Reproductor de TikTok

Este es un reproductor de video estilo TikTok que puedes agregar a tu página web. Incluye reproducción automática, botón de pausa, sonido, barra de progreso y contador de vistas animado. Ideal para compartir contenido de forma moderna y atractiva, Igual permite agregarle un link para que reedireccione en el momento que precione el corazon ❤️ Esta opción sirve para ponerle publicidad o mandarlo a otro sitio que gustes.

🔒 Contenido bloqueado

<div style="max-width: 100%; margin: auto;"> <style> :root{--ui-txt: #fff;} *{box-sizing:border-box;} .feed{height:100vh;overflow-y:auto;scroll-snap-type:y mandatory;} .card{position:relative;height:100vh;width:100%;scroll-snap-align:start;display:flex;justify-content:center;align-items:center;} .card video{height:100%;width:auto;max-width:100%;object-fit:contain;background:#000;} .ui{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;} .right-rail{position:absolute;right:8px;bottom:120px;display:flex;flex-direction:column;gap:14px;align-items:center;pointer-events:auto;} .rail-btn{width:54px;height:54px;border-radius:999px;border:none;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);color:#fff;font-size:22px;cursor:pointer;display:grid;place-items:center;} .bottom-bar{position:absolute;left:0;right:0;bottom:0;padding:16px 14px 12px;background:linear-gradient(to top, rgba(0,0,0,.65) 40%, rgba(0,0,0,0));display:flex;flex-direction:column;gap:10px;pointer-events:none;} .caption{font-size:14px;line-height:1.35;max-width:min(85ch, 86%);opacity:.95;} .progress{height:4px;background:rgba(255,255,255,.25);border-radius:999px;overflow:hidden;} .progress .bar{height:100%;width:0%;background:#fff;} .center-pp{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;} .pp-btn{pointer-events:auto;width:84px;height:84px;border-radius:999px;border:none;background:rgba(0,0,0,.45);display:grid;place-items:center;cursor:pointer;} .pp-btn svg{width:40px;height:40px;fill:#fff;} .pp-btn.hidden{opacity:0;visibility:hidden;} .noselect{-webkit-user-select:none;-ms-user-select:none;user-select:none;} .toast{position:absolute;right:78px;bottom:140px;padding:8px 10px;background:rgba(0,0,0,.55);border-radius:10px;font-size:13px;opacity:0;transition:opacity .2s ease;} .toast.show{opacity:1;} .heart-btn{width:54px;height:54px;border-radius:999px;border:none;background:rgba(0,0,0,.35);display:flex;justify-content:center;align-items:center;cursor:pointer;} .heart-btn svg{width:32px;height:32px;fill:red;} .tip{position:absolute;top:10px;right:10px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.45);font-size:12px;} video::-webkit-media-controls{display:none !important;} .views{ display:flex;flex-direction:column;align-items:center;font-size:12px;color:#fff;gap:4px; width:54px;height:54px;border-radius:999px;background:rgba(0,0,0,.35);justify-content:center; } .views svg{width:28px;height:28px;fill:#fff;} </style> <div class="feed"> <section class="card"> <video id="v1" src="https://cdn.aceimg.com/0aad3cf9f.mp4" playsinline muted loop preload="metadata" ></video> <div class="ui"> <div class="right-rail noselect"> <div class="views"> <svg viewBox="0 0 24 24"> <path d="M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7z"/> </svg> <span id="viewsCount">0</span> </div> <button class="heart-btn" onclick="window.open('https://cort67.blogspot.com/','_blank')"> ❤️ </button> <button class="rail-btn" id="muteBtn">🔈</button> </div> <div class="bottom-bar"> <div class="caption">Te gusta mi video? Regalame un ❤️</div> <div class="progress"> <div class="bar" id="progressBar"></div> </div> </div> <div class="center-pp"> <button class="pp-btn hidden" id="ppBtn"> ▶ </button> </div> <div class="tip">Regalame un ❤️</div> <div class="toast" id="toast">Sonido: ON</div> </div> </section> </div> <script> const video = document.getElementById('v1'); const ppBtn = document.getElementById('ppBtn'); const muteBtn = document.getElementById('muteBtn'); const progressBar = document.getElementById('progressBar'); const toast = document.getElementById('toast'); const viewsCountEl = document.getElementById('viewsCount'); video.play().catch(()=>ppBtn.classList.remove('hidden')); video.addEventListener('click', togglePlay); ppBtn.addEventListener('click', togglePlay); function togglePlay(){ if(video.paused){ video.play(); ppBtn.classList.add('hidden'); } else { video.pause(); ppBtn.classList.remove('hidden'); } } function raf(){ if(video.duration){ progressBar.style.width = (video.currentTime / video.duration * 100) + '%'; } requestAnimationFrame(raf); } requestAnimationFrame(raf); muteBtn.onclick = ()=>{ video.muted = !video.muted; toast.textContent = "Sonido: " + (video.muted ? "OFF" : "ON"); toast.classList.add('show'); setTimeout(()=>toast.classList.remove('show'),800); }; let views = 0; const targetViews = 1200; function formatViews(n){ return n>=1000 ? (n/1000).toFixed(1)+'k' : n; } setInterval(()=>{ if(views < targetViews){ views += Math.floor(Math.random()*20)+5; viewsCountEl.textContent = formatViews(views); } },50); </script> </div>

🛠️ Cómo editar este código

• Cambiar video: Busca src="..." y reemplaza el enlace por tu video.
• Cambiar texto: Edita donde dice Te gusta mi video?.
• Cambiar link del corazón: Modifica la URL en window.open(...).
• Quitar sonido automático: elimina la palabra muted del video.
• Cambiar vistas: modifica targetViews = 1200.
• Agregar más videos: duplica el bloque <section class="card">.

💡 Consejos

• Funciona mejor en móviles 📱
• Usa videos verticales (9:16)
• Evita videos muy pesados

👁️ Visualiza el Reproductor