html5でブラウザ上から動画の編集（中抜き）とレンダリングをしたい

Question

前提・実現したいこと

開発の前段階でありまして、開発の知恵をお貸しいただければと思います。
サーバ上にある動画ファイルをブラウザ上から編集し、再度動画ファイル化したいと考えています。
編集は動画の一部分だけをぬくだけでいいです。

タイムラインのトラックで、削除するマークをつけたら、その部分だけ抜かれた動画をレンダリングしてサーバ上に保存するというものです。

試したこと

html5のvideoタグを色々と操作していますが、JavaScriptによる動画編集のためのプラグインを探していますがいいのがみあたりません。

お聞きしたいこと

１、動画のオブジェクトをタイムライン上に並べる方法はどうやるのか。
２、編集したあとレンダリングするためにはどのようにしたらよいか。
３、指定の時間を入力するとその部分だけが除かれてレンダリングされにはどうしたらよいか。（このような方法でも構いません。）

コード

<video src="/movie/test.mp4" controls></video>

稚拙なコードですみません。。。

cakephp3を使って開発しようとしています。
movieというフォルダに動画をためていき、そこで再編集するというものです。

linuxの知識、フレームワークの知識、javascriptの知識は一般的に持っています。

Answer 1

まず、大前提として、
・デコード～カット編集～エンコード等といったレンダリング動作をすべてユーザーサイドで行う
・サーバーは元動画データの提供と完成した動画ファイルの受け取りだけを行う
という事でしょうか？

やってやれないことはないでしょうが、実際かなり厳しいかと思うのですが…。
FFMPEGまでEmscriptenの力でJavascript化されたりしてますし、
再エンコードなしでカット編集ができる低圧縮率なエンコードを使用すればなんとか？
かなり工夫しないと平易に作るとまともに動かなさそうです。

「動画のオブジェクトをタイムライン上に並べる方法はどうやるのか。」
はちょっと意味がわかりません、
動画編集のUIとしてのタイムラインを自作するのであれば、
単に動画のサムネイル画像を並べれば済むことで、
動画オブジェクトをズラズラと並べて元データを読み込ませて秒数を指定しちゃったりすると、
間違いなくメモリ食い過ぎでまともに動きませんよ。

ブラウザアプリとして作成する以前に、
動画ファイルの構造とその編集方法に関しての知識習得が必要なように見受けられます。

Comments

[yajin]

ご回答有難うございます。

大前提の件はあっています。

＞動画オブジェクトをズラズラと並べて元データを読み込ませて秒数を指定しちゃったりすると、
間違いなくメモリ食い過ぎでまともに動きませんよ。

確かにおっしゃる通りです。少し動画ファイルの勉強をしはじめました。

概要はわかりましたが、任意の位置から任意の位置までをカットする（中抜きする）場合はどのようにして実現できそうでしょうか。

[退会済みユーザー]

ツイッターのサイトのコードを読もう？（実現されてたはず）

[yajin]

ツイッターでそんなことできるのでしょうか？
いじってみたけど、やり方わかりません。

[退会済みユーザー]

https://twitter.com/asahina1979/status/1082483478652870656
これ

動画（mp4)をあげてから トリミング

[shinobu_osaka]

twitterは関係ないかと。。。
実現するとなるとですか。
javascriptで使えそうな動画エンコーダーなんてffmpegしかなさそうですし、
編集データ(カットする場所の秒orフレーム番号)が確定後はffmpegに投げればいいんじゃないでしょうか？
元データがでかい場合は動画ファイル全体と出力されるファイル全体をメモリに保持するのは無茶なんで、
必要部分をサーバーから随時ダウンロードと同時にエンコードされた動画をアップロードでしょうか？
何にせよユーザーサイドでのエンコードは実用性が低い気がしますけど。。。（速度や負荷）

[yajin]

DLして、再編集後、アップロードもいいのですが、手間がかかるのでできる限り調査してからやりたいと考えています。

[nanamin]

中抜きとはどのような意味でしょうか

[yajin]

https://teratail.com/questions/167648
に新しいものを書きました。
特定の部分を削除し、後ろにくる動画を前に結合するという意味です。