from 実装のギリギリ手前で止め

動画をtrimming&cutしてGyazoにuploadするUserScript

ffmpeg.wasmを使う

Page Menuから使う

いくつかのcomponentを作る必要がある

cut範囲を指定するComponent

つまみが2つあるsliderみたいなのを作る

時刻を直接入力して指定できるようにもする

triming範囲を指定するComponent

Windows Photoのtrimming機能のUIを参考にしたい

UIの実装

references

<span> で組み立てている

Windows Photoのtrimming機能と同様に、grid線が引かれている

<div> で切り取り枠を組み立てている

点線はborder: dashedを使う

cursor表示はcursor (CSS)で変える

mousedown を検知したら、離すまで移動量を検知し、その分動かしている感じ？

kakeruの縄なげツールは、 <canvas> 上に直接選択範囲を描画している

cursorの位置からクリックした時の当たり判定をしている

cursorの変更はしてない。というかできない

cursor変更も反映できると親切かも

動画をpreviewするComponent

<canvas>を使うのか？

web-dspのdemoのcodeを調べてみよう

動画出力前のpreviewをやっている

少し見てみた。やっぱり<canvas>で書き出してるみたい

動画の編集設定objectのformatを決める

動画の再生開始位置・再生終了位置

動画のtrimmingの範囲

外枠

#2021-06-08 03:11:41

#2021-05-25 06:12:38