Tutorial: Agrega un contador personalizable a tus reproductores de video

  • Autor Autor parrax
  • Fecha de inicio Fecha de inicio
parrax

parrax

Gamma
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Un simple contador de tiempo, sobre tus reproductores, el cual le puedes agregar lo que quieras:
- Botones sociales
- Publicidad
- Mensajes a los Usuarios
Etc. Etc.
Acá un Demo --> Cuenta regresiva contador | Series y PelÃ*culas Online

Agrega Antes de </Head> el siguiente Script
HTML:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'> 
//<![CDATA[

$(function(){
  setTimeout("contador()",1000);
});
function contador(){
  if ($('#se').html() <= 1){
   cerrar();
  }
  else{
   $('#se').html($('#se').text() -1);
   setTimeout("contador()",1000);
  }
 }
function cerrar(){
 $('#ad').fadeOut(300);
}
//]]>
</script>


Y Luego en tu entrada Agregas la estructura con algunos estilos ya agregados en los div

HTML:
<div id="ad" style="width:972px;height:460px;position:absolute;top:20;left:0;z-index:60;color:#343434;text-align:center;background:#ddd;border-radius:10px;">

<h4 style="padding-bottom:14px;font-size:36px;">Iniciando Reproducción</h4>

<div style="width:960px;text-align:center;">
<span style="font-size:20px;top:2px;">La unica forma de agradecer es comentando las peliculas y dando click en Me Gusta.</span>
<br/>

<center><br/>
<div style="font-size:20px;">
<b>Tiempo de espera solicitado <br/>por el servidor:</b>
<div id="se" style="font-size:120px;color:#218bd7;font-weight:bold;">10</div>
</div>
</center>

</div>
</div>

<!-- ACÁ IFRAME DE REPRODUCTOR 970x460 -->

Pueden editar las posiciones y los estilos en los div

Muchas Gracias, agradecer no cuesta nada...
 
Última edición:
Ostia grande compañero, esto me va a benir mui pero que mui bien! :encouragement: se agradece tremendo aporte!
 
En seguida lo pruebo cuanto antes :encouragement:
 
Muy original y seguro que a más de uno le resulta muy útil.
 
Un simple contador de tiempo, sobre tus reproductores, el cual le puedes agregar lo que quieras:
- Botones sociales
- Publicidad
- Mensajes a los Usuarios
Etc. Etc.
Acá un Demo --> Cuenta regresiva contador | Series y PelÃ*culas Online

Agrega Antes de </Head> el siguiente Script
HTML:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'> 
//<![CDATA[

$(function(){
  setTimeout("contador()",1000);
});
function contador(){
  if ($('#se').html() <= 1){
   cerrar();
  }
  else{
   $('#se').html($('#se').text() -1);
   setTimeout("contador()",1000);
  }
 }
function cerrar(){
 $('#ad').fadeOut(300);
}
//]]>
</script>


Y Luego en tu entrada Agregas la estructura con algunos estilos ya agregados en los div

HTML:
<div id="ad" style="width:972px;height:460px;position:absolute;top:20;left:0;z-index:60;color:#343434;text-align:center;background:#ddd;border-radius:10px;">

<h4 style="padding-bottom:14px;font-size:36px;">Iniciando Reproducción</h4>

<div style="width:960px;text-align:center;">
<span style="font-size:20px;top:2px;">La unica forma de agradecer es comentando las peliculas y dando click en Me Gusta.</span>
<br/>

<center><br/>
<div style="font-size:20px;">
<b>Tiempo de espera solicitado <br/>por el servidor:</b>
<div id="se" style="font-size:120px;color:#218bd7;font-weight:bold;">10</div>
</div>
</center>

</div>
</div>

<!-- ACÁ IFRAME DE REPRODUCTOR 970x460 -->

Pueden editar las posiciones y los estilos en los div

Muchas Gracias, agradecer no cuesta nada...
No sólo te lo agradezco hermano, también te amo estuve buscando esto por todos lado eres crack 🙂 muchísimas gracias broth. Que tengas muchos éxitos en todos tus proyectos!
 
Un simple contador de tiempo, sobre tus reproductores, el cual le puedes agregar lo que quieras:
- Botones sociales
- Publicidad
- Mensajes a los Usuarios
Etc. Etc.
Acá un Demo --> Cuenta regresiva contador | Series y PelÃ*culas Online

Agrega Antes de </Head> el siguiente Script
HTML:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'> 
//<![CDATA[

$(function(){
  setTimeout("contador()",1000);
});
function contador(){
  if ($('#se').html() <= 1){
   cerrar();
  }
  else{
   $('#se').html($('#se').text() -1);
   setTimeout("contador()",1000);
  }
 }
function cerrar(){
 $('#ad').fadeOut(300);
}
//]]>
</script>


Y Luego en tu entrada Agregas la estructura con algunos estilos ya agregados en los div

HTML:
<div id="ad" style="width:972px;height:460px;position:absolute;top:20;left:0;z-index:60;color:#343434;text-align:center;background:#ddd;border-radius:10px;">

<h4 style="padding-bottom:14px;font-size:36px;">Iniciando Reproducción</h4>

<div style="width:960px;text-align:center;">
<span style="font-size:20px;top:2px;">La unica forma de agradecer es comentando las peliculas y dando click en Me Gusta.</span>
<br/>

<center><br/>
<div style="font-size:20px;">
<b>Tiempo de espera solicitado <br/>por el servidor:</b>
<div id="se" style="font-size:120px;color:#218bd7;font-weight:bold;">10</div>
</div>
</center>

</div>
</div>

<!-- ACÁ IFRAME DE REPRODUCTOR 970x460 -->

Pueden editar las posiciones y los estilos en los div

Muchas Gracias, agradecer no cuesta nada...
🙁 hasta que entro y veo que el blogspot ya no existe [emoji24][emoji24][emoji24]
 
Que buen aporte, muchas gracias por tomarte el tiempo de compartirlo.

Saludos
 
queria ver el demo, pero sale blog eliminado
 
buenisimo esto anduve buscando por todos lados por mucho tiempo, se agradece de corazon
 
Se ha eliminado por algun motivo ?
el mensaje que da es
******************************************************************
El blog se ha eliminado.
Lo sentimos, el blog de soloentradas.blogspot.com se ha eliminado. Esta dirección no está disponible para blogs nuevos.
******************************************************************
 
Fue perfecto para mi. Gracias
 
Buen tutorial, grcias me lo guardo en favoritos🙂
 
Muchas gracias
 
bastante sencillo y básico si se compara con otros, pero muy facil de instalar. gracias por el aporte amigo. un detalle mas para mejorar los blogs y que queda de conocimiento general
 
Esto es realmente necesario. Gracias por el aporte.
 
Muy útil para páginas warez o blog que se dediquen a videos.
 
Atrás
Arriba