HTML + JavaScript · listo para WordPress
Tus videos. Tu lista.
Todo en tu página.
Un reproductor de video y audio con lista lateral, búsqueda y controles a mano. Pega el código, cambia tus enlaces y dale a tus visitantes una forma sencilla de explorar tu contenido.
- 8medios de ejemplo
- 1bloque para insertar
- Clásicaskin negra y gris
Capturas del proyecto Cinetide. Prueba debajo el bloque con los videos de demostración añadidos.
Funciones
Lo que necesitas para mostrar tus videos.
Una pantalla de reproducción y una lista para que cada visitante elija qué ver o escuchar.
Video y audio juntos
Organiza distintos tipos de contenido en una misma lista.
- MP4 y WebM para video.
- MP3 y otros formatos de audio compatibles.
- YouTube y Vimeo por enlace.
- HLS y DASH cuando el origen lo permite.
Una lista fácil de explorar
Títulos, descripciones y miniaturas opcionales junto al reproductor.
- Búsqueda dentro de la lista.
- Anterior y siguiente.
- Orden definido en tu código.
- La pista elegida queda resaltada.
Controles a mano
Reproduce, pausa y navega por el contenido desde una barra compacta.
- Progreso y volumen.
- Velocidad de reproducción cuando el medio la admite.
- Repetición y reproducción aleatoria.
- Pantalla completa según el navegador.
Reproduce toda la lista
Activa el control de la lista para pasar al siguiente medio cuando termine el actual. Al cargar la página no comienza a sonar automáticamente.
Listo para insertar
El bloque incluye el motor, la skin y la lista. En WordPress se pega en HTML personalizado: no necesitas instalar un tema ni este reproductor como plugin.
Errores con una salida
Si una entrada no está disponible, el reproductor muestra el motivo y permite reintentar o elegir otra. Los permisos de YouTube, Vimeo y los servidores de medios siguen aplicándose.
Demo en vivo
Pruébalo aquí mismo.
Este es tu bloque Cinetide HTML Playlist: seis ejemplos originales y dos videos añadidos al final. Pulsa reproducir cuando quieras probarlo.
Cambia este enlace por la URL de tu vídeo.
Pega aquí el enlace de tu vídeo de YouTube.
Pega aquí el enlace de tu vídeo de Vimeo.
Cambia este enlace por la URL de tu audio.
Tráiler de Sintel, © Blender Foundation. CC BY 3.0: https://durian.blender.org/ · https://creativecommons.org/licenses/by/3.0/
Video público de prueba de MDN para mostrar reproducción WebM.
Incluye MP4, YouTube, Vimeo, MP3, HLS, DASH, el tráiler de Sintel y Flores en WebM. Las fuentes externas requieren Internet; su disponibilidad depende de cada proveedor.
Capturas reales
Así se ve tu reproductor.
La misma interfaz en escritorio y en pantallas estrechas.
Cómo funciona
De un enlace a tu propia lista.
Elige qué reproducir
Selecciona una entrada de la lista o búscala por su título. Pulsa reproducir para comenzar.
Ajusta la reproducción
Usa el volumen, el progreso, anterior y siguiente. Para avanzar al terminar, activa «Reproducir toda la lista».
Pon tus propios videos
Edita los enlaces en «EDITA AQUÍ TUS VÍDEOS». Para añadir otro, duplica el último artículo y dale un identificador nuevo.
Requisitos
Qué necesita cada fuente.
El reproductor utiliza las capacidades del navegador y las APIs de los proveedores.
| Contenido | Requisito |
|---|---|
| MP4, WebM y MP3 | URL directa al archivo y formato compatible con el navegador. Para saltar de posición, el servidor debe aceptar solicitudes Range. |
| YouTube y Vimeo | Una página publicada por HTTP o HTTPS, Internet y permiso del propietario para insertar el video. Se pide un clic antes de cargar el proveedor. |
| HLS y DASH | Manifiesto accesible y CORS en el servidor del stream. Las bibliotecas se cargan cuando hacen falta. |
| WordPress | Bloque HTML personalizado y una cuenta con permiso para guardar scripts, estilos y templates. |
Esta página incluye únicamente el reproductor Cinetide de la lista. No incorpora las skins, el modo flotante ni las funciones de podcasts de Flash Player Java.
Preguntas frecuentes
Antes de empezar.
¿Es un tema o un plugin de WordPress?
No. Es una página con un bloque HTML que incluye el reproductor. Se crea en Páginas y no cambia el tema instalado.
¿Dónde cambio los enlaces de video?
Dentro de la demo busca «EDITA AQUÍ TUS VÍDEOS». Cambia el valor de data-src y el título de cada entrada. Añade las nuevas después de la última, antes de cerrar la sección de la lista.
¿Por qué no comienza a sonar al entrar?
El visitante decide cuándo reproducir. La página y el reproductor no activan audio al cargarse.
¿Los videos vienen dentro del archivo?
No. Son enlaces a servidores externos. Las imágenes de esta presentación sí están integradas en el código para que no tengas que subirlas por separado.
¿Por qué un video de YouTube puede dar error?
Puede estar eliminado, ser privado o tener restricciones de inserción, edad o país. YouTube también necesita que la página esté publicada en una web, no abierta como archivo local.
¿Qué ocurre al cambiar de página?
Al navegar a otra página se termina la reproducción. Esta demo no ofrece continuidad de audio entre páginas.