Tutorial de Bubble.io - Insertar vídeos (Youtube, Vimeo, Wistia, video.js) [alemán]

Guía paso a paso para subir vídeos de Youtube, Vimeo, Wistia y los tuyos propios a Bubble.io.

Chris Strobl
Chris Strobl

En este vídeo, aprenderás las diferentes formas de incrustar vídeos en tu propia aplicación web en Bubble. Mostramos cuatro formas diferentes en detalle y al final una recomendación sobre un plugin para pagar:

Insertar vídeos (Youtube, Vimoe, Wistia)

Aquí está el código iFrame para Wistia: https://github.com/strobl/bubbleiotutorials/blob/master/iframe.html

Aquí está el enlace al plugin de pago HTML5 Video Player: https://bubble.io/plugin/html5-video-player-1544679421691x581364656889921500

🎪 Demo: https://video-demo-app.bubbleapps.io/

📝 Editor: https://bubble.io/page?name=index&id=video-demo-app


Transcripción del vídeo

Hola, mi nombre es Chris Strobl y hoy voy a mostrarte las diferentes formas de incrustar vídeos en Bubble.io. Ya he preparado algunas cosas y vamos a empezar enseguida. Si cogemos el elemento de vídeo y lo arrastramos a la pantalla, lo centramos todo horizontalmente y hacemos una distancia de 20 píxeles. Entonces tienes dos opciones: una es YouTube y la otra es Vimeo.

Empezaremos enseguida con YouTube. He preparado un video y puedes ver la identificación aquí en la parte superior de este video. Si tomamos esto y lo copiamos y pegamos, entonces también tendrás este ID directamente en Bubble.io. Tiene la posibilidad de iniciar el vídeo automáticamente en cuanto se cargue la página o de enviar una respuesta. Si vamos a la vista previa, puedes ver cómo ahora tenemos el vídeo de Youtube - directamente en Bubble, en nuestra página. La segunda forma es integrar un vídeo Bubble con Vimeo. Para ello, coge de nuevo el elemento de vídeo, céntralo horizontalmente y en lugar de YouTube tendremos Vimeo. Puedes ver cómo ahora también podemos cambiar el color del control y ahora necesitamos de nuevo este ID de vídeo. Fui a una página de videos para esto. Tengo un video aquí y tomo el ID del video aquí arriba y lo copio aquí. Si vamos a la vista previa, ahora también tenemos la opción de reproducir vídeos de Vimeo. Otra forma es integrar wistia. Para ello tomamos un elemento HTML.

Y si vas a la documentación para desarrolladores de wistia, hay muy diferentes maneras de integrar los videos de wistia. Y eso es principalmente porque Wistia es un servicio de pago. Y con este servicio de pago tienes la posibilidad, por ejemplo, de que tus vídeos no se descarguen. Una buena manera es, en todo caso, con un iFrame. Tienes varios ejemplos de código aquí. Ya he preparado algo. Puedes obtener el código para esto en las Shownotes, por supuesto, y entonces podrías copiarlo. Lo copiamos. Póngalo en el elemento HTML. Y ahora el vídeo es decisivo para ti.

No hay que hacer "Display as an iFrame" porque si no se añaden barras de desplazamiento para este iframe. Pero en el propio código, se estira al tamaño. Pasamos a la vista previa y ahora también tenemos wistia disponible como vídeo. Ahora el último punto es: qué haces si tienes tus propios vídeos que subes a tu plataforma. Y hay un plugin muy bueno para esto, concretamente Video.js . Ve a Plugins. Y coge el plugin gratuito video.js de No Coe Co. Entonces, ves Video.js aquí abajo Lo seleccionas. Centrarlo horizontalmente. Y haz clic en Cargar aquí y sube un vídeo. Una vez cargado el vídeo, puedes personalizarlo en su totalidad.

Esto siempre es posible de forma dinámica, por supuesto, así que con los datos del usuario, podemos crear una miniatura o también mostrar si se puede rebobinar el vídeo o no. Reproducción automática, bucles y otras cosas. Y ahora vamos a Vista Previa y vemos que también hemos subido el Video.js con un archivo estático. Si eso no es suficiente para tus vídeos, hay otro plugin muy bueno. El plugin es de pago y se llama HTML5 video player, cuesta 60 $ y es de Bencos Apps.

Y lo mejor es que aquí hay un avance. Tengo esto en video-demo-app.bubbleapps.io y podemos ver aquí todas las posibilidades que tiene. Como cambiar la velocidad de reproducción. Para tener pantalla completa. Pero también puedes decir: quiero empezar todo en una posición determinada. Tienes la posibilidad de que el vídeo se desplace hacia abajo contigo.

Y lo mejor es que este plugin también proporciona el editor. Así que puedes ver directamente los flujos de trabajo, cómo se optimiza exactamente este reproductor. Espero haber podido mostrarte cómo puedes integrar los vídeos de diferentes maneras en Bubble.io y te deseo que sigas teniendo éxito. y a bal

TutorialesCaracterísticas