iPhoneでYoutubeをドットバイドット再生する方法

iPhoneはX以降OLEDディスプレイを用い、今では120Hz、OLEDにも関わらず1000nitを超える高輝度とかなりの高性能ディスプレイが搭載されています。

しかし現状、iPhoneではどんな動画を再生しても必ず少し滲みます！

おそらくこのブログを開いたニッチな方や映像制作などに携わる人は知っていると思います。

ですが、よくわからず開いたという人や自分含めただ高画質に動画を見たいという人もいると思うので厳密な説明や用語をできるだけ使わず、なぜ滲むのかどうすればドットバイドットで表示できるのか解説していきます。

iPhoneでは動画を再生するとき、基本的に縦でも横でも必ず画面いっぱいに広がって再生されます。

このとき、動画は必ず縮小 or 拡大がされ本来の画質で再生されません。

一体どういうことかわかりやすくするために画像を用意しました。

白と黒の市松模様を１ピクセルごとに配置した動画を作成し比較します。

下の画像はiPhone11promaxのスクリーンショットです。

こちらがピクセルパーフェクト表示したもの

こちらがYoutubeで全画面表示したものです。

これだけではまだただの灰色の画像にしか見えないと思うので

拡大して見てみます。(8倍)

こちらがピクセルパーフェクトを拡大したもの

こちらが全画面表示を拡大したものです。

どうでしょうか？元動画は同じでどちらも8倍しているのに、見えているものは違うわけです。

なので現状iPhoneでは本当に正しい色、画質で動画を見れないということになります。

せっかく1台10万円以上の高級端末を使っているのにもったいないとおもいませんか？

ひとつ例外としてiPhone12mini、13miniなどは横幅の解像度が1080ピクセルなのでフルHD動画はピクセルパーフェクトで見ることができますが、4K動画はやはり見れません。

では、実際にどうやってiPhone上でピクセルパーフェクト表示すればよいのか。

勘の良い人は気づいていると思いますが、ホームページを作り(後に書きますがgithubというサイトで無料で作れます)HTMLとYoutubeの埋め込み機能を利用し、再生サイズを指定しているだけです。

とはいえ、ただYoutubeの埋め込み機能でサイズを1920x1080と指定してもなぜか拡大されて表示されます。

これは、iPhoneの仕様で"ソフトに認識させる解像度"と"実際の解像度"が異なることによります。

「iPhone　論理解像度」で検索してみてください。

iPhoneの実際の解像度の他に、論理解像度やポイントと呼ばれる解像度があるのがわかると思います。(サイトを直接貼れず説明が下手ですみません)

これはiPhoneのディスプレイがかなり繊細なので、1ドットの画像を本当に1ドットで表示するとかなり小さく表示され肉眼では認識しづらいので、何倍かにして綺麗に見せる技術です。

筆者が持っているiPhone11promaxでは、

論理解像度414x896、実際の解像度1242x2688です。

これが何を表しているのかというと、11promaxでは

論理解像度：実際解像度＝１：3

つまり、サイズを指定した場合3倍で表示されることになります。

なので、埋め込み動画の指定サイズは1920x1080でHTMLでスケールを1/3にすると上手くピクセルパーフェクトで表示できます。

4K動画も3840x2160で指定すればできます。(iPhoneの画面に収まりきらないですが)

筆者はプログラミング能力はほぼ無いに等しいので他にも良い方法があると思いますが上手く機能しているのでヨシとしています。

では、ここから実際にサイトを作っていきます。

プログラムができる人はここまでの説明でできると思います。

ここから先はプログラミングなんてできないという方に

少し書き換えるだけで使えるコード、iPhone内の撮影した動画などもピクセルパーフェクトで表示できるコードの他、1動画ずつ埋め込みコードを書かなくても良い方法などを載せていますので、見ていただけると幸いです。