Cómo hacer reproductor de películas con opciones como imagen

  • Autor Autor Simio
  • Fecha de inicio Fecha de inicio
Simio

Simio

Zeta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Hola Forobetas,

Necesito saber como se puede hacer un reproductor de películas con varias opciones (como se ve en la imagen), alguien me puede dar el código para hacerlo o si existe algún plugin para hacerlo, les dejo una captura para que vean lo que quiero.

videos.webp

Saludos
 
que cosa? :welcoming: te refieres a las opciones?
 
Hay muchos plugins de shortcodes que lo hacen : )

Tienen la opción de TABS, para crear tantas pestañas como quieras.

Yo en una web utilizo uno muy básico y sencillo (siempre puedes aplicarle estilo): Arconix Shortcodes.
 
Yo te recomiendo que para que la carga sea mas rapida, hagas un blog en blogger, eliminas todo, y dejas solo el contenido de las entradas, pero sin estilos, y sin titulos ni nada, solo el contenido, ahi haces las tabs y las iframas en la web de peliculas, aqui te dejo un ejemplo, es lo que yop uso:

Las tabs:
Capitan America 2 - Peliculas Cine Online

Y esta es la pagina donde la iframo para que ahi salgan las tabs:

Ver pelicula capitan america 2 online - Cine Online | Peliculas online, peliculas gratis y por categorias.

Ademas de que hace la carga un poco mas rapida, los estilos de las tabs no interfieren con los de tu plantilla porque es otro blog, te lo recomiendo :encouragement:
 
Hola, me puedes pasar el codigo las tabs de blogger por favor.

Saludos
Yo te recomiendo que para que la carga sea mas rapida, hagas un blog en blogger, eliminas todo, y dejas solo el contenido de las entradas, pero sin estilos, y sin titulos ni nada, solo el contenido, ahi haces las tabs y las iframas en la web de peliculas, aqui te dejo un ejemplo, es lo que yop uso:

Las tabs:
Capitan America 2 - Peliculas Cine Online

Y esta es la pagina donde la iframo para que ahi salgan las tabs:

Ver pelicula capitan america 2 online - Cine Online | Peliculas online, peliculas gratis y por categorias.

Ademas de que hace la carga un poco mas rapida, los estilos de las tabs no interfieren con los de tu plantilla porque es otro blog, te lo recomiendo :encouragement:
 
Hola, me puedes pasar el codigo las tabs de blogger por favor.

Saludos

Claro que si, crea el blog, ponle cualquier nombre, ve a plantilla- Editar HTML, borra todo y en su lugar pon el codigo que te voy a dejar en este archivo:

https://dl.dropboxusercontent.com/s/tszw1ff50gnk7oq/plantilla.txt

Si te fijas ahi estan unos estilos propios, como es el "reproductor de vk", puedes cambiarlos, para poner las tabs en una entrada solo pega esto:

HTML:
<div id="tabber-wrapper">
<ul class="tab-view">
<li><a href="#tab1"><script>document.write(Title1);</script></a></li>
<li><a href="#tab2"><script>document.write(Title2);</script></a></li>
<li><a href="#tab3"><script>document.write(Title3);</script></a></li>
<li><a href="#tab4"><script>document.write(Title8);</script></a></li>
</ul>
<div class="clear"/>
<div class="tab-wrapper">
<div class="tabber" id="tab1">
Aqui el contenido
<div class="tabber" id="tab2">
Aqui el contenido
<div class="tabber" id="tab3">
Aqui el contenido
<div class="tabber" id="tab4">
Aqui el contenido
</div>
<div class="clear"/>
</div>
</div>

Ahi estan 4 tabs, si quieres aghregar una mas agrega <div class="tabber" id="tab4">
Aqui el contenido
</div> y cambias el id dependiendo de cuantas tengas, y arriba agregas <li><a href="#tab4"><script>document.write(Title8);</script></a></li> y cambias el ref tambien dependiendo del id de la tab, title no lo cambies,
Title1= Opcion 1
Title2 = Opcion 2
Title3 = Opcion 3
Title4 = Opcion 4
Title5 = Opcion 5
Title6 = Opcion 6
Title7 Opcion 7
Title8 = Trailer

---------- Post agregado el 12-abr-2014 hora: 21:32 ----------

Claro que si, crea el blog, ponle cualquier nombre, ve a plantilla- Editar HTML, borra todo y en su lugar pon el codigo que te voy a dejar en este archivo:

https://dl.dropboxusercontent.com/s/tszw1ff50gnk7oq/plantilla.txt

Si te fijas ahi estan unos estilos propios, como es el "reproductor de vk", puedes cambiarlos, para poner las tabs en una entrada solo pega esto:

HTML:
<div id="tabber-wrapper">
<ul class="tab-view">
<li><a href="#tab1"><script>document.write(Title1);</script></a></li>
<li><a href="#tab2"><script>document.write(Title2);</script></a></li>
<li><a href="#tab3"><script>document.write(Title3);</script></a></li>
<li><a href="#tab4"><script>document.write(Title8);</script></a></li>
</ul>
<div class="clear"/>
<div class="tab-wrapper">
<div class="tabber" id="tab1">
Aqui el contenido
<div class="tabber" id="tab2">
Aqui el contenido
<div class="tabber" id="tab3">
Aqui el contenido
<div class="tabber" id="tab4">
Aqui el contenido
</div>
<div class="clear"/>
</div>
</div>

Ahi estan 4 tabs, si quieres aghregar una mas agrega <div class="tabber" id="tab4">
Aqui el contenido
</div> y cambias el id dependiendo de cuantas tengas, y arriba agregas <li><a href="#tab4"><script>document.write(Title8);</script></a></li> y cambias el ref tambien dependiendo del id de la tab, title no lo cambies,
Title1= Opcion 1
Title2 = Opcion 2
Title3 = Opcion 3
Title4 = Opcion 4
Title5 = Opcion 5
Title6 = Opcion 6
Title7 Opcion 7
Title8 = Trailer

