こんにちは、さち です。
iPhone で撮影した動画をツイッターに投稿することがあるんですが、その動画を PC から見ると凄まじく低画質になってしまいます。
さすがに、まともに見られないレベルの画質は勘弁なので、何とかしたい……。
PC で見る動画が低画質すぎる
先日、iPhone の画面収録で録画した動画をツイッターに投稿しました。実際のものがこちら。
もちろん、オート放置では無理だから作戦切り替えとSP発動はしないとダメなんだけどね #スクスタ pic.twitter.com/GFkC3vtQjB
— さち (@uminosachi_) November 10, 2019
元々の動画のサイズは 1920×886 ですが、ツイッターのサーバー側で変換（再エンコード）されます。
その結果、PC で動画を見ると画質が激しく劣化してしまいます。
一見、サムネイル画像だと問題なさそうですが……
再生すると、画質が悪すぎます。あまりにブロックノイズがひどくてモザイククイズができるレベルです。
しかも、音声がモノラルに……。アップロードした動画はステレオだったのに、音質まで激しく劣化してしまっています。
全画面表示で画質は良くなるけど……
再生中に動画を全画面表示にすることで、画質を上げることができます。全画面表示を解除しても画質は維持されるので、下図のようにキレイに見られます。
ただし、この方法には問題もあります。
- 全画面表示を解除してしばらくすると低画質に戻ることがある
- 音声はモノラルのまま
低画質に戻らないように全画面化のまま見ると、動画がかなり大きく引き伸ばされるので、高画質であっても粗が目立ってしまいます。特に、大きなモニターを使っているとそれが顕著です。
解決手段としては中途半端な感じがします。
高画質再生するリンクを取得する
ツイッターにアップロードされた動画を強制的に高画質で再生するリンク（URL）を取得してみましょう。
- 動画を含んだツイートを表示します。
- ツイートの下部にある「共有」アイコンを開きます。
- 「ツイートのリンクをコピー」します。
- こちらのページを開いて、少し下にある「URLを変換する」に貼り付けます（一番上にある検索窓ではないので注意）。
- すると、下部にいろいろな画質の動画リンクが表示されます。今回一番高画質なのは「1280×592」なので、このリンク上で「右クリック」をします。
- 「リンクのURLをコピー」します。（下図は、ブラウザーが「Firefox」の場合）
- 先程の動画を含んだツイートに追加（リプライ）する形で、リンクを貼り付けて投稿します。
- このリンクをクリックすれば、PC から 1280×592 の高画質な動画を開くことができます。
- 実際に、URL を開くと見られる動画はこんな感じ。多少の粗はありますが、モザイク動画よりはだいぶマシです。音声もステレオですし、途中で低画質になることもありません。
実際のツイートがこちら。動画を含むツイートに高画質版のリンクをぶらさげておくことで、PC から高画質で見たい人にも やさしいせかい になります。
PCから高画質で見るにはこちらのリンクをどうぞ。https://t.co/UpevzJMtSB
— さち (@uminosachi_) November 11, 2019
この画質では満足できないという場合は、YouTube やオンラインストレージなどに動画をおいて公開するしかありません。
原因を調べてみた
おかしなことに、iPhone の公式アプリから同じ動画を見ると、画質もキレイで音声もステレオなんです。通信量を減らすのが目的なら、スマホこそ画質を下げる必要があるので、単純に PC 視聴時の画質を決める仕組みに問題がありそうです。
そこで、今回の問題について調査してみました（使用ブラウザーは Firefox）。
まず、ツイッターによって再エンコードされた動画を調べたところ、結果は下の表のとおりでした。
再エンコードは、「低画質」が高さ 270px、「中画質」が高さ 360px、「高画質」が幅 1280px となるように、アスペクト比を維持して行われます。
音声がモノラルになるのは「低画質」の時だけでした。
試しに、ツイッターの HTML・CSS をいじってみたところ、動画の画質は <video> タグを囲んでいる <div> のサイズによって変化することが分かりました。<div> の 幅×高さ が現在の動画の 幅×高さ より大きくなると、一つ上の画質の動画に切り替わります。再生中でも画質は切り替わりますが、音声ch は変わりません。
今回の場合、<div> の初期値は下図のように 569×263 だったので、最初は「低画質」の動画が読み込まれます。しかし、動画の 幅×高さ を超えるように <div> の 幅×高さ をいじる（例えば、583×271 にする）と、「中画質」の動画に切り替わります。
もちろん、画質選択はネットの回線速度も関係します。前述の条件を満たしていても、回線速度が遅い場合は、低画質になります。（速度が十分でも、ページ読み込みが終わる前に動画を再生すると、低画質になることもある）
iPhone から見たときに画質が良かった理由は、iPhone X の画面の幅が 1125px なので高画質の動画が再生されたからでした。
個人の環境だけなら、ブラウザーの拡張機能（Stylus など）でツイッターの CSS をいじることで解決できそうです。
ただ、ユーザー皆がそれをできるわけではないので、やはりツイッター側で改善して欲しいところですね。
ちなみに、アスペクト比が「16：9」の動画ならこの問題は起きません。iPhone X（ホームボタンなしの全体画面） で画面収録した動画はアスペクト比が「19.5：9」なので、今回のような問題が起きてしまいます。
追記
ユーザーCSS を使って、自分の環境だけでも低画質を回避できるように対策してみました。
コメント