Webサイトの動画自動再生を iphone / android / pc で行う。

WordPressサイトのファーストビューで動画を自動再生してほしいと言われ、iphoneで再生されず詰ってしまいました。
自動再生・ループ再生をiphone / android / pcで行ったのでまとめ。
デバイスに関する条件分岐に関しては、ざっくりとした感じだったのでざっくりにしています。

条件分岐タグの話

wp_is_mobile( )

pcとそれ以外を識別する。
今回はこのタグの内部にiphone / androidを識別する条件分岐を追加。

携帯電話・スマートフォンを特定して検知するわけではなく、タブレットもモバイルデバイスとして認識されることに注意してください。(Codexより)

is_android( ) ,is_iphone( )

こちらはfunctions.phpに自分で設定します。

functions.php
// androidを識別
function is_android() {
  $is_android = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'Android');
  if ($is_android) {
      return true;
  } else {
      return false;
  }
};

// iphoneを識別
function is_iphone() {
  $is_iphone = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPhone');
  if ($is_iphone) {
      return true;
  } else {
      return false;
  }
};

<video></video>と<video><source></video>

環境が動画のフォーマットをサポートしているかを順番に検証し、該当したものを再生する場合(複数のフォーマットを指定する必要がある場合(複数指定できるだけ余裕のある素材をお持ちの場合))は<video><source></video>で複数指定しておくと良く、1つのフォーマットしかない場合は\<video src="">\</video>で指定する。

 videoタグに指定できる属性

属性 内容
autoplay 自動再生
controls 再生、音量、シーク、ポーズを制御するためのコントロールを表示
loop 自動でその動画を繰り返し再生
muted 指定することで消音再生
poster 動画が再生可能になるまでの間に表示する画像などを指定。指定しない場合は何も表示されない
playsinline 動画を再生するエリアを指定する場合に指定。指定しないとiosで自動再生されなかった

※preloadを指定することで動画を事前に読み込む(部分的に指定することも可能)か、読み込まないかを制限できますが、autoplayを指定するとpreloadより優先されるので特に指定する必要はありません。

playsinlineについて

最終的に、今回iphoneでの自動再生を解決するのにplayinline属性を指定しなければならなかった。
controlsを指定して、iphoneで動画を再生すると全画面表示になっていて、それを指定する範囲(videoタグにcssをしているとかdiv内でposition指定するとか)で再生したい場合に必要な属性らしい。

最終的なコード

hoge.php
<?php if ( wp_is_mobile() ) : ?> // PC以外での閲覧時

    <?php if ( is_android() ) : ?>  // androidでの閲覧時

      <video autoplay muted loop>
        <source src="path/movie_sp.mp4" type="video/mp4">
      </video>

    <?php elseif ( is_iphone() ) : ?> // iphoneでの閲覧時

      <video autoplay muted loop playsinline>
        <source src="path/movie_sp.mp4" type="video/mp4">
      </video>

    <?php else: ?>// androidでもiphoneでもないデバイスでの閲覧時

      <video autoplay muted loop>
        <source src="path/movie_sp.mp4" type="video/mp4">
      </video>

    <?php endif;?>

  <?php else: ?> // PCでの閲覧時

    <video autoplay loop muted>
      <source src="path/movie.mp4" type="video/mp4">
    </video>

  <?php endif; ?>

参考

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.