Y por ultimo para iframar el contenido esto: <iframe src="Aqui la url de la entrada con las tabs" width="100%" height="435" scrolling="no" align="top" frameborder="0"></iframe>

Ahi cambias los tamaños dependiendo de si editaste las tabs o no,

Para que trabajes mas facil, te dejo el link de mi editor HTML en tiempo real:

301 Moved Permanently
 
Última edición:
Muchas Gracias :encouragement:
Claro que si, crea el blog, ponle cualquier nombre, ve a plantilla- Editar HTML, borra todo y en su lugar pon el codigo que te voy a dejar en este archivo:

https://dl.dropboxusercontent.com/s/tszw1ff50gnk7oq/plantilla.txt

Si te fijas ahi estan unos estilos propios, como es el "reproductor de vk", puedes cambiarlos, para poner las tabs en una entrada solo pega esto:

HTML:
<div id="tabber-wrapper">
<ul class="tab-view">
<li><a href="#tab1"><script>document.write(Title1);</script></a></li>
<li><a href="#tab2"><script>document.write(Title2);</script></a></li>
<li><a href="#tab3"><script>document.write(Title3);</script></a></li>
<li><a href="#tab4"><script>document.write(Title8);</script></a></li>
</ul>
<div class="clear"/>
<div class="tab-wrapper">
<div class="tabber" id="tab1">
Aqui el contenido
<div class="tabber" id="tab2">
Aqui el contenido
<div class="tabber" id="tab3">
Aqui el contenido
<div class="tabber" id="tab4">
Aqui el contenido
</div>
<div class="clear"/>
</div>
</div>

Ahi estan 4 tabs, si quieres aghregar una mas agrega <div class="tabber" id="tab4">
Aqui el contenido
</div> y cambias el id dependiendo de cuantas tengas, y arriba agregas <li><a href="#tab4"><script>document.write(Title8);</script></a></li> y cambias el ref tambien dependiendo del id de la tab, title no lo cambies,
Title1= Opcion 1
Title2 = Opcion 2
Title3 = Opcion 3
Title4 = Opcion 4
Title5 = Opcion 5
Title6 = Opcion 6
Title7 Opcion 7
Title8 = Trailer

---------- Post agregado el 12-abr-2014 hora: 21:32 ----------



Y por ultimo para iframar el contenido esto: <iframe src="Aqui la url de la entrada con las tabs" width="100%" height="435" scrolling="no" align="top" frameborder="0"></iframe>

Ahi cambias los tamaños dependiendo de si editaste las tabs o no,

Para que trabajes mas facil, te dejo el link de mi editor HTML en tiempo real:

301 Moved Permanently
 
puedes usar el html de tab y despues puedes usar un iframe para poder incrustar el video.
 
Ecxelente, lo usare en mi template para peliculas online.
 
gracias vere que hacer con el
Claro que si, crea el blog, ponle cualquier nombre, ve a plantilla- Editar HTML, borra todo y en su lugar pon el codigo que te voy a dejar en este archivo:

https://dl.dropboxusercontent.com/s/tszw1ff50gnk7oq/plantilla.txt

Si te fijas ahi estan unos estilos propios, como es el "reproductor de vk", puedes cambiarlos, para poner las tabs en una entrada solo pega esto:

HTML:
<div id="tabber-wrapper">
<ul class="tab-view">
<li><a href="#tab1"><script>document.write(Title1);</script></a></li>
<li><a href="#tab2"><script>document.write(Title2);</script></a></li>
<li><a href="#tab3"><script>document.write(Title3);</script></a></li>
<li><a href="#tab4"><script>document.write(Title8);</script></a></li>
</ul>
<div class="clear"/>
<div class="tab-wrapper">
<div class="tabber" id="tab1">
Aqui el contenido
<div class="tabber" id="tab2">
Aqui el contenido
<div class="tabber" id="tab3">
Aqui el contenido
<div class="tabber" id="tab4">
Aqui el contenido
</div>
<div class="clear"/>
</div>
</div>

Ahi estan 4 tabs, si quieres aghregar una mas agrega <div class="tabber" id="tab4">
Aqui el contenido
</div> y cambias el id dependiendo de cuantas tengas, y arriba agregas <li><a href="#tab4"><script>document.write(Title8);</script></a></li> y cambias el ref tambien dependiendo del id de la tab, title no lo cambies,
Title1= Opcion 1
Title2 = Opcion 2
Title3 = Opcion 3
Title4 = Opcion 4
Title5 = Opcion 5
Title6 = Opcion 6
Title7 Opcion 7
Title8 = Trailer

---------- Post agregado el 12-abr-2014 hora: 21:32 ----------



Y por ultimo para iframar el contenido esto: <iframe src="Aqui la url de la entrada con las tabs" width="100%" height="435" scrolling="no" align="top" frameborder="0"></iframe>

Ahi cambias los tamaños dependiendo de si editaste las tabs o no,

Para que trabajes mas facil, te dejo el link de mi editor HTML en tiempo real:

301 Moved Permanently
 
muchas gracias
 
Ya modifique un poco el código :welcoming: para optimizarlo, pero ese sigue funcionando igual.

Hola.
Perdón que te moleste y comente en este Post que es algo viejo. Es que tengo una pregunta, hay alguna forma de agregar un reproductor igual en Blogger?, digamos, uno con varias opciones?...

Saludos y Gracias de antemano... :encouragement:
 
eso se hace con jquery te dejo un link

idtabs
 
Atrás
Arriba