Ifループがビデオの一時停止/再生機能を起動しない可能性があります

私はチュートリアルファイルをフォークし、ビデオ上にオーバーレイされ、ビデオの特定の期間でトリガーされるボタンを持つMCQスタイルのビデオを作成しようとしています自体。Ifループがビデオの一時停止/再生機能を起動しない可能性があります

ビデオの30秒後に作業が中止されたことを除いて、ほとんど動作しましたが、何かを壊したに違いありませんが、何が分かりません。

理想的には、30秒のマークで、ユーザーには2つの選択肢が与えられます。

選択肢1は数秒間再生を再開し、ビデオの終了を示す一時停止します。

選択肢2は選択した1つの応答の間ビデオをスキップし、THENが数秒間再生され、ビデオの最後に到達します。

しかし、私はこのチェックポストを30秒で壊しました。私はそれを修正するのを助けてください。

は、ここに私のJSコードは次のとおりです。

// Various variables 
var videoHalfWay = 0; 
var formattedHalfWay = 0; 

// Choice parts 
var choiceHeart = 2; 
var ending = 20;    
var goodChoiceChosen = false; 
var choiceHeartchosen = false; 
var qualityChosen = false; 
var costChosen = false; 
var qualityQuestion = 30; 
var costPart = 38; 
var costCons = 36; 

// Question variable 
var question1Asked = false; 

var video1; 

$(document).ready(function(){ 

    video1 = $('#video1'); 

    $('.box1').on('click', function(){ 
     choiceHeartchosen = true; 
     video1[0].play(); 
    }); 

    $('.box2').on('click', function(){ 

     video1[0].play(); 
    }); 

    $('.box3').on('click', function(){ //quality 
     costChosen = true; 
     video1[0].currentTime = costPart; 
    }); 

    $('.box4').on('click', function(){ //cost 
     qualityChosen = true; 
     video1[0].play(); 

    }); 



    $(video1).on('loadeddata', function(){ 
     videoHalfWay = Math.round(this.duration/2); 
    }) 


    $(video1).on('timeupdate', function() 
    { 
     var currentTime = Math.round(this.currentTime); 
     var durationNum = Math.round(this.duration); 
     var formattedCurrentTime = secondsToHms(currentTime); 
     var formattedDurationTime = secondsToHms(durationNum) 
     onTrackedVideoFram(formattedCurrentTime, formattedDurationTime) 

     if(currentTime >2){ $(".box1, .box2").hide(); } 

     if(currentTime <20){ $(".box4").hide(); } 

     if(currentTime <22){ $(".box3").hide(); } 

     if(currentTime >20){ $(".box4").show(); } 

     if(currentTime >21){ $(".box3").show(); } 

     if(currentTime >30){ $(".box3, .box4").hide(); } 

     if(currentTime == costCons && costChosen == true){ video1[0].pause(); } 

     if(currentTime == choiceHeart && choiceHeartchosen == false){ video1[0].pause(); }   


     if(currentTime == qualityQuestion && qualityChosen == false){ video1[0].pause(); } 


     if(currentTime == qualityQuestion && costChosen == false){ 

      video1[0].pause(); 

     } 

     if(currentTime == qualityQuestion && costChosen == true){ 

      video1[0].play(); 

     } 

     if (currentTime == qualityQuestion && qualityChosen == true) { 
      video1[0].playPauseVideo();  } 


     if(currentTime == badChoicePart && goodChoiceChosen == true){ 
      video1[0].pause(); 
     } 

     if(currentTime == videoHalfWay){ 
      // Halfway point 
     } 

     if(currentTime == durationNum){ 
      // Video complete 
     } 

    }); 

}); 

function onTrackedVideoFram(curretTime, duration){ 
    $('.current').text(curretTime); 
    $('.duration').text(duration); 
} 

function secondsToHms(d) { 
    d = Number(d); 
    var h = Math.floor(d/3600); 
    var m = Math.floor(d % 3600/60); 
    var s = Math.floor(d % 3600 % 60); 
    return ((h > 0 ? h + ":" + (m < 10 ? "0" : "") : "") + m + ":" + (s < 10 ? "0" : "") + s); 
} 

function playPauseVideo(popUp){ 
    if(video1[0].paused){ 
     video1[0].play(); 
    } else{ 
     video1[0].pause(); 
     $.featherlight($(popUp)); 
    } 
}

問題：

ビデオは、これまでの選択ボックスをクリックしているにもかかわらず、30秒後に再生されません。

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Interactive Video</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- jQuery --> 
    <script src="js/jquery-1.12.3.min.js"></script> 

    <!-- Skeleton CSS & Featherlight --> 
    <link rel="stylesheet" href="css/normalize.css"> 
    <link rel="stylesheet" href="css/skeleton.css"> 
    <link rel="stylesheet" href="css/featherlight.css"> 
    <script src="js/featherlight.js"></script> 

    <!-- Interaction CSS --> 
    <link rel="stylesheet" href="css/interaction.css"> 

    <!-- Interaction js --> 
    <script src="js/interaction.js"></script> 

    <!-- GreenSock --> 
    <script src="js/TweenMax.min.js"></script> 

