モバイルブラウザからのアクセスには軽い動画に誘導したいんだけど、どうしたらいいかな?

投稿日:
2019.8.27
カテゴリー:
Web制作 , IT・科学
46:名無しさん 2019/08/11(日) 15:55:38.76 ID:???

久しぶりにアクセス解析のログみてみたらPC激減してスマホだらけになってたわ
PCの割合なんて10%程度
残りは全部スマホ
恐ろしい・・・

で、いままでPCユーザー前提でHTML5で重い動画を掲載してたんだけど、

<video>
<source src=”重い動画ファイル”>
</video>

スマホユーザーが9割になった今見直すべきかな?

PCユーザーは従来通り重い動画ファイルを、
スマホユーザーは比較的軽量な動画ファイルを、
みたいにするのがいいかなと思ってる

ちなみにスマホユーザーのうち2/3にはMobile Safari(iPhone・iPad系)
残りの1/3はChrome Mobile(Android系)みたい。
これらモバイルブラウザからのアクセスには軽い動画に誘導したいんだけど
どうしたらいいかな?

51:名無しさん 2019/08/12(月) 08:54:58.06 ID:???

>>46
UAよりも回線速度別に振り分けるのが妥当な気はするけど、複数の画質の動画からユーザが任意に選択可能にすればいいんじゃないかな

47:名無しさん 2019/08/11(日) 15:59:43.10 ID:???

最初から全部軽い動画でいいんじゃないの
画質なんて対して変わらんて

48:名無しさん 2019/08/11(日) 16:00:02.89 ID:???

あとyoutube埋め込みなら自動判定してくれるからそっちのほうがいい

49:名無しさん 2019/08/12(月) 00:39:42.25 ID:???

>>47
帯域とマシンスペックに余裕があるPCユーザーにはなるべくオリジナル画質で見て欲しいんよ

>>48
YouTubeは問答無用で再エンコードされちゃうのがね・・・
スマホユーザーだけはYouTubeにお任せするってのはありだとは思うけど
問題はPCユーザーとスマホユーザーをどうこっちで見極めるかで・・・

50:名無しさん 2019/08/12(月) 08:26:51.85 ID:???

UAで切り分ければ?

こんな感じで分けて、要素を生成する
https://qiita.com/torugatoru/items/2dc895d5db7fc839a8bc

55:名無しさん 2019/08/12(月) 11:44:45.57 ID:???

ちょっと自分なりに対策考えてみた
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に手出さないといけないのね

58:名無しさん 2019/08/12(月) 16:01:34.27 ID:???

わ、わかった
js勉強してくる・・・

> ua判別してbodyにclass付けてくれるライブラリいっぱいあるから

>>50のサイトに掲載してあるようなコードのこと?

しかしびびったわ
10年ぶりにアクセスログを真面目に見たら
アクセスの9割方がスマホになってるとは・・・
「いずれPCは無くなる」って予想もあながち嘘じゃないかものな

59:名無しさん 2019/08/12(月) 16:07:58.68 ID:???

>>58
そんなコードもいらない
それをやってくれるライブラリがある
なのでjsの勉強もいらない
<script src=””>
で読み込むだけ

52:名無しさん 2019/08/12(月) 09:24:53.56 ID:???

回線速度って取れるんけ?

53:名無しさん 2019/08/12(月) 09:51:18.60 ID:???

>>52
IPで判定すれば、いいんじゃない?

54:名無しさん 2019/08/12(月) 10:05:39.35 ID:???

>>53
無理

61:名無しさん 2019/08/12(月) 17:56:38.28 ID:???

ISP別のIP範囲は調べる手段がありそう
https://dev.classmethod.jp/cloud/docomo-au-softbank-willcom-public-ip-ranges/

62:名無しさん 2019/08/12(月) 18:03:38.78 ID:???

スマホの場合は規制があるからipで調べても無理なんだよ

56:名無しさん 2019/08/12(月) 12:12:05.92 ID:???

別にいじわるで言うわけじゃないんだが、iphoneでchrome使ってるよ
iphnoneの3%ぐらいだからいいっちゃいいけど

57:名無しさん 2019/08/12(月) 13:34:05.28 ID:???

じゃあやっぱりuaでいいんじゃない?
jsに手を出すったってscriptタグ一個書くだけだよ
ua判別してbodyにclass付けてくれるライブラリいっぱいあるから
pc用スマホ用を並べてそのclass使ってcssで表示切り替えればよろし
デフォルト非表示にしてpcならpc用を表示、スマホならスマホ用を表示

引用元: http://mevius.5ch.net/test/read.cgi/hp/1564414228/