A simple video insertion tool for EditorJS

私はEditorJS本当に好きEditorJS 。静的なHugoブログ用に、非常にシンプルなWebホストインターフェイスを作成できます。

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.自動再生-ページの読み込み時にビデオが自動的に再生されます 1.ミュート-デフォルトでは動画の音声はオンになりません(自動再生に必要) 1.コントロール-ビデオにはデフォルトのHTMLコントロールがあります。

以下は、埋め込まれたビデオの簡単な例です(オプションの一部を示しています)。

とにかく、この小さなプラグインを作成するのは楽しかったです-作成するのはそれほど難しくなく、simple-imagesが使用するbase64への変換を延期し、代わりにBlob URLを使用するだけでした。

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium