図・動画作成動画

はじめに

一昔前は，WEB で動画を配信することなど考えられませんでした．画像ですらファイルサイズをできるだけ小さくして載せていましたが，ネットワーク環境がよくなり動画の配信も抵抗が少なくなりました．面白い動画を提供することも読者のためになるので，私も少しずつ動画も増やすつもりです．

YouTube を使う方法

動画を YouTube にアップし，それを自分のサイトやブログに貼り付けて，再生することができます．これは良い方法です．ファイルサイズの大きな動画を自分のサーバーから配信しないで済みます．ただし，YouTube を使うためにはアカウントとが必要です．

具体的な方法については，「YouTube の使い方」を参照ください．

HTML5 で動画

HTML5 になってから，動画は格段に扱いやすくなりました．ここでは，それを WEB ページに公開する方法を示します．

ビデオファイルのコンテナの変換

ビデオファイルは，動画と音声から構成されます．これらはエンコードやデコードといったプロセスを経て，コンピューターが操作するデジタルデータと人間が分かるアナログデータに変換されます．情報(動画や音声)はいろいろな方法でデジタル化(符号化)することができます．その方法をコーデックと言います．ビデオファイルには，動画と音声のコーデックが必要です．これらのコーデックを集めたものがビデオファイルのコンテナ(ファイル形式のようなもの)です．

現在，WEBで使われているビデオファイルの代表的なコンテナは，以下の表の三つ(WebM, MP4, OGG)です．

この表では，コンテナと共にそれに関係する情報を示しています．ただし，コンテナが決まればコーデックが一意に決まるものではありません．表に示しているコーデックは html 5 で公開するビデオファイルで使われるコーデックです．

WEBサイトに動画を公開する場合，どのコンテナを使うか?—が問題になります．残念なことに，メジャーなブラウザが共通に認識できるコンテナはありません．そこで，ひとつの動画に対して複数のコンテナで公開せざるを得ません．お勧めは，WebM と mp4 です．この二つで公開すれば，メジャーなブラウザで再生できるでしょう．

ffmpeg の基本動作

最初から，これら(Webm, MP4)のコンテナでビデオファイルを作ることは難しいので，変換の操作が必要になります．たとえば，私のカメラで動画を撮影すると，MOVという形式でビデオファイルが保存されます．それを，WEB サイトに適したコンテナに変換します．巷には，たくさんのビデオファイルのコンテナの変換ソフトウェアーがあります．私のお薦めは，ffmpeg です．コマンドラインで操作ができるので簡単です．そして，様々なプラットフォーム(Linux, Windows, Mac)に対応しています．

ffmpeg を使いコンテナを変換する場合の基本的な使い方は，以下の通りです．

$ ffmpeg  -i  入力ファイル  オプション指定  出力ファイル

コンテナの種類は，入出力ファイルの拡張子で判断します．オプションは，たくさんあります．wikipedia の FFmpeg に多くのオプションの説明があります．代表的なオプションは，以下の通りです．

インプットファイルのみを指定すると，ビデオファイル情報が得られます．

webm への変換

ここでは，私のカメラの動画フォーマット MOV から，webm と mp4 に変換する方法を示します．元の画像のフォーマットが MOV と異なっても，同じような操作になります．単純に変換するのであれば，以下のようにすると webm に変換されます．

$ ffmpeg  -i  steam_engine.MOV  -vcodec libvpx  -acodec libvorbis  -s 320x180  -aspect 16:9  -vb 2M  steam_engine.webm

コンテナの変換(MOV→webm)は，拡張子から判断します．画質は，オプション「-vb」で変えることができます．ビットレートを増やすとファイルは大きくなりますが，きれいな動画が得られます．

mp4 への変換

先ほどの webm への変換とほとんど同じようなものですが，mp4 への変換は以下のようにします．

$ ffmpeg  -i  steam_engine.MOV  -vcodec libx264  -acodec libfdk_aac  -s 320x180  -aspect 16:9  -vb 0.5M  steam_engine.mp4

html の記述

ffmpeg で変化された動画のファイルは HTML5 のタグ<video>を使うとブラウザ表示できます．具体的には，以下のようにします．

<video width="320" height="260" controls>
      <source src="video/steam_engine.webm" type="video/webm">
      <source src="video/steam_engine.mp4" type="video/mp4">
      <p>この動画を再生するには，videoタグをサポートしたブラウザが必要です．</p>
      </video>

タグ<video>中の width と height は，表示する枠のサイズを決めます．「controls」と書くと，ビデオファイルの制御ボタン(再生，ポーズや音量など)が現れます．制御ボタンは枠内に入るので，制御ボタンを使うときには，枠のサイズをビデオファイルよりも大きくします．

タグ<source>でビデオファイルとコンテナを指定します．複数のソースを指定可能で，ブラウザは最初に再生可能な動画を表示します．この例では，再生可能なビデオファイルが無い場合，タグ<p>が実行されます．

先ほどの html は，以下のように表示されます．

ffmpeg で動画の編集

結合

3つの動画 (video_01.mp4, video_02.mp4, video_03.mp4) を結合して，ひとつのファイル (all.mp4) にするコマンドは，次のとおりです．

$ ffmpeg -i video_01.mp4 -i video_02.mp4 -i video_03.mp4 -filter_complex "concat=n=3:v=1:a=1" all.mp4

オプション「-i」を使い，入力ファイルを指定します．「n=3」は入力ファイル数です．「v=1」と「a=1」は画像と音声の両方の結合を指定です．ゼロの場合 (v=0 or/and a=0) は， (動画 or/and 音声) は結合されません．

切り出し

ffmpeg は開始時刻と切り出し時間を指定して，動画を切り出すことができます．以下の例は，「video.mp4」を切り出し，「out.mp4」を出力します．

• 開始時刻を 123 [秒] ，その後の 60 [秒] 間，切り出します．

  $ ffmpeg -ss 123 -i video.mp4 -t 60 out.mp4

• 123 [秒] 後のすべての動画を切り出します．

  $ ffmpeg -ss 123 -i video.mp4 out.mp4

• 動画の最初の 246 [秒] 間を切り出します．

  $ ffmpeg -i video.mp4 -t 246 out.mp4

その他

■ アニメーション gif から mp4 に変換

以下のコマンドで変換します．

$ ffmpeg -i video.gif -movflags faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" out.mp4

ページ作成情報

参考資料

更新履歴

last update:2019/03/02 11:24:12