ionic(cordova) での動画のトリミング

はじめに

ionic(cordova)で動画を時間でトリミングすることができるUIを実装したくてプラグインを探した。Instagramの動画投稿のようなものをイメージしている。

https://github.com/jbavari/cordova-plugin-video-editor
最初に見つかったのがこちらのプラグイン。READMEによると機能は
・Transcode a video
・Trim a Video (iOS only)
・Create a JPEG thumbnail from a video
で、UIは自前で実装することになりそう

(1)最初にサムネイルを生成してそのキャプチャを横に並べて横スクロール可能なUIの作成
(2)動画はvideoタグで表示して(1)をスクロールするとスクロール位置に合わせてseekさせる
(3)選択した範囲から開始と終了時間を取得してこのプラグインでトリミング(iOSのみだが)

こんなイメージになるだろうか...けっこう大変そう...あと、以前、ローカルのファイルをvideoタグで表示させるときに容量とか大きくなると苦労した記憶が...

cordova-plugin-video-trimming-editor プラグイン

https://github.com/nrikiji/cordova-plugin-video-trimming-editor
やりたいことはまさにこれでした

f:id:yoppy0066:20190820113034p:plain

// フォトライブラリから動画ファイルを選択
camera.getPicture(function(path) {
  // 選択された動画ファイルのパスをcordova-plugin-video-trimming-editorに渡す
  VideoTrimmingEditor.open({
    input_path:	path,
    video_max_time: 10, // 範囲指定可能な最大秒数
  }, function(result) {
    console.log(result); // { output_path: "/path/to/zzz.mp4" }
  }, function(error) {
  }
);
}, function(error) {
}, {
  sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
  mediaType: Camera.MediaType.VIDEO
});

以上です