2

更新：这是链接 http://15four.com/interactiveVideo/

好的，我正在做一个基本上是“选择你自己的冒险”风格视频情况的项目。它的工作方式是这样的：

  1. 播放视频
  2. 为播放器的“结束”状态设置事件监听器
  3. 用两个按钮显示对应的 div
  4. 用户单击两个按钮之一
  5. 根据他们点击的按钮加载相应的视频
  6. 重复

在第一个视频上一切都很好。div 加载得很好，单击按钮正确加载并播放下一个视频。问题是当我到达第二个视频的结尾时，它应该显示第二个选择你自己的冒险 div，它同时显示第一个和第二个 CYOA 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

事实证明，我为结束事件设置的事件监听器没有被删除，所以第二次结束事件发生时，有两个监听器在监听它。

于 2013-05-07T17:05:41.777 回答