LoginSignup
6
3

More than 5 years have passed since last update.

iOS11 HTML5 Videoタグ 自動再生周りの挙動検証

Posted at

概要

背景

video タグを利用した動画再生の挙動について、自動再生及び手動再生の条件がいつものようにしれっと変わっている可能性があった為、検証を実施した。
今回の検証の主な目的として video タグを用いたシステムの過去iOSバージョンからのマイグレーション事項の有無を抽出する事を設定していたため、挙動の比較対象に iOS10 を指定した。

検証方法

下記 video タグを用いて、 (controls と autoplay 属性の有無) x (iOS 10,11) の組み合わせを網羅して挙動を検証した。

<video width="320" height="180" src="movie.mov"></video>

検証環境

  • 検証端末
    • iPhone8 Plus / iOS 11.0
    • iPhone7 / iOS 10.3.3
  • 動画フォーマット : mov (iPhone で撮影)
  • ブラウザ : Safari (build-in)

検証結果

挙動に差分が生じている箇所は 太字 としている。

iOS 10

control autoplay control autoplay (なし)
自動再生 不可 不可 不可 不可
サムネイル 表示される 非表示 表示される 非表示
手動再生

iOS 11

control autoplay control autoplay (なし)
自動再生 不可 不可 不可 不可
サムネイル 表示される 非表示 表示される 非表示
手動再生 不可 不可

結論

control 属性が無くても手動再生が開始できるかどうか、という点で仕様変更があった。
video タグを利用しているサービスが iOS のみをターゲットとしているのならば無条件で control を付けるべきだが、PCなどと共通のシステムであれば、動的に属性の付与を行うなどの処理が必要と思われる。

6
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
3