まつまるまつまる

どうも、まつまるです。今回は動画をトリミングするプラグインの解説をやっていきます。特にトリミング部分を中心にします。

今回使うのは以下のプラグインです。

sbis04/video_trimmer
https://github.com/sbis04/video_trimmer
Flutter video trimmer package. Contribute to sbis04/video_trimmer development by creating an account on GitHub.

アプリのワークフロー
・ローカルから動画を選択
・編集画面へ移動
・トリミング範囲を選択
・SAVEタップでトリミング範囲を再生

※動画のサイズが10秒以内じゃないと上手くできません。

スポンサーリンク

・使用しているプラグイン

image_picker: ^0.6.7+17
video_player: ^1.0.1
file_picker: ^2.1.4
video_player: ^1.0.1
flutter_ffmpeg: ^0.3.0
video_thumbnail: ^0.2.4
path_provider: ^1.6.24
intl: ^0.16.1
path: ^1.7.0

おおいですねぇ。

・メイン画面

①”LOAD VIDEO”をタップしたら、ローカルのgalleryから動画を選択する。

メイン画面

②選択した動画を_trimmer.loadVideoを実行し、読み込む。

動画選択
スポンサーリンク

・トリミングについて

トリミング画面

③trimmer_view.dartにあるTrimmerViewクラスにページ移動。このとき、_trimmer（動画ファイル）を引き渡している。

④動画再生は、video_view.dartのVideoViewerクラスの実行によるもの。

⑤トリミングは、trim_editor.dartのTrimEditorクラスを実行し、start位置とend位置を検出。

⑥トリミング範囲の描写はstart位置とend位置をtrim_editor_painter.dartのTrimEditorPainterクラスに引き渡してペイントしている。

⑦トリミング範囲にあるサムネイルはthumbnail_viewer.dartのThumbnailViewerクラスを実行し、video_thumbnailプラグインを用いて動作している。

・保存について

⑧”SAVE”をタップすれば、_saveVideoメソッドが実行され、動画保存をするためにtrimmer.dartのsaveTrimmedVideoメソッドが実行される。

⑨saveTrimmedVideoメソッドで、動画を保存するためのフォルダを作成する_createFolderInAppDocDirが実行され、保存先の作成とパスを取得し、Previewクラスにページ移動。

SAVEタップ

⑩preview.dartのPreviewクラスを実行する。この時、トリミングした動画の保存先のパスを引き渡して、動画を再生している。

Preview画面

これで動画の選択からトリミングした動画を保存&再生するところまで解説しました。