スマホのブラウザの戻るボタンで戻ると、メイン画像の動画が再生されない
解決済
回答 1
投稿
- 評価
- クリップ 0
- VIEW 583
前提・実現したいこと
スマホの戻るボタンで戻ってもメインの動画が再生された状態にしたい
リンク内容
発生している問題・エラーメッセージ
TOP→menu→（ブラウザの戻るボタン）→TOPと遷移するとメインの動画が固まって再生されない。
該当のソースコード
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>salon遊</title>
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="keywords" content="美容室,奈良,生駒">
<meta name="author" content="Salon遊">
<meta name="description" content="奈良県生駒市にある「バリ風美容室」｜Salon遊">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet" type="text/css">
<script src="https://use.fontawesome.com/a53c3edc66.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Joti+One" rel="stylesheet">
<!--トグルボタン-->
<script>
$(function() {
$('#navToggle').click(function(){//headerに .openNav を付加・削除
$('header').toggleClass('openNav');
});
});
</script>
<!--ポップアップウインドウ-->
<script>
$(function(){
// 「.modal-open」をクリック
$('.modal-open').click(function(){
// オーバーレイ用の要素を追加
$('body').append('<div class="modal-overlay"></div>');
// オーバーレイをフェードイン
$('.modal-overlay').fadeIn('slow');
// モーダルコンテンツのIDを取得
var modal = '#' + $(this).attr('data-target');
// モーダルコンテンツの表示位置を設定
modalResize();
// モーダルコンテンツフェードイン
$(modal).fadeIn('slow');
// 「.modal-overlay」あるいは「.modal-close」をクリック
$('.modal-overlay, .modal-close').off().click(function(){
// モーダルコンテンツとオーバーレイをフェードアウト
$(modal).fadeOut('slow');
$('.modal-overlay').fadeOut('slow',function(){
// オーバーレイを削除
$('.modal-overlay').remove();
});
});
// リサイズしたら表示位置を再取得
$(window).on('resize', function(){
modalResize();
});
// モーダルコンテンツの表示位置を設定する関数
function modalResize(){
// ウィンドウの横幅、高さを取得
var w = $(window).width();
var h = $(window).height();
// モーダルコンテンツの表示位置を取得
var x = (w - $(modal).outerWidth(true)) / 2;
var y = (h - $(modal).outerHeight(true)) / 2;
// モーダルコンテンツの表示位置を設定
$(modal).css({'left': x + 'px','top': y + 'px'});
}
});
});
</script>
<!--facebook-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Google Analytics -->
<!-- END Google Analytics -->
</head>
<body>
<header>
<div class="container">
<div class="logo">
<h1>
<a title="Salon遊" href="/test/">
<img src="<?php echo get_template_directory_uri(); ?>/img/rogo.png" width="289" height="107" alt="Salon遊"/>
</a>
</h1>
</div>
<div class="headR">
<div class="tel">
<p>ご予約・お問い合わせ<br><span>tel. 0120-184-215</span></p>
</div>
<div id="navToggle">
<div>
<span></span> <span></span> <span></span>
</div>
</div>
<nav>
<ul>
<li><a href="/test/">Home<br><span>ホーム</span></a></li>
<li><a href="/test/menu/">Menu<br><span>メニュー</span></a></li>
<li><a href="/test/shop/">Salon info<br><span>サロン紹介</span></a></li>
<li><a href="/test/access/">Access<br><span>店舗案内</span></a></li>
<li><a href="/test/post-all/">Blog<br><span>新着情報</span></a></li>
</ul>
</nav>
</div>
</div>
</header>
<main>
<div class="mainPhoto">
<div class="promo">
<video src="<?php echo get_template_directory_uri(); ?>/promo.mp4" autoplay muted playsinline loop></video>
</div>
</div>
<div class="maincont">
<section class="conA">
<div class="container">
<ul>
<li>
<p>Menu</p>
<a href="/test/menu/"><img src="<?php echo get_template_directory_uri(); ?>/img/menu-bnr.jpg" alt="menu" width="310" height="145"></a>
</li>
<li>
<p>Salon info</p>
<a href="/test/shop/"><img src="<?php echo get_template_directory_uri(); ?>/img/saloninfo-bnr.jpg" alt="salininfo" width="310" height="145"></a>
</li>
<li class="sm">
<p class="smp">Access</p>
<a href="/test/access/"><img src="<?php echo get_template_directory_uri(); ?>/img/access-bnr.jpg" alt="access" width="310" height="145"></a>
</li>
</ul>
</div>
</section>
<div class="colum">試したこと
ヘッダー内に以下のコードを入れた
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-store">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="-1">スクリプトも試しました
<script type="text/javascript">
window.onunload = function(){};
</script>補足情報(言語/FW/ツール等のバージョンなど)
スマホはiphoneでブラウザはサファリを使っています。
パソコンでは問題なく表示されております。
ipadでも同じ現象が起きております。
よろしくお願い致します。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
0
はたして iPhone は iOS 10 なら動画を自動再生できるのか
デフォルトで自動再生されないのは、通信容量的な問題からそちらの方が都合がよいことによる仕様のようです。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
2017/03/20 00:02
2017/03/20 00:15
http://stray-light.info/wp/ios-safari-backbutton/
※試してません
2017/03/20 08:41
解決出来ました！！
早々のご対応ありがとうございました！