AndroidでVideoViewやExoPlayerを使って動画再生機能を作ったはいいものの、なぜか動画がうまく再生されない。。
あのバージョンや端末だと問題なく再生できるのに、なぜかこのバージョンや端末だと再生がうまくいかない。
何故か黒みが出たり、表示が崩れたり、再生に失敗して何も表示されない。
そんなとき、ログを見て実装が怪しくないか疑うのもいいですが、もう一つ別のアプローチを紹介したいと思います。

その動画、Androidプラットフォームでサポートされてる？

Androidでは全ての動画形式がサポートされているわけではありません。
例えばmovファイルなど、再生できない動画も存在します。
公式サイトでは以下のようなガイドラインが用意されています。

サポートされているメディア形式  |  Android デベロッパー  |  Android Developers

ガイドラインを確認して、そもそもその動画形式がちゃんとサポートされているのか確認するのも大事です。
そうしないといつまでも原因がわからず詰んでしまうからです。
（遭遇した感じ、現象が発生したりしなかったりなど、かなりトリッキーでした。。）

動画形式の調べ方

動画形式を調べる方法の一つとして、FFmpegを利用するというのがあります。
（他にはMediainfoを利用するという手もあります）
導入方法はこちら。

動画形式を調べるコマンドは以下になります。

ffmpeg -i [入力ファイル名]

例えば、こちらの動画形式は以下のようになっています。

~ ffmpeg -i /Users/Hitoshi/Downloads/dizzy.mp4
ffmpeg version 4.3.1 Copyright (c) 2000-2020 the FFmpeg developers
  built with Apple clang version 11.0.3 (clang-1103.0.32.62)
  configuration: --prefix=/usr/local/Cellar/ffmpeg/4.3.1 --enable-shared --enable-pthreads --enable-version3 --enable-avresample --cc=clang --host-cflags= --host-ldflags= --enable-ffplay --enable-gnutls --enable-gpl --enable-libaom --enable-libbluray --enable-libdav1d --enable-libmp3lame --enable-libopus --enable-librav1e --enable-librubberband --enable-libsnappy --enable-libsrt --enable-libtesseract --enable-libtheora --enable-libvidstab --enable-libvorbis --enable-libvpx --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxml2 --enable-libxvid --enable-lzma --enable-libfontconfig --enable-libfreetype --enable-frei0r --enable-libass --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-librtmp --enable-libspeex --enable-libsoxr --enable-videotoolbox --disable-libjack --disable-indev=jack
  libavutil      56. 51.100 / 56. 51.100
  libavcodec     58. 91.100 / 58. 91.100
  libavformat    58. 45.100 / 58. 45.100
  libavdevice    58. 10.100 / 58. 10.100
  libavfilter     7. 85.100 /  7. 85.100
  libavresample   4.  0.  0 /  4.  0.  0
  libswscale      5.  7.100 /  5.  7.100
  libswresample   3.  7.100 /  3.  7.100
  libpostproc    55.  7.100 / 55.  7.100
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from '/Users/Hitoshi/Downloads/dizzy.mp4':
  Metadata:
    major_brand     : mp42
    minor_version   : 0
    compatible_brands: isomavc1mp42
    creation_time   : 2009-10-25T14:18:33.000000Z
  Duration: 00:00:25.00, start: 0.000000, bitrate: 510 kb/s
    Stream #0:0(und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, stereo, fltp, 93 kb/s (default)
    Metadata:
      creation_time   : 2009-10-25T14:18:33.000000Z
      handler_name    : (C) 2007 Google Inc. v08.13.2007.
    Stream #0:1(und): Video: h264 (Constrained Baseline) (avc1 / 0x31637661), yuv420p, 480x360 [SAR 1:1 DAR 4:3], 413 kb/s, 30 fps, 30 tbr, 30k tbn, 60 tbc (default)
    Metadata:
      creation_time   : 2009-10-25T14:18:33.000000Z
      handler_name    : (C) 2007 Google Inc. v08.13.2007.
At least one output file must be specified

ざっくり中を紐解いていくと、まず音声が、

Stream #0:0(und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, stereo, fltp, 93 kb/s (default)

となっていて、形式が「AAC-LC」っぽいのでAndroidでサポートしている形式だな、というのが分かります。
また、動画の方も、

Stream #0:1(und): Video: h264 (Constrained Baseline) (avc1 / 0x31637661), yuv420p, 480x360 [SAR 1:1 DAR 4:3], 413 kb/s, 30 fps, 30 tbr, 30k tbn, 60 tbc (default)

となっていて、形式が「H.264 AVC Baseline Profile（BP）」っぽいのでこれもサポートしている形式だなというのが分かります。
他にも解像度やフレームレートなどもわかるので、これらの情報を照らし合わせていきながらサポートされているかどうか判断します。

参考URL

• MediaInfoをMacコマンドラインで利用する - Qiita

まずは今のシェルを確認

現時点のシェルを確認するコマンド

% echo $SHELL

/bin/bash

続いて、現時点でどのシェルがインストールされているか確認

% cat /etc/shells
/bin/bash
/bin/csh
/bin/ksh
/bin/sh
/bin/tcsh
/bin/zsh

早速変更

下記コマンドを入力してください

chsh

※パスワード求められるので入力してください。

シェルを再起動します。

exec $SHELL

参考記事

https://castleobj.com/shell-change/

どうも、三町哲平です。

ローカル環境で開発している時に開発したアプリをブラウザで確認したい。
そういう時にlocalhostにアクセスするじゃないですか！

その時、自分のスマホで見るとどういう風なデザインになるのだろうという疑問が生まれますよね。
でも、パソコンから開いたlocalhostに別の機器でアクセスってどうやるんでしょう？
難しく思う方もいるかも知れませんが、実はすごい簡単です！

なので今回は、MacBookで起動したlocalhostにAndroidスマホとiPad、WindowsPCの３点からアクセスしてみます。

それでは、順を追っていきましょう！！

1. Wi-Fi環境を同じにする

まず最初にMacBook、Androidスマホ、iPad、WindowsPCを同じWi-Fi環境に接続してください。

今回は、Air-WiFi_0OXPYNに接続しています。

2. MacBookのIPアドレスを確認する。

MacBookの システム環境設定=>ネットワーク を開きます。

Air-WiFi_0OXPYN1に接続されていることを確認したら、
赤線部分のIPアドレスをメモやコピーしておきます。

今回の場合は、
192.168.43.160です。

3. localhostを起動する

今回は、ターミナルで、

$ docker-compose up

を使用して、docker-composeで、localhostを起動します。
ポート番号は、3000番です。

4. MacBookでlocalhost:3000にアクセス

無事、ページが表示されました。

5. その他の機器で試す

※MacBookからは今回の場合、localhost:3000とブラウザのURLに入力することで、表示されますが、その他機器では、192.168.43.160:3000と入力します。

Androidスマホ

iPad

WindowsPC

このように、同じWi-Fiに接続することにより、Macで起動したloclhostにAndroidスマホとiPad、WindowsPCからもアクセスすることが出来ました。

参考記事:localhostをスマホからアクセスする方法(同じWiFi環境の場合)