Javascript 未捕获类型错误:无法读取属性';长度';未定义-jQuery的定义
我有一个简单的HTML5交互式视频播放器,用户可以通过点击按钮播放不同的视频 我添加了一个按钮goback,允许用户返回到以前播放的视频 这里是htmlJavascript 未捕获类型错误:无法读取属性';长度';未定义-jQuery的定义,javascript,jquery,Javascript,Jquery,我有一个简单的HTML5交互式视频播放器,用户可以通过点击按钮播放不同的视频 我添加了一个按钮goback,允许用户返回到以前播放的视频 这里是html <div class="container-fluid"> <div class="row"> <div class="col-12" canplay id="video-block"> &
<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
})
}
}
var=null;
var=null;
var连接=null;
var videohistory=[];
$(文档).ready(函数(){
$.getJSON('data.json',函数(数据){
电影=数据电影;
$.getJSON('datasaved/settings2.json',函数(数据){
流程图=data.movies;
连接=数据连接;
对于(var c=0;c=parseFloat($(this.attr(“starttime”)&&($(“#videoplayer”)[0].currentTime
当用户播放第二个视频时,会出现“后退”按钮,用户可以单击该按钮并播放上一个视频
现在,当我单击goback时,我得到以下错误
main.js:156未捕获类型错误:无法读取未定义的属性“length”
更新
这是
var movieHistory = Object.values(movie);
var movieHistory = movie;