</head> 
<body> 

    <div class="container"> 


      <div class="row videoArea"> 


      <div class="box1" style="z-index: 2"></div> 


      <div class="box2" style="z-index: 2"></div> 

      <div class="box3" style="z-index: 2"></div> 
      <div class="box4" style="z-index: 2"></div> 

      <div class="videoCont"> 

       <video id="video1" controls autoplay="true"> 
       <source src="media/video1.mp4" type="video/mp4"> 
       Your browser does not support the video tag. 
      </video> 
      </div>   

     </div> 

     <div class="row descArea"> 

      <h5>Video Title</h5> 
      <p>This is the description</p> 
      <div class="current">0:00</div> 
      <div class="duration">0:00</div> 

     </div> 

    </div> <!-- End of Container --> 

    <div class="lightbox popUpQuestion1"> 
     <h4>Question 1</h4> 
     <p>Think about what you learned and then how would you respond?</p> 
     <br> 
     <a href="#" class="button longBtns goodChoice">Calmly respond with helpful info</a> 
     <a href="#" class="button longBtns badChoice">Why is he asking me this question?</a> 
    </div> 

    <div class="lightbox persona1PopUp"> 
     <img src="images/Justin.jpg"> 
     <h5>Justins Hanks</h5> 
     <p>Role: Development Manager</p> 
     <p>Bio: Justin has been a manager for 4 years. sakjdhsakjdh askjdh ksajhd aksjh askjdhksajd askjhd askjhdkjsah </p> 
     <p>Previous Experiences</p> 
     <ul> 
      <li>Experience 1: 2002-2004</li> 
      <li>Experience 2: 2005-2009</li> 
      <li>Experience 3: 2010-2016</li> 
     </ul> 
    </div> 

    <div class="lightbox persona2PopUp"> 
     <img src="images/Matt.jpg"> 
     <h5>Matt Briscoe</h5> 
     <p>Role: Developer</p> 
     <p>Bio: Matt has been a manager for 4 years. This alkjdlas asldkjasldj aslkdj aklsdjlsakdjalskjd salkdj salkjd</p> 
     <p>Previous Experiences</p> 
     <ul> 
      <li>Experience 1: 2002-2004</li> 
      <li>Experience 2: 2005-2009</li> 
      <li>Experience 3: 2010-2016</li> 
     </ul> 
    </div> 

</body> 
</html>

そして、ここでは、CSSです：

body{ 
    background-color: #f0f0f0; 
} 

h1, h2, h3, h4, h5, h6{ 
    margin: 0; 
    font-weight: bold; 
} 

p{ 
    margin: 0; 
} 

video{ 
    width: 100%; 
    height: auto; 
} 

img{ 
    float: left; 
    margin-right: 25px; 
} 

.container{ 
    margin-top: 20px; 
} 

.descArea{ 
    background-color: #fff; 
    box-shadow: 0 0 3px #c8c8c8; 
    padding: 15px; 
    box-sizing: border-box; 
} 

.videoArea{ 
    position: relative; 
} 

.box1{ 
    position: absolute; 
    background-color: rgba(255, 198, 10, 1); 
    width: 10%; 
    height: 15%; 
    top: 10%; 
    left: 44%; 
    cursor: pointer; 
    transition:opacity 500ms; 
} 

.box2{ 
    position: absolute; 
    background-color: rgba(125, 185, 42, 1); 
    width: 10%; 
    height: 15%; 
    top: 32%; 
    left: 26%; 
    cursor: pointer; 
    transition:opacity 500ms; 
} 

.box3{ 
    position: absolute; 
    background-color: rgba(160, 185, 42, 1); 
    width: 31%; 
    height: 46%; 
    top: 50%; 
    left: 7%; 
    cursor: pointer; 
    transition:opacity 500ms; 
} 

.box4{ 
    position: absolute; 
    background-color: rgba(125, 285, 42, 1); 
    width: 33%; 
    height: 47%; 
    top: 50%; 
    left: 59%; 
    cursor: pointer; 
    transition:opacity 500ms; 
} 


.lightbox{ 
    display: none; 
} 

.longBtns{ 
    display: block; 
} 

.videoCont{ 
    position: relative; 
    pointer-events: none; 
}

してくださいは、私はこれを理解するのに役立ちます。

出典

2017-08-07 Logan

あなたは助けることはでき –

を助ける作業jsfiddleでこれを入れて？スカイプのように？ – Logan

また、私が使用したビデオは自分のコンピュータのメディアフォルダにあり、フィドルでやっていると、URLをリンクしてどこかにアップロードしなければならないということになります。私を混乱させる。 – Logan

サンプルコードが大幅に不足しているため、私は刺すようにして、Webコンソールを見ると、オブジェクトに存在しない次の関数に関するエラーが表示されます：

if(currentTime == qualityQuestion && qualityChosen == true) 
{ 
    video1[0].playPauseVideo(); 
}

それはおそらく読んでください：

if(currentTime == qualityQuestion && qualityChosen == true) 
{ 
    playPauseVideo(); 
}

出典

2017-08-07 21:42:55 seemly

var video1; $（ドキュメント）.ready（関数（）{ ビデオ1 = $（ '＃のビデオ1'）; これは、すでにビデオ1が何であるかを定義します..それをdoesntの – Logan

playPauseVideo関数は、オブジェクトのビデオ1上に存在しないと？ [0]、しかし、あなたの開発者のコンソールをチェックし、javascriptエラーを探します。 – seemly

Ifループがビデオの一時停止/再生機能を起動しない可能性があります

答えて

関連する問題