mp4 動画の再生テスト

2019-11-07

このページは

mp4 動画のインライン再生を各種デバイスで表示テストするためのページ

  • Web 上の技術記事でグラフィカルな説明を行う場合に短いループ動画を使うことがある
    • ループ動画はいまだに、なじみのある GIF 動画が使われることが多い
  • GIF 動画は最大 256 色で容量も大きくなりがちなので、写実的な映像には向かない
  • Google が開発した WebP という形式があるが、Safari が対応していない関係でいまいち普及しきっていない
  • 一方で、mp4 動画（H.264 コーデック）は現代の多くのブラウザでサポートされている：
  • 実際に各種デバイスで動作するか、UI の見た目や挙動に差異がないかを確認するために video タグで mp4 動画を埋め込んでテストしてみる

インラインのループ再生のテスト

コード

 
<video src="mp4-test.mp4" width="720" autoplay muted loop playsinline></video>

コントロールつきのテスト

コード

 
<video src="mp4-test.mp4" width="720" controls></video>

動画ファイルの詳細
  • 画面キャプチャした動画を、iMovie 10.1.10 にて最も低品質な設定で書き出したもの：
  • 646 KB と軽い。見た目の品質も実用に耐える水準だと思う
  • ちなみに ffmpeg で動画ファイルの情報を出力した結果は以下：
$ ffmpeg -i mp4-test.mp4
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'mp4-test.mp4':
  Metadata:
    major_brand     : mp42
    minor_version   : 1
    compatible_brands: mp41mp42isom
    creation_time   : 2019-11-07T04:33:07.000000Z
  Duration: 00:00:03.99, start: 0.000000, bitrate: 2498 kb/s
    Stream #0:0(und): Video: h264 (High) (avc1 / 0x31637661), yuv420p(tv, bt709, progressive),
        960x540 [SAR 1:1 DAR 16:9], 2369 kb/s, 59.94 fps, 59.94 tbr, 60k tbn, 120k tbc (default)
    Metadata:
      creation_time   : 2019-11-07T04:33:07.000000Z
      handler_name    : Core Media Video

動作確認結果

現代的なデバイスでは概ね動作した：

  • Mac (Mojave 10.14.5)
    • Chrome 77 / Safari 12 / Firefox 70 で動作
  • Windows 10
    • Chrome 77 / IE 11 / Edge 44 で動作
  • Android 8.0.0 の Chrome 78 で動作
  • iPadOS 13.1.2 の Safari で動作
    • （※ コントロールありのものはプレビュー画像が表示されなかった）

所感

わりと動くことが確認できたので、いちエンジニアとしては以下のような運用でよいかと思う：

  • 本気の動画（長め or 高品質の動画）：
    • YouTube にアップロードして埋め込み
  • 短いループ動画のインライン再生：
    • 色数 / コマ数の少ないシンプルなものなら GIF アニメ
    • 複雑なものなら mp4/H.264 動画

Tatsuya Koyama

 /