Q&A
###前提・実現したいこと
スマホの戻るボタンで戻ってもメインの動画が再生された状態にしたい
リンク内容
###発生している問題・エラーメッセージ
TOP→menu→（ブラウザの戻るボタン）→TOPと遷移するとメインの動画が固まって再生されない。
###該当のソースコード
html
1<html lang="ja"> 2<head> 3<meta charset="UTF-8"> 4<title>salon遊</title> 5<link rel="shortcut icon" href="/favicon.ico" /> 6<meta name="keywords" content="美容室,奈良,生駒"> 7<meta name="author" content="Salon遊"> 8<meta name="description" content="奈良県生駒市にある「バリ風美容室」｜Salon遊"> 9<meta name="viewport" content="width=device-width,initial-scale=1"> 10<link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet" type="text/css"> 11<script src="https://use.fontawesome.com/a53c3edc66.js"></script> 12<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 13<link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet"> 14<link href="https://fonts.googleapis.com/css?family=Joti+One" rel="stylesheet"> 15 16 17<!--トグルボタン--> 18<script> 19$(function() { 20 $('#navToggle').click(function(){//headerに .openNav を付加・削除 21 $('header').toggleClass('openNav'); 22 }); 23}); 24</script> 25<!--ポップアップウインドウ--> 26<script> 27$(function(){ 28 // 「.modal-open」をクリック 29 $('.modal-open').click(function(){ 30 // オーバーレイ用の要素を追加 31 $('body').append('<div class="modal-overlay"></div>'); 32 // オーバーレイをフェードイン 33 $('.modal-overlay').fadeIn('slow'); 34 35 // モーダルコンテンツのIDを取得 36 var modal = '#' + $(this).attr('data-target'); 37 // モーダルコンテンツの表示位置を設定 38 modalResize(); 39 // モーダルコンテンツフェードイン 40 $(modal).fadeIn('slow'); 41 42 // 「.modal-overlay」あるいは「.modal-close」をクリック 43 $('.modal-overlay, .modal-close').off().click(function(){ 44 // モーダルコンテンツとオーバーレイをフェードアウト 45 $(modal).fadeOut('slow'); 46 $('.modal-overlay').fadeOut('slow',function(){ 47 // オーバーレイを削除 48 $('.modal-overlay').remove(); 49 }); 50 }); 51 52 // リサイズしたら表示位置を再取得 53 $(window).on('resize', function(){ 54 modalResize(); 55 }); 56 57 // モーダルコンテンツの表示位置を設定する関数 58 function modalResize(){ 59 // ウィンドウの横幅、高さを取得 60 var w = $(window).width(); 61 var h = $(window).height(); 62 63 // モーダルコンテンツの表示位置を取得 64 var x = (w - $(modal).outerWidth(true)) / 2; 65 var y = (h - $(modal).outerHeight(true)) / 2; 66 67 // モーダルコンテンツの表示位置を設定 68 $(modal).css({'left': x + 'px','top': y + 'px'}); 69 } 70 71 }); 72}); 73</script> 74<!--facebook--> 75<div id="fb-root"></div> 76<script>(function(d, s, id) { 77 var js, fjs = d.getElementsByTagName(s)[0]; 78 if (d.getElementById(id)) return; 79 js = d.createElement(s); js.id = id; 80 js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.8"; 81 fjs.parentNode.insertBefore(js, fjs); 82}(document, 'script', 'facebook-jssdk'));</script> 83 84<!-- Google Analytics --> 85 86<!-- END Google Analytics --> 87</head> 88<body> 89<header> 90<div class="container"> 91 <div class="logo"> 92 <h1> 93 <a title="Salon遊" href="/test/"> 94 <img src="<?php echo get_template_directory_uri(); ?>/img/rogo.png" width="289" height="107" alt="Salon遊"/> 95 </a> 96 </h1> 97 </div> 98<div class="headR"> 99<div class="tel"> 100<p>ご予約・お問い合わせ<br><span>tel. 0120-184-215</span></p> 101</div> 102<div id="navToggle"> 103 <div> 104 <span></span> <span></span> <span></span> 105 </div> 106</div> 107 <nav> 108 <ul> 109 <li><a href="/test/">Home<br><span>ホーム</span></a></li> 110 <li><a href="/test/menu/">Menu<br><span>メニュー</span></a></li> 111 <li><a href="/test/shop/">Salon info<br><span>サロン紹介</span></a></li> 112 <li><a href="/test/access/">Access<br><span>店舗案内</span></a></li> 113 <li><a href="/test/post-all/">Blog<br><span>新着情報</span></a></li> 114 </ul> 115 </nav> 116 </div> 117 </div> 118</header> 119<main> 120 <div class="mainPhoto"> 121 <div class="promo"> 122 <video src="<?php echo get_template_directory_uri(); ?>/promo.mp4" autoplay muted playsinline loop></video> 123 </div> 124 </div> 125 <div class="maincont"> 126<section class="conA"> 127 <div class="container"> 128 <ul> 129 <li> 130 <p>Menu</p> 131 <a href="/test/menu/"><img src="<?php echo get_template_directory_uri(); ?>/img/menu-bnr.jpg" alt="menu" width="310" height="145"></a> 132 </li> 133 <li> 134 <p>Salon info</p> 135 <a href="/test/shop/"><img src="<?php echo get_template_directory_uri(); ?>/img/saloninfo-bnr.jpg" alt="salininfo" width="310" height="145"></a> 136 </li> 137 <li class="sm"> 138 <p class="smp">Access</p> 139 <a href="/test/access/"><img src="<?php echo get_template_directory_uri(); ?>/img/access-bnr.jpg" alt="access" width="310" height="145"></a> 140 </li> 141 </ul> 142 </div> 143</section> 144<div class="colum"> 145 146
###試したこと
ヘッダー内に以下のコードを入れた
html
1<meta http-equiv="Pragma" content="no-cache"> 2<meta http-equiv="Cache-Control" content="no-store"> 3<meta http-equiv="Cache-Control" content="no-cache"> 4<meta http-equiv="Expires" content="-1">
スクリプトも試しました
html
1<script type="text/javascript"> 2window.onunload = function(){}; 3</script>
###補足情報(言語/FW/ツール等のバージョンなど)
スマホはiphoneでブラウザはサファリを使っています。
パソコンでは問題なく表示されております。
ipadでも同じ現象が起きております。
よろしくお願い致します。
回答1件
0
ベストアンサー
はたして iPhone は iOS 10 なら動画を自動再生できるのか
デフォルトで自動再生されないのは、通信容量的な問題からそちらの方が都合がよいことによる仕様のようです。
投稿2017/03/19 14:44
総合スコア1857
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/19 15:02
2017/03/19 15:15
2017/03/19 23:41