東京都府中市のWEB制作会社Maromaroのブログです

  • TOP
  • Web制作
  • どこよりも簡単!ffmpegでHLS変換&動画の圧縮 | web制作会社 Maromaro Blog

2021.06.07

yamahana

どこよりも簡単!ffmpegでHLS変換&動画の圧縮

  • このエントリーをはてなブックマークに追加

こんにちは。yamahanaです。

最近mp4 の動画を HLS に変換したり、動画の圧縮をする作業があり、

結構苦戦したのですが、ffmpegというツールがとっても便利だったので、メモも兼ねて残しておきたいと思います。

動画については全くの素人なので、多分どこよりも簡単になっているはず!

HLSとは?

  • HTTP Live Streamingの略。
  • 最も広く使用されている動画ストリーミングプロトコル。
  • 動画ファイルをいくつかの小さいファイルに分割して動画として読み込む。
  • 特別な設備が不要

ffmpeg でmp4 の動画を HLSに変換!

    まずffmpegというツールをダウンロードします。

    https://ffmpeg.org/

    コマンドプロントを開いてC¥Users¥ユーザー名>の後に以下を入力してエンターキー。
    “C:\Users\ユーザー名\Desktop\フォルダ\movie.mp4”の所はhlsにしたい動画のパスをいれてください。

    hls_time 10hは10秒ごとの.ts 分割ファイルになるように設定するということらしいです。

    ffmpeg -i "C:\Users\ユーザー名\Desktop\フォルダ\movie.mp4" -c:v copy -c:a copy -f hls -hls_time 10 -hls_playlist_type vod -hls_segment_filename "movie%3d.ts" movie.m3u8

    しばらくすると、C:\Users\ユーザー名に細切れのファイルが生成されます!

    movie.m3u8、movie000.ts、movie001.tsなどのファイルです。

     

    ffmpeg で動画を圧縮!

    お次は動画の圧縮。

    動画を圧縮できるサイトとかもあるんですが、私はファイルを読み込んだとたんにPCがフリーズしてしまい、ネットが使用できなくなりました。。動画が重かったんですかね。

    なので、今回ffmpegを使ってみました。

     

    今度は圧縮したい動画ファイルをC:\Users\ユーザー名のフォルダに入れてみます。

    同じようにコマンドプロントを開き、下記を入力します。

    movie.mp4をmovie02.mp4に名前を変更して圧縮します。
    CRFというエンコーダーの数値を18にしています。これはかなり画質を悪くしない数値らしく、23,28と6づつ変更できて、高くなると画質が悪くなるみたいですが、圧縮率はあがるそうです。

    ffmpeg -i movie.mp4 -crf 18 movie02.mp4

    動画の重さにもよりますが、生成するまでに私は3分ほどかかったでしょうか。

     

    動画が上記の数値で圧縮しても理想のサイズにならなかったのもあり、今度はこちらの方法も試してみました。

    ビットレートを1200kb/sに変更しました。
    ビットレートが高いと1秒間に送受信できるデータの量が増えるらしいんですが、高いと動画が重たくなるらしいです。

    ffmpeg -i movie.mp4 -b:v 1200k movie02.mp4

    43.5MB→2.87MBに圧縮できました。

    画質も見た所は全く変わりは見られませんでした。

    素晴らしいです!

    動画の圧縮にも色々なオプションを変更することで圧縮率が変更できるみたいです。

    おまけ

    ちなみにhlsをhtml上に実行した際に、hls.jsを使用したのですが、サムネの設定やオート再生などの設定はvideoタグでできました!
    今回はまってしまったので、メモしておきます。
    https://github.com/video-dev/hls.js/

    おわりに

    最近WEBサイトの作成で、動画を添付したページなどが増えてきました。
    少しづつ、動画の知識もつけていかなければいけないですね。

    以上、Maromaroのyamahanaでした。

     

    ———————————————–
    ★今回参考させていただいたサイト
    https://jbjbgame.com/post-5623/
    https://syobochim.hatenablog.com/entry/2021/01/07/004600

    • このエントリーをはてなブックマークに追加