A simple video insertion tool for EditorJS

Saya sangat suka EditorJS . Biarkan saya membuat antarmuka web-host yang sangat sederhana untuk blog Hugo statis saya.

EditorJS memiliki sebagian besar dari apa yang saya butuhkan dalam editor berbasis blok sederhana. Ini memiliki plugin untuk header, kode, dan bahkan cara sederhana untuk menambahkan gambar ke editor tanpa memerlukan infrastruktur hosting. Tidak ada cara sederhana untuk menambahkan video ke editor, sampai sekarang.

Aku mengambil simple-image repositori plugin yang dan berubah itu (hanya anak laki-laki) untuk membuat simple-video plugin ( npm module ). Sekarang saya dapat memasukkan video dengan mudah di blog ini.

Jika Anda terbiasa dengan EditorJS, itu agak sederhana untuk dimasukkan dalam proyek Anda. Instal saja sebagai berikut

npm i simple-video-editorjs

Dan kemudian sertakan saja dalam proyek Anda sesuai keinginan Anda.

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

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

Editor memiliki beberapa opsi sederhana yang memungkinkan Anda mengonfigurasi bagaimana video harus di-host di halaman:

  1. Putar otomatis - akan memutar video secara otomatis saat halaman dimuat
  2. dibisukan - apakah video tidak memiliki suara aktif secara default (diperlukan untuk putar otomatis)
  3. kontrol - apakah video memiliki kontrol HTML default.

Di bawah ini adalah contoh cepat video yang disematkan (dan menampilkan beberapa opsi).

Ngomong-ngomong, saya senang membuat plugin kecil ini - tidak terlalu sulit untuk membuat dan satu-satunya hal yang saya lakukan adalah menunda konversi ke base64 yang menggunakan gambar sederhana dan sebagai gantinya hanya menggunakan Blob URL.

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