A simple video insertion tool for EditorJS

Мне очень нравится EditorJS . Это позволило мне создать очень простой веб-интерфейс для моего статичного блога Hugo.

EditorJS содержит большую часть того, что мне нужно, в простом блочном редакторе. Он имеет плагин для заголовков, кода и даже простой способ добавления изображений в редактор без необходимости размещения инфраструктуры. До сих пор не было простого способа добавить видео в редактор.

Я взял simple-image репозиторий плагин и изменил его (только чуть) , чтобы создать simple-video плагин ( npm module ). Теперь я могу легко включить видео в этот блог.

Если вы знакомы с EditorJS, это довольно просто включить в ваши проекты. Просто установите его следующим образом

npm i simple-video-editorjs

А затем просто включите его в свой проект, как считаете нужным.

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

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

В редакторе есть несколько простых опций, которые позволяют вам настроить способ размещения видео на странице:

  1. Автозапуск - будет ли видео воспроизводиться автоматически при загрузке страницы
  2. muted - по умолчанию звук в видео не будет включен (необходим для автозапуска)
  3. элементы управления - будут ли у видео стандартные элементы управления HTML.

Ниже приведен быстрый пример встроенного видео (и показаны некоторые параметры).

В любом случае, я получал удовольствие от создания этого маленького плагина - его было не так сложно создать, и единственное, что я сделал, - это отложил преобразование в base64, которое использует simple-images, и вместо этого просто использовал URL-адреса 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