質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

90.52%

  • HTML

    8944questions

    HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5767questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • レスポンシブWebデザイン

    209questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

スマホのブラウザの戻るボタンで戻ると、メイン画像の動画が再生されない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 504
ryota0315

ryota0315

score 17

前提・実現したいこと

スマホの戻るボタンで戻ってもメインの動画が再生された状態にしたい
リンク内容

発生している問題・エラーメッセージ

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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1 件

link

checkベストアンサー

0

はたして iPhone は iOS 10 なら動画を自動再生できるのか

デフォルトで自動再生されないのは、通信容量的な問題からそちらの方が都合がよいことによる仕様のようです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/20 00:02

    強制的に再読込をさせる方法はありますでしょうか？

    キャンセル

  • 2017/03/20 00:15

    iphone iOS safariの「戻る」ボタンの問題
    http://stray-light.info/wp/ios-safari-backbutton/

    ※試してません

    キャンセル

  • 2017/03/20 08:41

    ありがとうございます！
    解決出来ました！！

    早々のご対応ありがとうございました！

    キャンセル

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

  • HTML

    8944questions

    HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5767questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • レスポンシブWebデザイン

    209questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

SNSアカウントでログイン

  • Facebookでログイン
  • Twitterでログイン
  • Googleでログイン
  • Githubでログイン
  • Hatenaでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る