gifの欠点
- ファイルサイズがでかい → ページ読み込みが遅くなる
- シークバーが表示されない → 一時停止、早送りができない
MP4にしてvideoタグで埋め込むといい
<video controls muted autoplay playsinline width="95%"> <source src="mp4動画のURL"> </video>
gifの圧縮アルゴリズムはそこまで最適化されていないため、MP4などの動画フォーマットのほうがファイルサイズを小さくできるらしい。
またvideoタグで埋め込むのでシークバーが表示されるようになる。
こんな感じで再生できるようになる
gif→mp4の変換
コマンド。ffmpeg
がない場合brew install ffmpeg
でインストールできる。
ffmpeg -i org.gif -movflags faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.mp4
いちいち変換するのが面倒くさいのでGithub Actionsする
gif撮ってpushしたらmp4動画の作成が終わっている、という感じにしたい。
workflow
下記を満たすようなstepを書いた。
gifが追加されたとき
: mp4の作成gifがリネームされたとき
: 以前の名前で作られたmp4を削除し、新たな名前でmp4を作成gifが削除されたとき
: mp4の削除gif以外のファイル
: 対象外にする
# .github/workflows/convert.yml name: Convert GIF To MP4 on: push: branches: - master jobs: build: name: Convert GIF runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v2 with: fetch-depth: 0 - name: Setup ffmpeg uses: FedericoCarboni/setup-ffmpeg@v1-beta id: setup-ffmpeg - name: Convert run: | git show --pretty="format:" --name-status HEAD | grep '.gif$' | while read target; do read status gif <<< "$(echo $target | awk '{print $1,$NF}')" printf "\e[31m===========${gif}============\e[m\n" filename=$(basename $gif | sed 's/\.[^\.]*$//') dir=$(dirname $gif) mp4=${dir}/${filename}.mp4 case "$status" in 'A') # add echo 'add' [ ! -e $mp4 ] && ffmpeg -i $gif -movflags faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" $mp4 </dev/null ;; [R]*) # rename echo 'rename' read pre_mp4 <<< "$(echo $target | awk '{print $2}' | sed 's/\.[^\.]*$/.mp4/' )" [ -e $pre_mp4 ] && git rm $pre_mp4 [ ! -e $mp4 ] && ffmpeg -i $gif -movflags faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" $mp4 </dev/null ;; 'D') # delete echo 'delete' [ -e $mp4 ] && git rm $mp4 ;; esac done - name: Commit and push run: | git status if [ -n "$(git status --porcelain 2>/dev/null)" ]; then git config --local user.email "action@github.com" git config --local user.name "GitHub Action" git add -A git commit -m "convert gif to mp4" git push origin master fi
終わり
Github Actionsこんな使い方もあるんだ。楽しい。