Subida de Video a YouTube y Vimeo usando el Componente del Tema

[ti0]

Este nuevo componente de tema permite la subida de videos desde el compositor de Discourse a YouTube y Vimeo. Para aquellos que ya están familiarizados con el plugin que desarrollé recientemente, ahora está disponible en este componente de tema, que puede agregarse a cualquier tema. Esto facilita mucho la instalación y funciona exactamente igual que el plugin.

Características

Todos los miembros del foro pueden subir videos a Vimeo o YouTube (los administradores pueden elegir habilitar uno o ambos).

Los administradores pueden controlar la privacidad de visualización y la de incrustación de los videos subidos a Vimeo mediante la configuración de administrador.

Los usuarios pueden controlar la privacidad de visualización de los videos subidos a YouTube desde el modal de subida.

Puedes ver una demostración del plugin aquí (todo es igual en el componente, excepto la página de configuración. La página de configuración del componente se encuentra en Admin > Personalizar > Componentes > Subida de video):

Discourse Video Upload Plugin with YouTube and Vimeo Demo

Configuración

Importante: Para los componentes de tema, debes asegurarte de activar el componente para los temas utilizados en tu instancia (haz clic en Agregar todos los temas o elige los temas que desees).

La configuración del desarrollador para habilitar las subidas a YouTube y Vimeo se detalla a continuación. Si prefieres que alguien lo haga por ti, puedes solicitar soporte contactándome, @ti0.

Para subidas a YouTube

Las subidas a YouTube van a la cuenta del que sube, a diferencia de las subidas a Vimeo, que van a una cuenta común.

Ver pasos

• Crea una cuenta y un proyecto en https://console.developers.google.com

• Habilita la API de datos de YouTube v3

• Configura la pantalla de consentimiento de OAuth para usuarios externos (a menos que todos los usuarios de tu foro de Discourse pertenezcan a una organización de Google).

• Configura tus credenciales:

  • Crea un ID de cliente OAuth
  • Elige el tipo de aplicación web
  • Agrega la URL de tu instancia de Discourse en la sección de orígenes de JavaScript autorizados

• Copia solo el ID de cliente generado

• Ve a la página de configuración del componente en el panel de administración de Discourse y pega el ID de cliente en el campo youtube api client id.

• Habilita las subidas a YouTube activando esta configuración: youtube upload enabled

• Ajusta las opciones de privacidad de visualización predeterminadas para YouTube si es necesario.

• Ahora deberías poder subir videos directamente desde el compositor de temas de Discourse a YouTube.

Para subidas a Vimeo

Una vez que configures el componente con los pasos siguientes, todos los usuarios de la comunidad podrán subir videos a tu cuenta de Vimeo.

Eres responsable de los límites y el uso de tu cuenta de Vimeo.

Ver pasos

• Crea una cuenta y una aplicación en Vimeo Developers:
  https://developer.vimeo.com/apps/new

• Genera un token de acceso con permisos de subida

• Ve a la página de configuración del componente en el panel de administración de Discourse y agrega el token de acceso generado en la configuración vimeo api access token, luego guarda

• Habilita las subidas a Vimeo activando la configuración vimeo upload enabled.

• Ajusta las opciones de privacidad de visualización y de incrustación

  • Consulta esta página de Vimeo para ver las opciones de privacidad: privacy.view y privacy.embed

• Ahora deberías poder subir videos directamente desde el compositor de temas de Discourse a Vimeo

Publicar un video

• Para publicar un video, crea un nuevo tema o responde a uno existente.

• Haz clic en el nuevo botón Subir a Video en la barra de herramientas del compositor (el icono de video). Este botón solo es visible si has habilitado YouTube o Vimeo (o ambos) en la configuración del plugin.

• Elige un archivo de video y edita los detalles como título y descripción, si lo deseas.

• Haz clic en el botón Subir a Vimeo o Subir a YouTube.

  • Los botones mostrados dependerán de si has habilitado las subidas a YouTube o Vimeo (uno o ambos).

  • Mostrará el progreso de la subida y luego esperará hasta que el video complete el proceso de transcodificación.

  • El modal permanecerá abierto hasta que la transcodificación se complete.

  • Una vez completada la transcodificación, el enlace del video se agregará al compositor (a menos que haya ocurrido un error de transcodificación).

• Guarda la publicación y tu video podrá ser visto por todos los demás usuarios de la comunidad
  (dependiendo de las opciones de privacidad que hayas seleccionado).

Solicitud de características

Puedes solicitar características adicionales o soporte contactándome @ti0.

Contribuciones

Si encontraste útil este componente de tema, considera donar al desarrollador usando este enlace de PayPal: PayPal.Me

Las contribuciones grandes y pequeñas son igualmente bienvenidas

Si deseas mejorar el componente / plugin, las PR son bienvenidas.

	Vista previa	Vista previa del creador de temas
	Repositorio	discourse-video-upload
	Guía de instalación	Cómo instalar un tema o componente de tema
	¿Nuevo en temas de Discourse?	Guía para principiantes sobre el uso de temas de Discourse

[Canapin (Coin-coin le Canapin)]

@ti0

Esto hace que la instalación sea mucho más sencilla y funciona exactamente igual que el plugin.

¿Se dejará de desarrollar el plugin entonces?

[ti0]

No por ahora, pero creo que será mucho más sencillo mantener solo el componente de tema. Por ahora dejaré el plugin, pero recomendaré migrar al componente de tema.

[Don]

¡Gracias @ti0 Esto es increíble de nuevo Es mucho más fácil usar un componente de tema que un plugin.

Una pregunta. ¿Puedes agregar estos textos para traducir? Subiendo, transcodificando video y el título, descripción, etc. de los detalles del video? ¡Gracias!

[ti0]

@Don, ahora se pueden personalizar todas las etiquetas del componente

[Don]

Hola

Me encanta mucho tu componente, gracias nuevamente por crearlo.

Funcionó muy bien, pero ahora tenemos algunos problemas
A veces aparece un error al transcodificar videos (solo archivos mp4): status.error.transcode. El video se sube correctamente, pero solo se muestra en Vimeo y no se coloca el enlace en el editor.

El otro problema es que no podemos subir archivos mp4 desde el navegador Safari en MacOS.

¿Sería posible resolver estos problemas de alguna manera?

¡Gracias por tu respuesta!

[ti0]

Hola @Don, gracias por detectar este caso límite en Safari de MacOS. Parece ser un problema de Safari (una referencia en SO). He solucionado este problema en el componente del tema, por lo que una vez que lo actualices y refresques la página, deberías poder subir archivos mp4 desde Safari. Acabo de probarlo en mi propia máquina y ahora funciona.

En cuanto a los errores de transcodificación, estos ocurren en el lado de Vimeo; no hay nada que podamos hacer al respecto por nuestra parte.

[Don]

¡Gracias por la solución rápida! Ahora funciona genial en Safari

[Don]

Hola @ti0,

Parece que el mecanismo de subida de Vimeo ha cambiado. Cuando se coloca el enlace en el editor del foro, Vimeo comienza a convertir el video. Por eso, el video no se puede incrustar y reproducir en el foro porque aún no está listo. ¡Gracias por tu ayuda!

[anon82467725]

@Don

El otro problema es que no podemos subir archivos mp4 desde el navegador Safari en macOS.

A mí también me ocurre lo mismo, pero ahora el problema parece afectar a Mozilla Firefox en todas las plataformas.

Hubo algunos otros problemas que ocurrieron en Mozilla Firefox, pero tendré que volver a revisar esos temas para proporcionar más aclaraciones.

[Don]

Creo que el problema es el siguiente. En Vimeo hay una sección de Esperando conversión después de Subir pero antes de Convertir.

En el componente hay un
const STATUS_POLLING_INTERVAL_MILLIS = 10000;

Si no me equivoco, esto significa que tras el proceso de subida, se envía una solicitud a Vimeo cada 10 segundos, por lo que el proceso de espera muestra el video como completo. Como la API de Vimeo no admite Webhooks, etc., necesitamos enviar solicitudes periódicamente para saber si el proceso de transcodificación aún está en curso o si ya ha finalizado.

He cambiado esto a 60 segundos para nosotros hasta que llegue una solución mejor; esto debería ser suficiente para que la mayoría de las subidas omitan la solicitud del proceso de espera. Lo he probado con subidas pequeñas de ~10 MB, medianas de ~500 MB y grandes de ~2 GB.
Con las subidas pequeñas, el tiempo de espera es de unos pocos segundos (~4-5 s), con las medianas es de ~10-15 s, y con las grandes es de ~40-45 s. Creo que depende del tamaño del archivo subido.
Parece que funciona, pero si el proceso de espera para convertir tarda más de 60 segundos, se pegará el enlace igual que antes. Sería bueno si pudiéramos omitir este proceso de espera.

