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

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

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

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

合わせて紹介します。

screenshot_01

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

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

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

</video>

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

playsinline autoplay muted

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

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

screenshot_02

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

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の判定で書き換えて再生しています。

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

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

  • コメント: 0

紙をめくる音、タイピング音など在宅ワーク時に聴くと孤独が癒されそうなWebサービス 『shhh Noise』前のページ

Youtuberの為のエフェクトや素材、背景やテロップ枠などダウンロードできるWebサービス 『Youtuberの素材屋さん』次のページ

関連記事

  1. Tips

    【Tips】Gmailの大容量の添付ファイルを見つけて容量を確保する方法

    私も普段使っているGmailですが容量にも制限があります容量は…

  2. Tips

    【Tips】簡単操作でChromeの拡張機能アイコンをスッキリする方法

    Chromeの拡張機能のアイコンをスッキリ整理してシンプル表示に出…

  3. Tips

    ホームページ作成時などに便利 HTMLタグ一覧やCSS Javascriptなどのリファレンス集

    ホームページやインターネットの発信をする時に何かと調べる事にな…

  4. Tips

    【Tips】Buffaloテラステーションで使用禁止文字列を一括検索する方法

    Buffaloテラステーションで使用禁止文字列のファイルが存在…

  5. Tips

    Google Chrome 5つの裏技をご紹介 便利で快適になります

    普段使っているブラウザGoogle Chromeを更に使いやすくする裏…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

PAGE TOP