bxslider 이용한 슬라이드에 동영상 여러개 추가 채택완료
kyk0330luv
4년 전
조회 1,821
bxslider 를 이용해서 만든 슬라이더를 찾아서 가져왔는데요..
동영상 끝나면 넘어가는 소스를 찾아서 넣었는데, 동영상이 하나가 더 추가가 되서요ㅜ
아래처럼 수정해서 하나더 추가했는데, 두번째 동영상이 나오질 않아요ㅠ
제가 스크립트를 잘 몰라서 어느 부분을 더 추가하거나 수정해야 할까요?ㅠㅠ 도와주세요
</p>
<p> </p>
<p><div class="main_vis">
<ul class="bxslider">
<li class="m0" style="top: -100px;">
<div class="av_player" id="player"></div>
<div class="av_background" id="av_background" style="position: absolute; width: 100%; height: 1080px; top: 0;"></div>
</li>
<li class="m1"><img src="<?php echo G5_THEME_URL; ?>/img/main_visual01.png"></li>
<span style="background-color:#ecf0f1;"> <li class="m2" style="top: -100px;"></span>
<span style="background-color:#ecf0f1;"> <div class="av_player" id="player0"></div></span>
<span style="background-color:#ecf0f1;"> <div class="av_background" id="av_background2" style="position: absolute; width: 100%; height: 1080px; top: 0;"></div></span>
<span style="background-color:#ecf0f1;"> </li></span>
<li class="m3"><img src="<?php echo G5_THEME_URL; ?>/img/main_visual02.png"></li>
<li class="m4"><img src="<?php echo G5_THEME_URL; ?>/img/main_visual03.png"></li>
</ul>
<span id="m_prev"></span>
<span id="m_next"></span>
</div></p>
<p> </p>
<p><script type='text/javascript'></p>
<p>var player;
<span style="background-color:#ecf0f1;">var player0;</span>
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '1080px',
width: '100%',
videoId: 't79HfnGBf1M',
allowfullscreen: true,
frameborder: false,
playerVars: { 'rel': 0, 'autoplay': 1, 'controls': 0, 'modestbranding': 1, 'showinfo': 0, 'enablejsapi': 1, 'wmode': 'opaque' },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
<span style="background-color:#ecf0f1;"> player0 = new YT.Player0('player0', {</span>
<span style="background-color:#ecf0f1;"> height: '1080px',</span>
<span style="background-color:#ecf0f1;"> width: '100%',</span>
<span style="background-color:#ecf0f1;"> videoId: 'DzgrOUxIrAI',</span>
<span style="background-color:#ecf0f1;"> allowfullscreen: true,</span>
<span style="background-color:#ecf0f1;"> frameborder: false,</span>
<span style="background-color:#ecf0f1;"> playerVars: { 'rel': 0, 'autoplay': 1, 'controls': 0, 'modestbranding': 1, 'showinfo': 0, 'enablejsapi': 1, 'wmode': 'opaque' },</span>
<span style="background-color:#ecf0f1;"> events: {</span>
<span style="background-color:#ecf0f1;"> 'onReady': onPlayerReady,</span>
<span style="background-color:#ecf0f1;"> 'onStateChange': onPlayerStateChange</span>
<span style="background-color:#ecf0f1;"> }</span>
<span style="background-color:#ecf0f1;"> });</span>
}</p>
<p>
//동영상이 다 만들어진 시점
function onPlayerReady(event) {
loadNewVid("t79HfnGBf1M");
$('#av_background').hide();</p>
<p><span style="background-color:#ecf0f1;"> loadNewVid("DzgrOUxIrAI");</span>
<span style="background-color:#ecf0f1;"> $('#av_background2').hide();</span>
}</p>
<p>function fnMNext() {
clearTimeout(myVal);
slider1.goToNextSlide();
}</p>
<p>//동영상 끝난 후 이벤트
function onPlayerStateChange(event) {
if(event.data === 0) {//stop
myVal = setTimeout(function() { fnMNext(); }, 1);
}
}</p>
<p>function loadNewVid(vidID){
player.loadVideoById(vidID, "large");
<span style="background-color:#ecf0f1;"> player0.loadVideoById(vidID, "large");</span>
}</p>
<p>// ===================
// 메인 비주얼
// ===================
var myVal;
var slider1 = $('.bxslider').bxSlider({
video: true,
useCSS: false,
auto: false,
nextSelector: '#m_next',
prevSelector: '#m_prev',
onSliderLoad : function(index){ //페이지전환후 이벤트 호출
//console.log("onSliderLoad:"+index);
},
onSlideAfter : function(slideElement, oldIndex, newIndex){
//console.log("(전환 후) 대상 슬라이드의 요소 :"+newIndex);
if(newIndex == 0){
clearTimeout(myVal);</p>
<p> if( navigator.userAgent.toLowerCase().indexOf("msie") != -1 ){</p>
<p> } else {
if( player && player.getPlayerState() != 1 ){
player.playVideo();
}
}
} else {
if(newIndex == 1){
$(".m1 .txt1").show().stop(true).animate({opacity: 1,top:"150px"},1500);
$(".m1 .txt2").show().stop(true).animate({opacity: 1,top:"380px"},1800);
}else if(newIndex == 2){</p>
<p><span style="background-color:#ecf0f1;"> clearTimeout(myVal);</span></p>
<p><span style="background-color:#ecf0f1;"> if( navigator.userAgent.toLowerCase().indexOf("msie") != -1 ){</span></p>
<p><span style="background-color:#ecf0f1;"> } else {</span>
<span style="background-color:#ecf0f1;"> if( player0 && player0.getPlayerState() != 1 ){</span>
<span style="background-color:#ecf0f1;"> player0.playVideo();</span>
<span style="background-color:#ecf0f1;"> }</span>
<span style="background-color:#ecf0f1;"> }</span></p>
<p> }else if(newIndex == 3){
$(".m3 .txt1").show().stop(true).animate({opacity: 1,top:"150px"},1500);
$(".m3 .txt2").show().stop(true).animate({opacity: 1,top:"380px"},1800);
}else if(newIndex == 4){
$(".m4 .txt1").show().stop(true).animate({opacity: 1,top:"150px"},1500);
$(".m4 .txt2").show().stop(true).animate({opacity: 1,top:"380px"},1800);
}</p>
<p> if( navigator.userAgent.toLowerCase().indexOf("msie") != -1 ){</p>
<p> } else {
if( player && player.getPlayerState() == 1 ){
player.stopVideo().clearVideo();
}<span style="background-color:#ecf0f1;">else if( player0 && player0.getPlayerState() == 1 ){</span>
<span style="background-color:#ecf0f1;"> player0.stopVideo().clearVideo();</span>
<span style="background-color:#ecf0f1;"> }</span></p>
<p> }
}</p>
<p> //console.log("이전 슬라이드의 요소 인덱스 : "+oldIndex);
if(oldIndex == 0){
clearTimeout(myVal);
}else if(oldIndex == 1){
$(".m1 .txt1").stop(true).animate({opacity: 0,top:"50px"},1000);
$(".m1 .txt2").stop(true).animate({opacity: 0,top:"280px"},1800);
}else if(oldIndex==2){
<span style="background-color:#ecf0f1;">clearTimeout(myVal);</span>
}else if(oldIndex==3){
$(".m3 .txt1").stop(true).animate({opacity: 0,top:"50px"},1000);
$(".m3 .txt2").stop(true).animate({opacity: 0,top:"280px"},1800);
}else if(oldIndex==4){
$(".m4 .txt1").stop(true).animate({opacity: 0,top:"50px"},1000);
$(".m4 .txt2").stop(true).animate({opacity: 0,top:"280px"},1800);
}</p>
<p> if(newIndex != 0) {
clearTimeout(myVal);
myVal = setTimeout(function() { fnMNext(); }, 5000);
}
}
});</p>
<p>function fnMNext() {
clearTimeout(myVal);
slider1.goToNextSlide();
}</p>
<p>function fnPlay() {
//console.log("플레이");
$('#player1').attr("src", "<a href="https://www.youtube.com/embed/t79HfnGBf1M?rel=0&controls=0&modestbranding=1&showinfo=0&wmode=opaque&enablejsapi=1&autoplay=1");" target="_blank" rel="noopener noreferrer">https://www.youtube.com/embed/t79HfnGBf1M?rel=0&controls=0&modestbranding=1&showinfo=0&wmode=opaque&enablejsapi=1&autoplay=1");</a>
$('#player1')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');</p>
<p><span style="background-color:#ecf0f1;"> $('#player2').attr("src", "<a href="https://www.youtube.com/embed/DzgrOUxIrAI?rel=0&controls=0&modestbranding=1&showinfo=0&wmode=opaque&enablejsapi=1&autoplay=1");" target="_blank" rel="noopener noreferrer">https://www.youtube.com/embed/DzgrOUxIrAI?rel=0&controls=0&modestbranding=1&showinfo=0&wmode=opaque&enablejsapi=1&autoplay=1");</a></span>
<span style="background-color:#ecf0f1;"> $('#player2')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');</span>
}
function fnStop() {
//console.log("정지");
$('#player')[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
<span style="background-color:#ecf0f1;"> $('#player0')[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');</span>
}
</script></p>
<p> </p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
답변을 작성하려면 로그인이 필요합니다.
로그인