2

更新: ここにリンクがあり ます http://15four.com/interactiveVideo/

OK、私は基本的に「自分の冒険を選ぶ」スタイルのビデオ状況であるプロジェクトに取り組んでいます。それが機能する方法は次のとおりです。

  1. ビデオを再生する
  2. プレーヤーの「終了」状態のイベント リスナーを設定します。
  3. 対応する div を 2 つのボタンで表示する
  4. ユーザーが 2 つのボタンのいずれかをクリックする
  5. クリックしたボタンに基づいて対応するビデオをロードする
  6. 繰り返す

最初のビデオではすべてがうまく機能します。div は正常に読み込まれ、ボタンをクリックすると次のビデオが正しく読み込まれ、再生されます。問題は、 2 番目のビデオの最後に到達すると、 2番目の「choose your own adventure div」が表示され、最初と 2 番目の CYOA div の両方が表示され、2 番目が最初の div の上に表示されることです。

div を表示する JS 関数は次のとおりです。

function loadModal(stage){
    var option1 = stage.modal.find("a.option1");
    var option2 = stage.modal.find("a.option2");

    var target1 = stage.option1;
    var target2 = stage.option2;

    stage.modal.fadeIn(1000);

    if(target1 != "div") {
        option1.click(function(){
            stage.modal.hide();
            console.log(target1);
            setMode(stages[target1]);
        });
    } else {
        setMode(stages.excite);
        video.pause();
    }
    if(target2 != "div") {
        option2.click(function(){
            stage.modal.hide();
            console.log(target2);
            setMode(stages[target2]);
        });
    } else {
        setMode(stages.excite);
        video.pause();
    }
}

そして、すべてのデータを含む変数は次のとおりです。

var i = 0;
var video = _V_("player");

var stages = {
                "excite":   {
                                "video": "vid/Clip_1.mov",
                                "modal": $('#exciteModal'),
                                "option1": "commit",
                                "option2": "compete"
                            },
                "commit":   {
                                "video": "vid/Clip_2.mov",
                                "modal": $('#commitModal'),
                                "option1": "div",
                                "option2": "compete",
                                "aside1": "pdf1",
                                "aside1": "iWill",
                                "aside1": "displayVis",

                            },
                "compete":  {
                                "video": "vid/Clip_3.mov",
                                "modal": $('#competeModal'),
                                "option1": "div",
                                "option2": "div",
                                "aside1": "pdf2",
                                "aside1": "salesChamp",
                                "aside1": "numberCrunch",
                            }
            };

そして最後に: div のマークアップ

HTML

<div id="exciteModal" class="modals">
    <a class="option1" href="#1" data-target="commit">UA's Commitment</a>
    <a class="option2" href="#2" data-target="compete">Compete</a>
</div>
<div id="commitModal" class="modals">
    <a class="option1" href="#1" data-target="commit">Sign In</a>
    <a class="option2" href="#2" data-target="compete">Compete</a>
</div>
<div id="competeModal" class="modals">
    <a class="option1" href="#1" data-target="commit">Sign In</a>
    <a class="option2" href="#2" data-target="compete">Train</a>
</div>

CSS

#exciteModal, #commitModal, #competeModal {
  display: none; }

.modals {
  position: relative;
  margin-top: -540px;
  width: 960px;
  height: 540px;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000; }
  .modals a {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 20px;
    border-radius: 10px;
    margin-top: 210px;
    border: 1px solid white;
    color: white; }
4

1 に答える 1

0

終了したイベント用に設定したイベント リスナーが削除されていないことが判明したため、終了したイベントが 2 回目に発生したときに、2 つのリスナーがそれをリッスンしていました。

于 2013-05-07T17:05:41.777 に答える