Question

我正在尝试分叉教程文件并创建一个MCQ样式的视频，该视频的按钮覆盖在视频上，并在视频本身的特定持续时间内触发。

我主要是为了工作，除了它在视频的30秒标记后停止工作，我必须把事搞砸了，但我无法弄清楚是什么。

理想情况下，在30秒标记处，用户有两种选择。

选择1重新开始播放几秒钟并暂停，表示视频结束。

选择2在选择1个答案的过程中跳过视频，然后播放几秒钟并到达视频结尾。

但是我在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;
}

请帮我解决这个问题。

Answer 1

由于缺少示例代码，我会采取措施并说如果您要查看您的Web控制台，将显示有关该对象上不存在的以下函数的错误：< / p>

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

它可能应该是：

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

什么可能导致If循环不触发视频暂停/播放功能

1 个答案: