モバイルブラウザからのアクセスには軽い動画に誘導したいんだけど、どうしたらいいかな?
久しぶりにアクセス解析のログみてみたらPC激減してスマホだらけになってたわ
PCの割合なんて10%程度
残りは全部スマホ
恐ろしい・・・
で、いままでPCユーザー前提でHTML5で重い動画を掲載してたんだけど、
↓
<video>
<source src=”重い動画ファイル”>
</video>
スマホユーザーが9割になった今見直すべきかな?
PCユーザーは従来通り重い動画ファイルを、
スマホユーザーは比較的軽量な動画ファイルを、
みたいにするのがいいかなと思ってる
ちなみにスマホユーザーのうち2/3にはMobile Safari(iPhone・iPad系)
残りの1/3はChrome Mobile(Android系)みたい。
これらモバイルブラウザからのアクセスには軽い動画に誘導したいんだけど
どうしたらいいかな?
>>46
UAよりも回線速度別に振り分けるのが妥当な気はするけど、複数の画質の動画からユーザが任意に選択可能にすればいいんじゃないかな
最初から全部軽い動画でいいんじゃないの
画質なんて対して変わらんて
あとyoutube埋め込みなら自動判定してくれるからそっちのほうがいい
>>47
帯域とマシンスペックに余裕があるPCユーザーにはなるべくオリジナル画質で見て欲しいんよ
>>48
YouTubeは問答無用で再エンコードされちゃうのがね・・・
スマホユーザーだけはYouTubeにお任せするってのはありだとは思うけど
問題はPCユーザーとスマホユーザーをどうこっちで見極めるかで・・・
UAで切り分ければ?
こんな感じで分けて、要素を生成する
https://qiita.com/torugatoru/items/2dc895d5db7fc839a8bc
ちょっと自分なりに対策考えてみた
safari系列のブラウザがwebm動画に対応していないことを逆手にとって、
<video>
<source src=”重い動画ファイル.webm” type=’video/webm’>
<source src=”軽い動画ファイル.mp4″ type=’video/mp4′>
</video>
こんな感じに記述する。
safari系列のブラウザはwebm対応していないからその次の軽いmp4動画が再生される。
その他のユーザーには重い動画webmが再生される。
問題はandroidのモバイルchromeでは重いwebm動画が再生されてしまうこと。
safariが進化してwebm動画の再生をサポートしちゃったらこの方法は使えなくなること、か。
>>50
その方法だとjava scriptに手出さないといけないのね
わ、わかった
js勉強してくる・・・
> ua判別してbodyにclass付けてくれるライブラリいっぱいあるから
>>50のサイトに掲載してあるようなコードのこと?
しかしびびったわ
10年ぶりにアクセスログを真面目に見たら
アクセスの9割方がスマホになってるとは・・・
「いずれPCは無くなる」って予想もあながち嘘じゃないかものな
>>58
そんなコードもいらない
それをやってくれるライブラリがある
なのでjsの勉強もいらない
<script src=””>
で読み込むだけ
回線速度って取れるんけ?
>>52
IPで判定すれば、いいんじゃない?
>>53
無理
ISP別のIP範囲は調べる手段がありそう
https://dev.classmethod.jp/cloud/docomo-au-softbank-willcom-public-ip-ranges/
スマホの場合は規制があるからipで調べても無理なんだよ
別にいじわるで言うわけじゃないんだが、iphoneでchrome使ってるよ
iphnoneの3%ぐらいだからいいっちゃいいけど
じゃあやっぱりuaでいいんじゃない?
jsに手を出すったってscriptタグ一個書くだけだよ
ua判別してbodyにclass付けてくれるライブラリいっぱいあるから
pc用スマホ用を並べてそのclass使ってcssで表示切り替えればよろし
デフォルト非表示にしてpcならpc用を表示、スマホならスマホ用を表示