投稿者「mynote」のアーカイブ

JavaScriptでHTML5の<video>を操作する方法

HTML5で追加された<video>タグを使うと簡単に動画を表示することができます。

<video id="video" src="video.mp4"></video>

標準では再生や一時停止などを行う操作パネルが表示されていませんが、controlsを追加することで、操作パネルを表示することもできます。

<video id="video" src="video.mp4" controls></video>

この<video>をJavaScriptから操作したい場合は次のような感じで実装できます。

<video>を再生する

var element = document.getElementsById('video');
element.play();

<video>の一時停止する

var element = document.getElementsById('video');
element.pause();

他、特定の位置にシークしたり、ボリュームを調整したりといった操作もJavaScriptからできるようになっています。詳細はリンク先などを確認してみてください。

リンク

HTMLMediaElement – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

<video>: The Video Embed element – HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Video

FFmpegで連番画像から動画を作成する際のTIPS

FFmpegで連番画像から動画を作成する際のTIPSをまとめてみました。

※一部、過去記事と重複する内容もあります。

画像ファイルから動画ファイルを作成するコマンド

0001.png0002.png0003.png …という連番画像から動画ファイル(MP4)を作成するには以下のようなコマンドを実行します。

$ ffmpeg -i %04d.png -c:v libx264 output.mp4

%04d.pngの部分が連番画像ファイルを指定する部分になっています。

例えば、image_001.pngimage_002.pngimage_003.png …というファイル名になっている場合はimage_%03d.pngのような感じにします。

関連記事: アニメーションGIFの作り方

フレームレートの設定

オプションを指定していない場合、フレームレートが25fpsの動画ファイルが作成されます。変更したい場合は-rコマンドでフレームレートを設定してください。

$ ffmpeg -r 30 -i %04d.png -c:v libx264 output.mp4

画質の設定

動画の画質を設定する場合は-crfオプションを使います。デフォルトでは23になっています。画質を上げたい場合はより小さな値を、画質を下げたい(ファイルサイズを小さくしたい)場合はより大きな値を設定します。

$ ffmpeg -i %04d.png -c:v libx264 -crf 20 output.mp4

関連記事: FFmpegでYouTube向けにエンコード

ループの設定

動画を何周かループさせたい場合は-stream_loopオプションを使います。例えば、-stream_loop 2とすると、最初の1周分とあわせて同じ内容が3回表示される動画ファイルになります。

$ ffmpeg -stream_loop 2 -i %04d.png -c:v libx264 output.mp4

YouTubeなどのサイトにアップロードする場合

YouTubeなどの動画サイトにアップロードする場合は-pix_fmt yuv420pを付けないと正常に再生できない場合があります。アップロードしてみて、正常に再生できないようであれば、設定を見直してみてください。

$ ffmpeg -i %04d.png -c:v libx264 -pix_fmt yuv420p output.mp4

関連記事: FFmpegでYouTube向けにエンコード

Unity2Dでオブジェクトへのクリックを取得する方法

Unity2Dでゲーム内に配置したオブジェクトをクリック(タップ)したい場合は、対象オブジェクトにCollider2DBoxCollider2DとかCircleCollider2Dなど)を設定した上でPhysics2D.Raycastを使って実装できます。

サンプル

void Update()
{
  if (Input.GetMouseButtonDown(0))
  {
    var mousePosition = Camera.main.ScreenToWorldPoint(Input.mousePosition);
    var hit = Physics2D.Raycast(mousePosition, Vector2.zero);
    if (hit.collider != null)
    {
      // クリック位置にオブジェクトがある場合に実行したい処理
      Debug.Log(hit.collider.name);
    }
  }
}

※3D用のColliderと混同しないように気を付けてください。

リンク

Unity – Scripting API: Physics2D.Raycast
https://docs.unity3d.com/ScriptReference/Physics2D.Raycast.html

Unity – Scripting API: Collider2D
https://docs.unity3d.com/ScriptReference/Collider2D.html