【ffmpeg】VP9 コーデックから H.264 コーデックへの動画変換

YouTubeやGoogleフォトからダウンロードした動画は、他のサービスやツールでの利用が難しいことが多く、特に動画コーデックの互換性が問題となることがあります。特にVP9コーデックで圧縮された動画は、特定のプラットフォームやアプリでの再生がサポートされていない場合があります。したがって、VP9コーデックで圧縮された動画をH.264コーデックに変換することは、さまざまなデバイスやサービスでの利用を可能にするための重要なステップです。

👉 ffprobe vs mediainfo

 

🎬 VP9コーデックとは

VP9はGoogleが開発したオープンでロイヤリティフリーな動画圧縮コーデックであり、VP8の後継にあたります。このコーデックは、特に高解像度の動画配信に適しており、H.264に比べて同等の品質でファイルサイズを小さくすることが可能です。VP9はYouTubeやGoogleのストリーミングサービスで広く利用されており、その高い圧縮効率と画質が評価されています。しかし、一部のプラットフォームやデバイスでは、VP9を直接再生できないことがあり、この点がユーザーにとっての障壁となることがあります。

👉 VP9 - Wikipedia

 

🎬 H.264コーデックの利点

H.264は、現在最も広く使用されている動画圧縮コーデックの一つであり、様々なデバイスやプラットフォームでサポートされています。これにより、H.264でエンコードされた動画は、ほぼすべてのメディアプレーヤーやデバイスで再生可能であり、特にSNSやオンラインサービスにおいては、非常に高い互換性を誇ります。したがって、VP9からH.264への変換は、動画を広範に利用するために必要な手段と言えます。

 

🎬 変換方法

VP9コーデックからH.264コーデックへの変換は、FFmpegという強力なオープンソースの動画処理ツールを使用することで簡単に行えます。以下のコマンドをターミナルで実行することで、VP9で圧縮された動画をH.264形式に変換できます。


ffmpeg -i before.mov -y -vcodec libx264 -qp 0 -pix_fmt yuv420p -acodec copy after.mov




-i before.mov : 変換元の動画ファイルを指定します。
-y : 既存の出力ファイルを上書きすることを指示します。
-vcodec libx264 : 出力動画のコーデックをH.264（libx264）に指定します。
-qp 0 : 品質を最優先にする設定です。数字が小さいほど高品質になりますが、ファイルサイズも大きくなります。
-pix_fmt yuv420p : 出力動画のピクセルフォーマットを設定します。多くのデバイスでの再生互換性を確保するために、yuv420pが推奨されます。
-acodec copy : オーディオコーデックを変更せずに、元のオーディオをそのままコピーすることを意味します。

 

🎬 実際の利用例

この方法を使用することで、Instagramなどのプラットフォームに動画をアップロードできるようになります。動画の圧縮と変換を行うことで、質の高い動画を手軽に他のサービスで利用することが可能になります。また、これにより視聴者にとっても快適な再生体験を提供することができるでしょう。

 

🎬 まとめ

VP9からH.264への動画変換は、動画の互換性を向上させ、様々なプラットフォームでの利用を可能にするための有効な手段です。FFmpegを使用することで、手軽に高品質な動画を変換し、SNSやオンラインサービスでのシェアを促進できます。このように、動画の圧縮形式を変更することは、デジタルコンテンツの普及において非常に重要なプロセスです。


ffmpeg -i before.mov -c:a copy -c:v libx264 after.mov

これで Instagram にもアップできました!


【SwiftUI】Create Draggable Reorder ListView without List

👉 Drag and Drop List In SwiftUI. In this article, We will explore how to… | by Mobile Apps Academy | Medium

よくある UI の挙動を SwiftUI でどれだけシンプルに作れるのか。

やってみました。

本来は、何かを NSItemProvider() 経由で、

ドロップ先に渡すのが役目っぽいけども、

DropDelegate の便利さを利用して

配列を並び替えるイメージ。

並び替えのアニメーションは withAnimation デフォルトに頼る。

iOS と macOS、Preview と シュミレータ と 実機、OS バージョンなど、

互換しようとするといろいろありそう。

ここらのコンポーネントはまだ不安定な感じ ?


【SwiftUI】吹き出しを作りたい

Instagram のこれ。

作ってみようと。

 

🧑🏻‍💻 popover で作る

使えそうなのでやってみました。

👉 popover(isPresented:attachmentAnchor:arrowEdge:content:) | Apple Developer Documentation



struct AnimatedSpeechBubble: View {
  @State private var show = false

  var body: some View {

    HStack {
      Text("お知らせ")
        .popover(isPresented: $show, arrowEdge: .trailing) {
          Text("横に出せないの?")
            .padding(.horizontal)
            .foregroundStyle(.background)
            .presentationBackground(.red)
            .presentationCompactAdaptation(.popover)
        }
      Spacer()
    }
    .frame(width: 250, height: 50)

    Button(show ? "hide" : "show") {
      show.toggle()
    }
    .buttonStyle(.borderedProminent)

  }
}

#Preview("animated") {
  AnimatedSpeechBubble()
    .padding()
    .frame(maxWidth: .infinity)
}

なぜか横 ( .trailing ) 方向に出すことができません。

GIFにしてみたら背景色もなんかあやしい。

あと、ボタンの色も勝手に変わる。

 

🧑🏻‍💻 手作りで

基本の組み合わせで作ります。

まず、吹き出しを作ります。

Path() は使いません。


struct SpeechBubble: View {
  var count: Int

  var body: some View {
    HStack(spacing: 0) {
      Rectangle()
        .fill(.red)
        .rotationEffect(.degrees(45))
        .frame(width: 20, height: 20)
        .offset(x: 14)
        .clipShape(.rect) // *
      HStack {
        Image(systemName: "heart.fill")
        Text("\(count)")
      }
      .foregroundStyle(.background)
      .padding()
      .background(.red, in: .rect(cornerRadius: 8))
    }
  }
}

#Preview("bubble") {
  SpeechBubble(count: 999)
}

アニメーションな部分は scale と opacity のトランジションを使います。


if show {
  SpeechBubble(count: 999)
    .transition(.scale(scale: 0.25).combined(with: .opacity))
}

いい感じです。

 

🧑🏻‍💻 まとめ

手作りでまあいけそうです。

以上のソースコード一式です。