注目キーワード
  1. 技術
  2. 広告
  3. IDFA
  4. PHP
  5. WordPress

githubのreadmeに動画を載せる(アップロードしたい)ための方法

  • 2021年1月22日
  • 2021年1月22日
  • 技術
  • 0件
技術

githubに動画を載せる(アップロードしたい)ことがありましたので、そのときの方法をメモしておきます。今回は、手元にあるmp4ファイルをgifファイルに変換して、readmeにアップロードしています。

目次

動画をmp4ファイルからgifファイルに変換する

動画をそのままgithubのreadmeにアップロードして、自動再生させることができないので、動画をmp4ファイルからgifファイルに変換します。ここでは、2つの方法を紹介していきます。

ローカル上でコマンド実行して、mp4ファイルからgifファイルに変換する

  • homebrew をインストール

homebrewをまだインストールしていない場合は、brewコマンドを使いたいため、インストールします。

$  /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
  • ffmpeg をインストール

ffmpeg をインストールします。ffmpegは、動画や音声ファイルのエンコーダです。変換作業時に必要になります。

$ brew install ffmpeg
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 1 tap (homebrew/core).
==> Updated Formulae
Updated 1 formula.

==> Downloading
..................................................................................
..................................................................................
..................................................................................
  • imagemagick をインストール

imagemagick をインストールします。imagemagickは、画像圧縮や変換をしてくれます。

brew install imagemagick
Updating Homebrew...
==> Auto-updated Homebrew!
..................................................................................
..................................................................................
  • 圧縮対象のmp4ファイルのあるディレクトリに移動
$ cd /path/to/

cdコマンドで、対象のディレクトリに移動します。

  • mp4からgifに変換
$ ffmpeg -i sample.mp4 -an -r 10 %04d.png

まず、動画をpngに変換します。今回は、10frames/secになるようにしています。コマンド実行後に、ディレクトリを見ると、分割されたpng画像が保存されています。

$ convert *.png -resize 40% output_%04d.png

作成したpngファイルをリサイズします。

$ convert output_*.png sample2.gif

gifに変換します。コマンドの実行が終わると、gif画像ができているので、正常に変換されているかみてみましょう。
CLIのみで、mp4からgif画像への変換ができました。

GUI上で動画をアップロードして、mp4ファイルからgifファイルに変換する（GIPHYというサービスを使う）

  • GIPHYにアクセス

ローカル上でコマンド実行するというのが慣れていない方は、変換サービスを使いましょう。ここでは、GIPHYというサービスを使います。
https://giphy.com/

  • ファイルをアップロード

アップロード画面から、動画をアップロードします。
https://giphy.com/upload

サービスを利用するには、アカウント登録が必要になりますので、登録していない方は登録してください。アップロードして、画面に沿って進めると、gif画像ができました。手元にダウンロードして、問題ないか確認してみましょう。

githubに動画ファイルから作成したgifファイルをアップロードする

githubのissueを作成して、動画をアップロード

まず、gifファイルをアップロードします。下記の画面のように、

右上にある、New issue をクリックします。
クリックしたら、下記のような画面が表示されるかと思いますので、画面下部にある、Attach files by dragging & dropping, selecting or pasting them. をクリックして、先ほど作成したgifファイルをアップロードします。

アップロードしたら、アップロード中と表示されて、

上記画面から数秒待つと、アップロードが完了します。

アップロードが完了すると、上記のように、URLが作成されますので、まるっとコピーしてください。

readmeに動画(gifファイル)を貼り付けて、githubにpushする

readmeを作成

  • README.md
# readme

![sample2](https://user-images.githubusercontent.com/37802825/105457444-322ea900-5cca-11eb-8026-93143c568db7.gif)

上記のように記載して、pushします。

githubを確認

readmeを見ると、動画がアップロードされているのが確認できました。