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を使用するだけでした。

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