2016-06-14 12 views
0

は、私は、Webページベースのスライドショー(index.phpを)を持っており、それは10分ごとに中断またはcommercial.phpページがいったんので、その後のindex.phpに戻って別のページ(commercial.php)を持っていると思いますX分間のアップ。負荷ユーチューブ動画?

JavaScriptを使って「現在の分が10で割り切れる場合はcommercial.phpを読み込み、commercial.phpタイマーが終了するとindex.phpをロードします」と言います。私はちょうどそれをコードに入れる方法がわかりません... :(

以下は、コードを動作させるために作成したテストページです。実際のWebページに移動します。

<body> 

    <div id="time"></div> 
    <div class="frame" style="border:1px solid red;width:100%;height:90%;"></div> 

    <script> 
    function time() { 
    $("#time").text(new Date().getHours() + ":" + new Date().getMinutes() + ":" + new Date().getSeconds()); 
    } 
    setInterval(time, 1000); 
    time(); 

    //IF STATEMENT TO LOAD VIDEO IN DIV.FRAME? 

    </script> 

</body> 

すべてのヘルプは非常に感謝されるだろう、次のよう ありがとう

答えて

1

私は別の変数に分を格納し、その上にモジュラス演算子を使ってmins%10を使って、0と等しいかどうかを調べました。

function time() { 
    var hours = new Date().getHours(), 
     mins = new Date().getMinutes(), 
     secs = new Date().getSeconds(); 

    $("#time").text(hours + ":" + mins + ":" + secs); 

    if(mins%10 == 0) { 
    console.log('sending to commercial.php'); 
    //location.href = 'commercial.php'; 
    loadVideo(); 
    } 
} 
//setInterval(time, 1000); 
time(); 

function loadVideo(){ 
    console.log('loading video'); 
    $('<iframe>', { 
    src: 'https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&autoplay=1', 
    width: "560", 
    height: "315", 
    id: 'myFrame', 
    frameborder: 0, 
    scrolling: 'no' 
    }).appendTo('.frame'); 
} 

イベントが発生した場合は、ビデオを読み込みます。あなたが新しいページにリダイレクトしているかどうかはわかりませんでした(これはlocation.hrefで行うことができますか、ページに追加するだけの場合はiframeをページに追加する方法をとっていました)。

私の例https://jsfiddle.net/enigmarm/rrgbfa8x/1/

ビデオがすでにロードされているかどうかを記録しておきたいので、1分間に同じビデオを繰り返し更新するだけではありません。私のフィドルでは、ifブロックに1==1を追加しました。これはあなたのビデオがあなたの既存のページにどのように読み込まれているか見ることができます。

以下のためにこれを表示するには、オング、私はあなたからのビデオ/商用をロードしている場所に依存しているとします。理想的には、ビデオプレーヤーにはタップできるイベントステータスがあります。したがって、ビデオの再生が停止すると、それを検出してスライドショーに戻ることができます。 YouTube's Player API has onStateChange。そうしないと、各コマーシャルがかかりますし、その後、30秒(または任意の長さ)の後に、あなたがスライドに戻るどのくらい知っている必要があります。


あなたはそれがフェードイン持つために探しているとして、あなたはjQueryのfadeIn functionを使用することができます。新しい要素を追加するときにこれを機能させるには、最初に要素を非表示にする必要がありますdisplay: none;。私の更新バイオリンで:https://jsfiddle.net/enigmarm/rrgbfa8x/3/私はちょうどiframe {display:none;}, then used .fadeIn(3000)to fade it in over 3 seconds. To have it fade out, you can look at jQuery's [フェードアウト() `]あなたの応答のための3

function loadVideo() { 
    console.log('loading video'); 
    $('<iframe>', { 
    src: 'https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&autoplay=1', 
    width: "560", 
    height: "315", 
    id: 'myFrame', 
    frameborder: 0, 
    scrolling: 'no' 
    }).appendTo('.frame').fadeIn(3000); 
} 
+0

これは大きな助けとなりました!あなたが私に与えたものを取って、さまざまなページを表示するように変更しました。 YouTubeのapiセクションがインストールされ、動作しています。 index.phpとcommercial.phpの間の遷移を簡単に行う方法はありますか?再度、感謝します! – mrmills129

+0

問題ありません。それを行う方法があります。 CSSで追加している要素を隠す必要があり、jqueryの 'fadeIn()'を使うことができます。私の更新された答えを見てください。 – EnigmaRM

0

シンプルな基本的なアプローチがある:。!

のindex.php

<body> 

    <div id="time"></div> 
    <div class="frame" style="border:1px solid red;width:100%;height:90%;"></div> 

    <script> 

    //IF STATEMENT TO LOAD VIDEO IN DIV.FRAME? 

    setTimer(function() { 
     window.location.href = "commercial.php?parameters..."; 
    }, 600000); //10 minutes 
    </script> 

</body> 

は、例えば、などのパラメータ(の任意の必要な情報を含めます何を見るか、どこから始めるかに関する情報)。 (しかし、あなたが本当にそのことについて多くを行うことはできません)、ユーザーが簡単にクライアント側のタイマーを傍受し、停止することがあるので注意してください。あなたはおそらく、あなたがたどこから再開するために必要な情報を含むことができるあなたは、インデックスから持っているものを再渡すことができ、あなたのリターンパラメータで

commerical.php

Page HTML 
<script> 
    setTimer(function() { 
    window.location.href = "index.php?parameters..."; 
    }, X); //Min time in this page? 
</script> 

。これはおそらくあなたの提案と同じではありませんが、代替案として見ることができます。

+0

感謝を設定します。私はこのようにすることを考えていましたが、私はそれが物事を荒らす可能性があることを心配していました。私は@EnigmaRNソリューションを試してみる予定ですが、これもやってみましょう。何かをする一つ以上の方法を学ぶのは常に良いです。再度、感謝します! – mrmills129