HTML5からvideoタグが使えます。サーバーにmp4ファイルを直接置き、サイトで表示していることも増えてきました。
mp4ファイルは動画なのでファイルサイズが大きいです。PCの場合は動画ファイルサイズはあまり気にならんくても、スマホの時には可能な限り小さくする必要があります。
スマホでは画質は関係ないので動画の圧縮率を極端に高めても問題ないことが多いです。
最低でもファイルサイズは1～3MBぐらいまで小さくしたいところです。
この記事では既存のMP4ファイルを圧縮してファイルサイズを小さくするときに便利なオンラインツールをご紹介します。
Oneline-convert.comが便利
Online-convert.comでは、画像や動画だけなく様々なファイルフォーマットを変換することができます。
また、変換だけでなく、圧縮にも対応しているのが優れています。
希望のサイズを入力⇒動画をそのサイズに圧縮してくれる
設定項目が沢山出てくるので、使いにくそうと思うかもしれません。
しかし、心配はいりません。
設定はチョー簡単です。
希望のサイズを入力するだけでOKです。
ファイルサイズが大きい場合はvideosmallerが便利
Adobe Stockなどで動画を購入すると、movファイル形式で150MB以上あったりします。
オンラインでファイル形式を変換できるサービスは100MBが限度です。まずは、ファイルサイズを小さくしなければオンラインサービスを利用できません。
しかし、videosmallerは500MBのファイルまで対応しています。
ファイル形式も、movも対応しているので、Adobe stockの大きな動画も変換できます。
videosmallerで動画サイズを小さくした後、ファイル形式を変換する方法が一番簡単にきれいな動画を得ることができます。
横幅を1024ぐらいで音声なしに変換
動画ファイルが大きいのは、画面サイズが大きいからです。Web用であれば思い切って横幅を小さくしても大丈夫です。
1024ぐらいの横幅で十分です。
サイズを変更して何度か変換して、画質とファイルサイズを比べて最適なサイズを決めましょう。
音声ありの場合は、音声もカットするとさらに小さくなります。
ファイル形式の変換
videotoconvertは、500MBまで対応したファイル変換サービスです。
こちらのサービスを使ってファイル形式をmov⇒mp4などに変換することができます。
スマホとPCで動画を切り替える方法
せっかくサイズを小さくした動画ファイルを、PCとスマホで呼び分けるにはどうしたらよいでしょうか？
wp_is_mobileを使う方法
videoタグで直接呼び出す場合はHTML内で直接動画ファイルを指定する必要があるので、wp_is_mobile()を使う方法が便利です。
<?php if(wp_is_mobile()):?>
<video id="bg-video" src="sp.mp4" autoplay loop muted></video>
<?php else:?>
<video id="bg-video" src="pc.mp4" autoplay loop muted></video>
<?php endif;?>javascriptでsrcを切り替える方法
Lazyloadのようにデバイスによって読み込む動画をjavascriptで切り替える方法もあります。
この方法だと、javascriptのメディアクエリでデバイスの判定を行うので、レスポンシブデザインをキープできます。
まとめ
動画ファイルをサイトで使う時に、Youtubeに上げるか直接サーバーに置くか悩むことが多いと思います。
転送量が気になる場合は、Youtubeに上げる方が本来は良いと思います。しかし、転送量が気にならずYoutubeに上げたくないということであれば、MP4形式でサーバーに直接アップロードするしかありません。
そんな時は、動画の圧縮率を高めることでサイトの表示が早くなると思いますので、今回の記事を参考になると思います。
