動画の最適化

[shun91]

#2 から分離

https://github.com/CyberAgentHack/web-speed-hackathon-2020/wiki/Web-Speed-Hackathon-Online-%E5%87%BA%E9%A1%8C%E3%81%AE%E3%81%AD%E3%82%89%E3%81%84%E3%81%A8%E8%A7%A3%E8%AA%AC#%E7%94%BB%E5%83%8F%E3%81%AE%E6%9C%80%E9%81%A9%E5%8C%96

[shun91]

Replace animated GIFs with video for faster page loads
https://web.dev/replace-gifs-with-videos/

試しにファーストビューに出てくる動画をwebmに変換してみる

インストール

brew install ffmpeg

変換

ffmpeg -i public/movies/b3998a47-ee87-483e-acf1-8e5b69c8527a.gif -c vp9 -b:v 0 -crf 41 public/movies/b3998a47-ee87-483e-acf1-8e5b69c8527a.webm

webmをfetchできるようにする
→fetchというか普通にsrc属性にURL指定するだけでいいか

PausableMovieでwebmを表示できるようにする
→videoタグ使う

上記で表示できたので、以下を実施。

他の動画もwebmに変換

for f in public/movies/*.gif; do ffmpeg -i "$f" -c vp9 -b:v 0 -crf 41 "${f%.gif}.webm"; done

参考：ffmpegでフォルダ内の動画を一括変換する - Qiita
https://qiita.com/hosota9/items/29f845854db2e4eeebc0

gitでの表示部分を削除する

postした動画もwebmに変換されるようにする

メモ

gifler, omggifが不要になる

[shun91]

TODO

VRTで差分が出てる

CyberAgentHack/web-speed-hackathon-2021-leaderboard#19 (comment)

動画部分で差分が出ており、画質が違うのか・・？

期待値画像を観ると、キャラクターが登場してない。
https://github.com/CyberAgentHack/web-speed-hackathon-2021-leaderboard/blob/main/scripts/vrt/expected/%E3%83%9B%E3%83%BC%E3%83%A0%20-%20Desktop.png

画像や音声など他のメディアのロードによっても左右されそうな気がするので、そっちを改善したら直るかもしれない。

postした動画もwebmに変換されるようにする

webmにすると、ここの処理が終わらずリクエストがタイムアウトしてしまう。
ffmpegのオプションを見直す必要がありそう？
https://github.com/shun91/web-speed-hackathon-2021/blob/main/server/src/converters/convert_movie.js#L24

以下を見ながらオプションを見る限り、問題はなさそう。。
https://blog.katsubemakito.net/macos/ffmpeg

タイムアウト後、しばらくしてからサーバー側のログを確認すると変換が完了してたっぽい。
単に時間がかかるだけなのかも。

あとで同じ動画の変換をCLIで試してみよう。