【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】Windowsキーとカーソルのホットキーが便利!! ウィンドウを簡単に配置

    意外とWindows標準では多くのホットキーが用意されていますが…

  2. Tips

    使わないともったいない!! Windows標準のクリップボード履歴がシンプルで使いやすい

    Windows10の知られざる便利機能のクリップボード履歴。今まで…

  3. Tips

    覚えていて損はしないWindowsショートカットキー 作業時間の短縮に繋がります

    普段何気に使っているWindowsショートカットキーですが以外…

  4. Tips

    年末年始の太り防止に!! Google検索でカロリーが表示されるようになりました

    Google検索で食べ物や素材を検索するといつの間にかカロリー…

  5. Tips

    Windows7標準の音声認識を使ってみたら結構便利だった!! 文字入力やプログラム起動も可能

    Windows7の標準機能の音声認識機能使っている人は少ないか…

  6. Tips

    「Microsoftアカウントの不審なサインイン」 怪しいメールにご注意を!! クリックしてURLを…

    ここ最近に届くようになった怪しいメール紛らわしい文面に戸惑うか…

コメント

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

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

最近の記事

PAGE TOP