嗨我试图使自定义视频滑块页面只注意到每次它幻灯片5个错误出现在我的控制台:Vimeo的API - 控制台错误
Ungaught TypeError: Cannot read property 'value' of undefined at 1 (frogaloop2.min.js) Ungaught TypeError: Cannot read property 'value' of undefined at 1 (frogaloop2.min.js) Ungaught TypeError: Cannot read property 'value' of undefined at 1 (frogaloop2.min.js) Ungaught TypeError: Cannot read property 'value' of undefined at 1 (frogaloop2.min.js)
GET https://vimeo.com/api/oembed.json?callback=vimeoCallback&url=https://vimeo/undefined net::ERR_ABORTED
这里是我的代码:
$(document).ready(function() {
var iframe = document.getElementById("video");
var player = $f(iframe);
var playButton = document.getElementById("play-button");
var interval = null;
var videoCover = [
"http://res.cloudinary.com/dii2nxgkh/image/upload/v1505311262/123_eihw5x.jpg",
"http://res.cloudinary.com/dii2nxgkh/image/upload/v1505312273/2_vcxdhc.jpg",
"http://res.cloudinary.com/dii2nxgkh/image/upload/v1505312273/3_ignkr9.jpg",
"http://res.cloudinary.com/dii2nxgkh/image/upload/v1505312273/4_lpbars.jpg"
];
var videos = [
\t \t "https://player.vimeo.com/video/161138986?api=1",
\t \t "https://player.vimeo.com/video/161901908?api=1",
\t \t "https://player.vimeo.com/video/75736121?api=1",
\t \t "https://player.vimeo.com/video/184564192?api=1"
];
var headings = [
\t \t "Introducing Mobile Answering",
\t \t "Introducing Slide Two",
\t \t "Introducing Slide Three",
\t \t "Introducing Slide Four"
];
var slideText = [
\t \t "Slide 1 dolor sit amet, consectetur adipiscing elit. Phasellus fringilla at ex sit amet viverra. Duis sapien lorem, bibendum nec augue gravida, vestibulum maximus lorem. Nam scelerisque nec massa quis dictum. Etiam id imperdiet dolor.",
\t \t "Slide 2 dolor sit amet, consectetur adipiscing elit. Phasellus fringilla at ex sit amet viverra. Duis sapien lorem, bibendum nec augue gravida, vestibulum maximus lorem. Nam scelerisque nec massa quis dictum. Etiam id imperdiet dolor.",
\t \t "Slide 3 dolor sit amet, consectetur adipiscing elit. Phasellus fringilla at ex sit amet viverra. Duis sapien lorem, bibendum nec augue gravida, vestibulum maximus lorem. Nam scelerisque nec massa quis dictum. Etiam id imperdiet dolor.",
\t \t "Slide 4 dolor sit amet, consectetur adipiscing elit. Phasellus fringilla at ex sit amet viverra. Duis sapien lorem, bibendum nec augue gravida, vestibulum maximus lorem. Nam scelerisque nec massa quis dictum. Etiam id imperdiet dolor."
];
var bgColor = ["#182853", "#ce0e5c", "#ed7a0b", "#c72539"];
var slideCount = 0;
$(".vidslider li").find(".right").css("background", bgColor[slideCount]);
$(".vidslider li").find(".left img").attr("src", videoCover[slideCount]);
$(".vidslider li").find(".left .embed-container iframe").attr("src", videos[slideCount]);
$(".vidslider li").find(".right h2").text(headings[slideCount]);
$(".vidslider li").find(".right p").text(slideText[slideCount]);
$(".vidslider li").find(".counter").append("<span>1</span> of " + videoCover.length);
$(".next").click(function() {
var slide = $(".vidslider li");
slideCount++;
if (slideCount >= videoCover.length) {
slideCount = 0;
}
$(slide).find(".right h2").fadeOut(300);
$(slide).find(".right p").fadeOut(300);
setTimeout(function() {
$(slide).find(".right").addClass("activeVid");
$(slide).find(".left").addClass("hide");
$(slide).find(".right").css("background", bgColor[slideCount]);
$(slide).find(".vidClose").css("background", bgColor[slideCount]);
}, 350);
setTimeout(function() {
$(slide).find(".right").removeClass("activeVid");
$(slide).find(".left").removeClass("hide");
$(".counter span").html(slideCount + 1);
$(slide).find(".right h2").text(headings[slideCount]);
$(slide).find(".right p").text(slideText[slideCount]);
$(slide).find(".left img").attr("src", videoCover[slideCount]);
$(slide).find(".left .embed-container iframe").attr("src", videos[slideCount]);
}, 1050);
setTimeout(function() {
$(slide).find(".right h2").fadeIn(300);
$(slide).find(".right p").fadeIn(300);
}, 1600);
});
$(".prev").click(function() {
var slide = $(".vidslider li");
slideCount--;
if (slideCount < 0) {
slideCount = videoCover.length - 1;
}
$(slide).find(".right h2").fadeOut(300);
$(slide).find(".right p").fadeOut(300);
setTimeout(function() {
$(slide).find(".right").addClass("activeVid");
$(slide).find(".left").addClass("hide");
$(slide).find(".right").css("background", bgColor[slideCount]);
$(slide).find(".vidClose").css("background", bgColor[slideCount]);
}, 350);
setTimeout(function() {
$(slide).find(".right").removeClass("activeVid");
$(slide).find(".left").removeClass("hide");
$(".counter span").html(slideCount + 1);
$(slide).find(".right h2").text(headings[slideCount]);
$(slide).find(".right p").text(slideText[slideCount]);
$(slide).find(".left img").attr("src", videoCover[slideCount]);
$(slide)
\t \t \t \t .find(".left .embed-container iframe")
\t \t \t \t .attr("src", videos[slideCount]);
}, 1050);
setTimeout(function() {
$(slide).find(".right h2").fadeIn(300);
$(slide).find(".right p").fadeIn(300);
}, 1600);
});
$(".left").click(function() {
var slide = $(".vidslider li");
player.api("play");
$(this).addClass("activeVid");
$(slide).find(".right").addClass("hide");
$(this).find("img").css("width", "100%");
$(".controls").fadeOut(300);
$(".counter").fadeOut(300);
$(".left .overlayVid").fadeOut(300);
$(".left img").fadeOut(300);
setTimeout(function() {
$(slide).find(".right").fadeOut(300);
}, 600);
});
$(".pullTab, .vidClose").click(function() {
var slide = $(".vidslider li");
player.api("unload");
$(slide).find(".right").fadeIn(200);
$(".controls").fadeIn(200);
$(".counter").fadeIn(200);
$(".left").removeClass("activeVid");
$(slide).find(".right").removeClass("hide");
$(".left").find("img").css("width", "120%");
$(".left .overlayVid").fadeIn(300);
$(".left img").fadeIn(300);
});
$(function() {
interval = setInterval(callFunc, 7000);
});
function callFunc() {
jQuery(".next").trigger("click");
}
$(".vidslider").hover(function() {
clearInterval(interval);
});
$(".vidslider").on("mouseleave", function() {
if ($('.left').hasClass('activeVid')) {
console.log('Video open');
} else {
interval = setInterval(callFunc, 7000);
}
});
});
.cf:before {
content: " ";
display: table;
}
.cf:after {
content: " ";
display: table;
clear: both;
}
#sliderHowTo {
width: 100%;
left: 50%;
position: relative;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
margin: 60px 0;
overflow: inherit !important;
padding-bottom: 60px;
margin-bottom: 0px;
padding-top: 40px;
}
#sliderHowTo h1 {
font-size: 24px;
color: #562d4d;
line-height: 90px;
text-align: center;
font-weight: 300!important;
font-family: 'Open Sans', sans-serif !important;
font-size: 30px;
margin: 0;
}
#sliderHowTo .vidslider {
max-width: 760px;
width: 100%;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
margin: 0 auto;
padding: 0px;
}
#sliderHowTo .vidslider li {
height: 428px;
overflow: hidden;
position: relative;
}
#sliderHowTo .vidslider li .left {
width: 67%;
float: left;
position: absolute;
-webkit-transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
min-height: 428px;
top: 0;
left: 0;
will-change: auto;
}
#sliderHowTo .vidslider li .left img {
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
z-index: 1;
-o-object-fit: cover;
object-fit: cover;
will-change: auto;
}
#sliderHowTo .vidslider li .left.hide {
width: 0%;
}
#sliderHowTo .vidslider li .left .embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
#sliderHowTo .vidslider li .left .embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#sliderHowTo .vidslider li .left .embed-container object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#sliderHowTo .vidslider li .left .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#sliderHowTo .vidslider li .left .overlayVid {
position: absolute;
width: 100%;
height: 428px;
background: rgba(0, 0, 0, 0.5);
z-index: 2;
cursor: pointer;
-webkit-transition: background 0.5s ease-in-out;
-o-transition: background 0.5s ease-in-out;
transition: background 0.5s ease-in-out;
}
#sliderHowTo .vidslider li .left .overlayVid:hover {
background: rgba(0, 0, 0, 0.4);
}
#sliderHowTo .vidslider li .left .overlayVid:after {
content: '';
background: url("http://svgshare.com/i/307.svg");
-webkit-background-size: cover;
background-size: cover;
width: 80px;
height: 80px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#sliderHowTo .vidslider li .left.activeVid {
width: 100%;
}
#sliderHowTo .vidslider li .right {
width: 33.33%;
color: #fff;
padding-left: 25px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: 50%;
position: relative;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background: #182853;
min-height: 428px;
z-index: 5;
-webkit-transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-o-transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: absolute;
right: 0;
padding-top: 65px;
will-change: auto;
}
#sliderHowTo .vidslider li .right h2 {
font-size: 22px;
width: 50%;
color: #fff;
margin-bottom: 30px;
font-weight: 300;
line-height: 28px;
margin-top: 0px;
font-family: 'Open Sans', sans-serif !important;
}
#sliderHowTo .vidslider li .right p {
font-size: 14px;
line-height: 18px;
font-weight: 300;
width: 80%;
margin: 0px;
font-family: 'Open Sans', sans-serif !important;
}
#sliderHowTo .vidslider li .right.activeVid {
width: 100%;
}
#sliderHowTo .vidslider li .right.hide {
width: 0%;
padding-left: 0;
}
#sliderHowTo .vidslider li .counter {
position: absolute;
bottom: 24px;
right: 55px;
color: #fff;
font-size: 11px;
z-index: 10;
}
#sliderHowTo .vidslider li .controls {
position: absolute;
right: 20px;
bottom: 15px;
z-index: 10;
}
#sliderHowTo .vidslider li .controls .next {
width: 30px;
height: 30px;
margin: 0px;
-webkit-border-radius: 50%;
border-radius: 50%;
font-size: 24px;
text-align: center;
line-height: 30px;
cursor: pointer;
position: relative;
background: url("/assets/images/misc/arrowNext.svg");
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
display: inline-block;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: auto;
}
#sliderHowTo .vidslider li .controls .next:hover {
opacity: 0.5;
}
#sliderHowTo .vidslider li .controls .prev {
width: 30px;
height: 30px;
margin: 0px;
-webkit-border-radius: 50%;
border-radius: 50%;
font-size: 24px;
text-align: center;
line-height: 30px;
cursor: pointer;
position: relative;
background: url("/assets/images/misc/arrowBack.svg");
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
display: inline-block;
margin-right: 40px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: auto;
}
#sliderHowTo .vidslider li .controls .prev:hover {
opacity: 0.5;
}
#sliderHowTo .vidslider li .pullTab {
width: 40px;
height: 40px;
background: #182853;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
right: -20px;
cursor: pointer;
-webkit-border-radius: 50% 0% 0% 50%;
border-radius: 50% 0% 0% 50%;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#sliderHowTo .vidslider li .pullTab:hover {
right: -17px;
}
#sliderHowTo .vidslider li .pullTab:after {
background: url("http://svgshare.com/i/32U.svg") no-repeat;
content: '';
position: absolute;
width: 25px;
height: 25px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#sliderHowTo .vidslider li .vidClose {
width: 35px;
height: 35px;
background: #182853;
position: absolute;
top: 0px;
right: 0px;
cursor: pointer;
-webkit-border-radius: 0% 0% 0% 50%;
border-radius: 0% 0% 0% 50%;
}
#sliderHowTo .vidslider li .vidClose:after {
background: url("http://svgshare.com/i/353.svg") no-repeat;
content: '';
position: absolute;
width: 22px;
height: 22px;
top: 45%;
left: 55%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="sliderHowTo" class="cf">
<h1>How-to videos</h1>
<ul class="vidslider">
<li class="cf">
<div class="left">
<div id="play-button" class="overlayVid"></div>
<img class="videoCover" src="">
<div class='embed-container'>
<iframe id="video" src='' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
<div class="right">
<h2></h2>
<p></p>
</div>
<div class="controls">
<div class="prev"></div>
<div class="next"></div>
</div>
<div class="counter"></div>
<div class="vidClose"></div>
</li>
</ul>
</section>
和链接到codepen它似乎是工作的罚款:https://codepen.io/nsmed/pen/oGNgxp
我猜测它是在我为每个视频插入src时滑动的方式。
这是什么都与StackOverflow的API做什么? – BenM
你的问题与Stack Overflow API无关,但你的标题是“Stack overflow API - Console errors”。这是一个错误吗?如果是的话,请修改你的问题来解决它。 –