Question

我有一个简单的HTML5交互式视频播放器，用户可以在其中单击按钮来播放不同的视频。

我添加了一个按钮上移功能，允许用户返回到先前播放的视频。

这是html

    <div class="container-fluid">
        <div class="row">
            <div class="col-12" canplay id="video-block">                    
                <div id="video-container">
                        <video id="videoplayer" playsinline autoplay>
                            <source src="" type="video/mp4">
                        </video>
                        <div id="interactive-layers">
                                <!-- <div class="go_back">Go back</div> -->
                        </div>
                    </div>
                    <div id="video-controls">
                        <div id="seek-bar-container">
                        <div id="seek-bar">
                            <div id="current-time">

                            </div>
                        </div>
                        </div>
                        <div id="pause-play-button">
                        <span id="play">play</span>
                        <span id="pause">pause</span>
                        </div>
                    </div>
            </div>
        </div>
    </div>

这是我的js

var movies = null;
var flowchart = null;
var connections = null;
var videohistory = [];


$(document).ready(function () {
    $.getJSON('data.json', function (data) {
        movies = data.movies;
        $.getJSON('datasaved/settings2.json', function (data) {
            flowchart = data.movies;
            connections = data.connections;

            for (var c = 0; c < connections.length; c++) {
                connections[c].buttonid = String(connections[c].buttonid).split("moviebuttons")[1];
                connections[c].movieid = String(connections[c].movieid).split("movieblock")[1];
            }

            for (var j = 0; j < movies.length; j++) {
                for (var i = 0; i < flowchart.length; i++) {
                    if (flowchart[i].checkbox == true && flowchart[i].movieid == movies[j].movieid) {
                        playVideo(movies[j], flowchart[i]);
                    }
                }
            }
        });
        setInterval(updateTimeline, 40);
    })

    $("#interactive-layers").on("click", ".video-btns", buttonLinkClicked);
    $('#interactive-layers').on('click', ".go_back", function () {
        playVideo(videohistory[videohistory.length - 2], true);

    });

    video = $("#video-container").find('video');
    video[0].addEventListener("timeupdate", onUpdateTime);
    video[0].addEventListener("canplaythrough", videoReady);
    video[0].addEventListener("pause", onPause);
    video[0].addEventListener("play", onPlay);
    video[0].addEventListener("ended", onEnded);
    video[0].addEventListener("timeupdate", onUpdateTime);
})

function buttonLinkClicked(e) {

    var mov = null;
    var flo = null;

    for (var j = 0; j < movies.length; j++) {
        if ($(e.target).attr("targetmovieid") == movies[j].movieid) {
            mov = movies[j];
        }
    }
    for (var i = 0; i < flowchart.length; i++) {
        if (flowchart[i].movieid == $(e.target).attr("targetmovieid")) {
            flo = flowchart[i];
        }
    }

    if (mov == null || flo == null) {
        $(this).attr('buttonid');
        var getButon = $(this).attr('buttonid');

        switch (getButon) {
            case "5":

                window.open('https://www.meed.com/', '_blank').focus();

                break;

            case "6":

                window.open('https://buy.meed.com/', '_blank').focus();

                break;
            case "7":

                window.open('https://www.meedprojects.com/projects-platform/bespoke-services', '_blank').focus();

                break;

            case "60":

                window.open('https://premium.meedprojects.com/Login', '_blank').focus();

                break;
        }

    } else {

        playVideo(mov, flo);
    }

}

function updateTimeline() {
    if ($("#videoplayer")[0].duration) {
        $(".video-btns").each(function () {
            if ($("#videoplayer")[0].currentTime >= parseFloat($(this).attr("starttime")) && $("#videoplayer")[0].currentTime < parseFloat($(this).attr("endtime"))) {
                $(this).addClass("show");
            } else {
                $(this).removeClass("show");
            }
        });
    }
}



function addGoBack() {
    var goback = $(" <div class='go_back'>Go back</div>");
    $("#interactive-layers").append(goback);
}

function playVideo(movie, flowchartvideo, back) {

    var movieHistory = Object.values(movie);

    $("#interactive-layers").html("");
    addGoBack();

    if (back == true) {

        videohistory.pop();

    } else {

        videohistory.push(movieHistory);
        console.log(videohistory);
    }

    if (videohistory.length == 1) {
        $(".go_back").addClass('hidden');
    } else {
        $(".go_back").removeClass('hidden');
    }


    var buttons = movie.buttons;

    for (var b = 0; b < buttons.length; b++) {

        for (var c = 0; c < connections.length; c++) {
            if (connections[c].buttonid == buttons[b].buttonid) {
                buttons[b].targetmovieid = connections[c].movieid;
            }
        }
    }

    $("#videoplayer").attr("src", movie.movie_url);
    $("#videoplayer")[0].muted = false;


    //  alert(buttons.length);
    for (var b = 0; b < buttons.length; b++) {
        var buttonid = buttons[b].buttonid;
        var label = buttons[b].label;
        var starttime = buttons[b].start_time;
        var endtime = buttons[b].end_time;

        var videobtns = $("<div buttonid='" + buttonid + "'  class='video-btns' targetmovieid='" + buttons[b].targetmovieid + "' starttime='" + starttime + "' endtime='" + endtime + "'><span class='label'>" + label + "</span></div>")
        var top, left, width, height;
        top = buttons[b].top
        left = buttons[b].left
        width = buttons[b].width
        height = buttons[b].height;

        $("#interactive-layers").append(videobtns);
        videobtns.css({
            top: top,
            left: left,
            width: width,
            height: height
        })
    }
}

当用户播放第二个视频时，将显示“上一步”按钮，用户可以单击它并播放上一部电影

现在，当我单击goback时，出现以下错误

main.js：156未捕获的TypeError：无法读取未定义的属性“ length”

更新

这是现场演示：live demo

我在做什么错？或者有人可以为此提供一种简单的方法？

Answer 1

我回答了快速的方法，在检查了您的工作代码后，建议您仔细看一下这行代码...

var movieHistory = Object.values(movie);

它似乎并没有完成您想要的操作。（克隆影片对象）。只需将其更改为

var movieHistory = movie;

它在Chrome Dev控制台中对我有效...

未捕获的TypeError：无法读取未定义的属性'length'-jQuery

1 个答案: