A simple video insertion tool for EditorJS

Realmente me gusta EditorJS . Me permite crear una interfaz muy simple alojada en la web para mi blog estático de Hugo.

EditorJS tiene la mayor parte de lo que necesito en un simple editor basado en bloques. Tiene un complemento para encabezados, código e incluso una forma simple de agregar imágenes al editor sin requerir infraestructura de alojamiento. No tiene una manera simple de agregar videos al editor, hasta ahora.

Tomé el simple-image repositorio de plugins y cambió hacia arriba (sólo un poco) para crear un simple-video plug-in ( npm module ). Ahora puedo incluir videos fácilmente en este blog.

Si está familiarizado con EditorJS, es bastante simple incluirlo en sus proyectos. Simplemente instálelo de la siguiente manera

npm i simple-video-editorjs

Y luego simplemente inclúyalo en su proyecto como mejor le parezca.

const SimpleVideo = require('simple-video-editorjs');

var editor = EditorJS({
  ...
  
  tools: {
    ...
    video: SimpleVideo,
  }
  
  ...
});

El editor tiene algunas opciones simples que le permiten configurar cómo se debe alojar el video en la página:

  1. Reproducción automática: el video se reproducirá automáticamente cuando se cargue la página
  2. silenciado: el video no tendrá sonido activado de forma predeterminada (necesario para la reproducción automática)
  3. controles: el video tendrá los controles HTML predeterminados.

A continuación se muestra un ejemplo rápido de un video que está incrustado (y que muestra algunas de las opciones).

De todos modos, me divertí creando este pequeño complemento: no fue demasiado difícil de crear y lo único que hice fue diferir la conversión a base64 que usan imágenes simples y en su lugar solo usar las URL de Blob.

Picture of me smiling.

Paul Kinlan

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.

RSS Github Medium