頭と尻尾はくれてやる!

パソコンおやじのiPhoneアプリ・サイト作成・運営日記


iMovieで縦長動画を作成したい

「赤ちゃんの成長グラフ」というiOSアプリのアップデートで、子供の身長をARKitを使って計測するって機能を追加する予定。



↑そのためアプリ内のヘルプから見られる動画を作ってみた。文字で説明するより動画の方がわかりやすいかなってことで。iPhoneから見ることを想定してるので縦長だ。
埋め込んでもMacのブラウザで見ても上のように左右に黒い部分ができちゃうが、iPhoneで見ると自動的に(スタートボタンのみで)iPhoneのディスプレイにきっちりしたサイズで再生された。


今回初めて縦長動画をiMovieで編集したのでそのあたりの手順をメモ。

(1) iPhone 7 Plus実機で動画を撮影
動画サイズは1080x1920。

オリジナル動画

↑iOS 11の画面録画機能を使っているので録画時にステータスバーが赤くなる。

(2) 動画を回転
編集ソフトのiMovieは縦長動画を出力できない(はず)のでまずはffmpegで90度回転させる。
ffmpeg -i input.mp4 -vf transpose=2 output.mp4
transpose=2は反時計回り。

(3) ステータスバー部分を削除
なんでステータスバーが赤いの?ってユーザーが思うかもしれないのでその部分をffmpegでカットすることに。
ffmpeg -i input.mp4 -vf crop=1868:1080:52:0 output.mp4
↑ざっと測るとステータスバーの高さが52pxくらいだったのでこの値でやってる。

(4) iMovieで編集
上の動画、タイトル画像やキャプションの画像などをiMovieで読み込み編集。

編集中動画

↑90度回転させているのでキャプションなども90度回転させた画像を準備してる。
編集完了後に動画を出力。1280x720の横長動画ができる。

(5) 動画を回転
時計回りに90度回転させて縦長にする。
ffmpeg -i input.mp4 -vf transpose=1 output.mp4
これで720x1280の縦長動画になる。

(6) YouTubeにアップロード
普通にアップロードする。縦長だからといって特にどうこうしなかった。

なお、iOSアプリではUIWebViewを使って動画を表示してる。
{
    UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 100, w, h)];
    [self.view addSubview:webView];
    
    NSURL* url = [NSURL URLWithString:@"https://www.youtube.com/embed/uyRx7XrNHxQ"];
    NSURLRequest* request = [NSURLRequest requestWithURL:url];
    [webView loadRequest:request];
}
*version
iOS 11 beta 10
iMovie 10.1.6
ffmpeg 3.2.2

<< ヨーグルト生産第5弾、R-1複製100回成功  TopPage  AVSpeechSynthesizerの声を録音したい >>

コメント


管理者にだけ表示を許可する
 

トラックバック

トラックバックURL
http://ringsbell.blog117.fc2.com/tb.php/1087-3ae6f456




Copyright ©頭と尻尾はくれてやる!. Powered by FC2 Blog. Template by eriraha.

FC2Ad