【Tips】HTMLのVideoタグでiPhoneで再生出来ない場合の解決方法

HTMLのVideoタグでの動画再生が

出来ない場合の対処方法をご紹介。

またPCとスマホと動画切り替えなども

合わせて紹介します。

・iOSやスマホで動画再生が出来ない原因

音声がミュートになっていないと再生が出来ないようです。

<video src=”movie.mp4″ id=”vid” playsinline autoplay muted>

</video>

とmutedを付ける事で解決しますが、

playsinline autoplay muted

この3つのオプションを付けると再生できると思います。

・PCとスマホとの動画を切り替える方法

こちらはスマホモードで再生した場合ですが、

PCと動画を切り替えて再生する場合は下記の様に

設定すると上手く行きます。

<video src=”” onended=”movieend();” id=”vid” playsinline autoplay muted>

</video>

 

src部分を空白にしておきます。

window.onload = function () {

var video = document.getElementById(‘vid’);

if (navigator.userAgent.match(/iPhone|Android.+Mobile/)) {

video.src =”movie-sp.mp4″;

video.load();

video.play();

  } else {

video.src =”movie-pc.mp4″;

video.load();

video.play();

  }

};

ページの読込が完了した時点でvideoタグのID(vid)の

ソースをuserAgentの判定で書き換えて再生しています。

仕事でページいっぱいに動画を再生するという事が必要になり

ちょっとハマったのでご紹介します。