我希望使用字符串'activeVideo'作为变量,但我无法让它工作。我觉得我很接近做正确的事情,但我现在一直坚持几个小时......我做错了什么?我如何正确创建一个字符串在JavaScript/jQuery中的变量?
firstVideo = 'https://www.youtube.com/embed/kxopViU98Xo?rel=0&showinfo=0?ecver=2;autoplay=1';
secondVideo = 'https://www.youtube.com/embed/FWO5Ai_a80M?ecver=2;autoplay=1';
jQuery('.play-circle').click(function() {
console.log(this.id + 'Video');
activeVideo = this.id + 'Video';
jQuery('.play-circle').fadeOut(0);
jQuery('.video').fadeIn(0);
jQuery('.video-close').fadeIn(0);
jQuery('#' + this.id + 'Video').attr('src', activeVideo);
});
jQuery('.video-close').click(function() {
console.log('closing video');
jQuery(activeVideo).attr('src', '');
jQuery('.video').fadeOut(0);
jQuery('.video-close').fadeOut(0);
jQuery('.play-circle').fadeIn(0);
});
body {
background-color: #000000;
}
.banner-wide {
position: relative;
height: 720px;
background: url('https://picsum.photos/1000/500') center/cover;
}
.banner-wide .text {
width: 30%;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left: 7%;
}
.banner-wide .text h3,
.banner-wide .text p {
text-align: left;
color: #ffffff;
}
.video-thumbnail {
z-index: 11;
position: relative;
right: 0;
top: 0;
width: 50%;
height: 360px;
cursor: pointer;
float: right;
padding: 5px;
box-sizing: border-box;
}
.play-circle {
width: 100%;
height: 100%;
background: url('http://addplaybuttontoimage.way4info.net/Images/Icons/13.png') no-repeat center/150px rgba(0, 0, 0, 0.7);
}
.video {
display: none;
width: 100%;
height: 360px;
position: relative;
right: 0;
top: 0;
}
.video-close {
display: none;
position: absolute;
width: 20px;
height: 20px;
top: 14px;
right: 20px;
cursor: pointer;
background: url('http://freevector.co/wp-content/uploads/2013/03/8934-close-button1.png') no-repeat center center/20px rgba(255, 255, 255, 1);
border-radius: 100px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banner-wide owc">
<div class="video-thumbnail">
<div id="first" class="play-circle"></div>
<div class="video-close"></div>
<iframe class="video" id="firstVideo" width="375" height="225" frameborder="0" allowfullscreen></iframe>
</div>
<div class="video-thumbnail">
<div id="second" class="play-circle"></div>
<div class="video-close"></div>
<iframe class="video" id="secondVideo" width="375" height="225" frameborder="0" allowfullscreen></iframe>
</div>
</div>
你只是不要。至少不*正确* –
请不要链接到第三方网站,因为这些链接可能会随着时间的推移而死亡。只需在代码片段中发布您的代码就可以了。 –
只需将'activeVideo = this.id +'Video';'放入关闭函数中,它就可以工作。并且请注意,您需要声明变量!! **,为此使用'const','let','var'。然后你的代码会在这种情况下崩溃,你可以回到正确的轨道 –