CKEditor For WordPressdeにHTML5videoの挿入ボタンを追加する

最近は動画をサイトに掲載したいという要望を多く聞くようになりました。
Youtubeなどのサービスを活用してその共有ボタンから動画を埋め込む方法もありますが、外部サービスを利用したくないという場合もあり、動画のサーバーへのアップロードと挿入が簡単にできればいいなと思っていました。

Wordpressの投稿エディターにCKEditorを利用しているのですが、CKEditorのPluginから丁度要望にあうものを見つけました。
 


https://ckeditor.com/cke4/addon/html5video

ここからは、Wordpressのプラグイン「ckeditor-for-wordpress」での使用方法についての説明になります。
(単独のCKEditorに搭載する場合は少し異なります。)

Downloadからzipファイルをダウンロードして、解凍してできる「html5video」フォルダ一式をckeditor-for-wordpress/pluginsにアップロードします。

ckeditor-for-wordpress/ckeditor.config.jsに下記のコードを追加します。

config.extraPlugins += (config.extraPlugins ? ',html5video' : 'html5video' );
CKEDITOR.plugins.addExternal('html5video', ckeditorSettings.pluginPath + 'plugins/html5video/');


これで完了です。

サーバーブラウザを起動して、ファイルをアップロードすることもできます。

日本語訳がなかったので、一応日本語表示のファイルを作成しました。
必要でしたらどうぞご自由に使ってください。

html5video日本語ファイル

ダウンロードしたjp.jsをhtml5video/langにアップロードして、html5video/plugin.jsの3行名のlang:を'jp'だけにしてもらうと日本語化できます。
(なぜかja.jsだとエラーになりました。)


HTML5 video

Comments

コメントする