[Zup]

Preferiría que las subidas de Vimeo se enviaran a la cuenta del subidor en lugar de a mi cuenta común… ¿es posible?

[linzo (Collins)]

@ti0 No sé si soy solo yo, pero creo que algo está roto. La carga se queda atascada en Authenticating y en la Consola de Chrome aparece el siguiente error:

Algunos recursos están bloqueados porque su origen no está incluido en la Política de Seguridad de Contenido (CSP) de tu sitio. La CSP de tu sitio se basa en una lista de permitidos, por lo que los recursos deben estar enumerados en dicha lista para poder accederse.

La Política de Seguridad de Contenido de un sitio se establece bien mediante un encabezado HTTP (recomendado) o mediante una etiqueta meta HTML.

Para solucionar este problema, realiza una de las siguientes acciones:

1. (Recomendado) Si estás utilizando una lista de permitidos para `'script-src'`, considera cambiar de una CSP basada en lista de permitidos a una CSP estricta, ya que las CSP estrictas son más robustas frente a XSS. Consulta cómo configurar una CSP estricta.

2. O verifica cuidadosamente que todos los recursos bloqueados sean de confianza; si lo son, incluye sus orígenes en la CSP de tu sitio. ⚠️Nunca agregues un origen que no confíes a la CSP de tu sitio. Si no confías en el origen, considera alojar los recursos en tu propio sitio en su lugar.

RECURSOS AFECTADOS
https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en_US.bnEFfFZ9cyI.O/m=auth2,client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNaq8ri2P66tzK7chsKcRiE1CsLyQ/cb=gapi.loaded_0?le=ili,ipu,ili,ipu`

bloqueado script-src-elem api.js:12

[ti0]

@linzo esto es un problema de CSP, no tiene nada que ver con el componente del tema. Por favor, lee sobre la CSP de Discourse aquí: Mitigate XSS Attacks with Content Security Policy

@Zup

Preferiría que las subidas de Vimeo fueran a la cuenta del subidor en lugar de a mi cuenta común… ¿es posible?

@Zup, esto es una solicitud de función adicional; es posible, por supuesto, pero implica trabajo extra que deberá pagarse si deseas que se implemente. Avísame si lo deseas.

@Don

Entonces el video no puede incrustarse y reproducirse en el foro porque aún no está listo.

Disculpa la respuesta tardía; sí, hay un proceso de transcodificación después de la subida, y el cuadro de diálogo de subida lo mostrará antes de incrustar el video. En mi lado funciona como se espera. Espera a que se complete la transcodificación; solo entonces cierra el cuadro de diálogo e incrusta el video. Aquí tienes una demostración:

[debryc (Deborah Chang)]

¡Estoy muy emocionado por el potencial de este componente de tema! ¿Funciona este componente de tema también en móviles? Es decir, si estoy en mi teléfono, ¿puedo subir un video desde mi biblioteca de fotos?

Intenté verlo en la vista previa del Creador de temas y recibí un aviso de “Acceso denegado”.

[Don]

¡Hola Deborah!

Lo usamos en nuestro foro con subidas de Vimeo y funciona muy bien en todos los dispositivos. El proceso de selección es igual que en Discourse, pero después de seleccionar el video, debes hacer clic en el botón “Subir a Vimeo” o “Subir a YouTube” para iniciar la carga.

[debryc (Deborah Chang)]

¿Tu foro es público? ¿Podría echar un vistazo? ¡Me encantaría verlo en acción! ¿Cuál es la URL?

[davidkingham]

¡Esto funciona genial! Sería una buena función poder subir los videos a una carpeta específica en Vimeo para poder mantener separadas las subidas de los usuarios de las mías. ¡Gracias por esto!

[ti0]

¡Me alegra que te guste! Si estás dispuesto a contribuir con esta solicitud de función, puedo implementarla o puedes enviar un PR. Avísame.

[debryc (Deborah Chang)]

¿Se pueden generar subtítulos automáticamente en los videos y mostrarlos de forma predeterminada? Esto es muy importante para nosotros en términos de accesibilidad.