[動画機能] 動画編集・削除が欲しい

[komagata]

詳細はこちら。

動画機能 · fjordllc/bootcamp Wiki

[a-terumoto-gs]

@komagata
お疲れ様です！
こちらのissueの仕様について質問させてください。

動画を選択した際にプレビューが表示される仕様にするために実装を進めていたのですが、行き詰ってしまいました。

画像選択の場合はプレビュー表示についてapp/javascript/fileinput.jsで実装されていたので、
動画もそれにならってapp/javascript/movie-fileinput.jsを実装しました。
その結果mp4の場合は下のようにプレビュー表示がされるようになりました。動画の再生も可能です。

ですが、movの場合には表示に問題が生じていて、プレビュー表示がうまく行きません。

原因としては推測ですが、私の開発環境がWindowsであり、ブラウザでのmov再生がサポートされていないせいではないかと考えています。

そのため、アップロードされたmovファイルをmp4ファイルに変換して表示するようにできるように実装しようかと調査をし、使えそうなnpmとしてffmpeg.wasmというものを見つけました。
https://github.com/ffmpegwasm/ffmpeg.wasm
https://forest.watch.impress.co.jp/docs/serial/yajiuma/1345710.html

しかし、さらに調査した結果、ffmpeg.wasmの使用には問題がありそうなことがわかりました。
Chromeでしか動かない、またファイルが大きすぎると動作しない場合もあるということでした。
https://blog.n-t.jp/post/tech/ffmpeg-wasm-getting-started/
https://zenn.dev/mryhryki/articles/2020-12-18-ffmepg-wasm

他の方法についても調べてみたのですが、有効そうな方法を見つけられませんでした。

以上のことから、mp4とmovの両方に対応した形での編集画面でのリアルタイムのプレビュー表示は難しいのではないかという結論になりました。

現在考えている実装の方向性としてはアップロードのファイルをmp4に限ることを考えています。
mov→mp4への変換は検索するとフリーで使用できるツールがたくさんあり比較的簡単にできそうなことを踏まえ、アップロード前にmovファイルはmp4への変換を挟んでもらう方向にするのがよいのではないかと…

こちらの仕様でいかがでしょうか？

また、変換の方法について、他にいいものがあればそちらで実装したいと思いますので、ご教授いただけると助かります。
長くなってしまいましたが、確認よろしくお願いいたします！

[komagata]

@a-terumoto-gs まずmovファイルをvideoタグで表示するだけのHTMLを作ってみれば検証できるとおもいます。
そちらをおねがいします～

[a-terumoto-gs]

@komagata @machida
お疲れ様です！
メンバーレビュー中に2点ほど確認したい点がでてきましたので確認させてくださいm(__)m

まず1点目について、動画追加の際の通知についてです。
現在の実装では動画追加の際の通知に関しては未実装なのですが、こちらどうしたほうがよろしいでしょうか？
追加が必要であればその旨お伝えいただけるとありがたいです！

次に2点目について、動画を追加・更新時のボタンの文言についてです。
現在はアクションで場合分けをして文言を変更するようにしていて、
newとcreateでは「動画を追加」、editとupdate では「内容を更新」といった形になっています。
しかし、wip状態からの初回の公開では「動画を追加」の文言のほうが違和感がなくてよいのではないかというご意見をいただき、確かにそうだなと思いまして、このissueではそのように文言変更しようと思っています。
そこで提案なのですが、実装の参考にしたDocsの仕様もnewとcreateでは「動画を追加」、editとupdate では「内容を更新」といった形になっているので、Docsの仕様も別issueとして修正したほうがいいのではないかと思います。
いかがでしょうか？
もしそうしたほうがよいのであればissue登録を行いますので、その旨お伝えください！

確認よろしくお願いいたしますm(__)m

[komagata]

@a-terumoto-gs

まず1点目について、動画追加の際の通知についてです。

今回は実装しなくて大丈夫です～

実装の参考にしたDocsの仕様もnewとcreateでは「動画を追加」、editとupdate では「内容を更新」といった形になっているので、

↑の「動画を追加」はミスで、「Docを追加」とかですかね？

次に2点目について、動画を追加・更新時のボタンの文言についてです。
現在はアクションで場合分けをして文言を変更するようにしていて、
newとcreateでは「動画を追加」、editとupdate では「内容を更新」といった形になっています。
しかし、wip状態からの初回の公開では「動画を追加」の文言のほうが違和感がなくてよいのではないかというご意見をいただき、確かにそうだなと思いまして、このissueではそのように文言変更しようと思っています。
そこで提案なのですが、実装の参考にしたDocsの仕様もnewとcreateでは「動画を追加」、editとupdate では「内容を更新」といった形になっているので、Docsの仕様も別issueとして修正したほうがいいのではないかと思います。
いかがでしょうか？

@machida こちらいかがでしょうか？

[machida]

@a-terumoto-gs @komagata

Docsと同じように、動画も
newとcreateでは「動画を追加」、editとupdate では「内容を更新」でいきたいですが、確かにWIP状態からの初回の公開では「動画を追加」の文言のほうが違和感がないですね。

なので、

• newとcreateでは「動画を追加」、editとupdate では「内容を更新」
• 但し、WIP状態からの初回の公開では「動画を追加」

でお願いします。

[a-terumoto-gs]

@komagata @machida
コメントありがとうございます！
その仕様で実装させていただきます。
Docsに関するissue登録も行っておきますm(__)m

[machida]

@a-terumoto-gs ありがとうございます！よろしくお願いします🙏

[github-actions]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[komagata]

完了していたのでCloseします。