bxslider 이용한 슬라이드에 동영상 여러개 추가
본문
bxslider 를 이용해서 만든 슬라이더를 찾아서 가져왔는데요..
동영상 끝나면 넘어가는 소스를 찾아서 넣었는데, 동영상이 하나가 더 추가가 되서요ㅜ
아래처럼 수정해서 하나더 추가했는데, 두번째 동영상이 나오질 않아요ㅠ
제가 스크립트를 잘 몰라서 어느 부분을 더 추가하거나 수정해야 할까요?ㅠㅠ 도와주세요
<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>
<li class="m2" style="top: -100px;">
<div class="av_player" id="player0"></div>
<div class="av_background" id="av_background2" style="position: absolute; width: 100%; height: 1080px; top: 0;"></div>
</li>
<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>
<script type='text/javascript'>
var player;
var player0;
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
}
});
player0 = new YT.Player0('player0', {
height: '1080px',
width: '100%',
videoId: 'DzgrOUxIrAI',
allowfullscreen: true,
frameborder: false,
playerVars: { 'rel': 0, 'autoplay': 1, 'controls': 0, 'modestbranding': 1, 'showinfo': 0, 'enablejsapi': 1, 'wmode': 'opaque' },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
//동영상이 다 만들어진 시점
function onPlayerReady(event) {
loadNewVid("t79HfnGBf1M");
$('#av_background').hide();
loadNewVid("DzgrOUxIrAI");
$('#av_background2').hide();
}
function fnMNext() {
clearTimeout(myVal);
slider1.goToNextSlide();
}
//동영상 끝난 후 이벤트
function onPlayerStateChange(event) {
if(event.data === 0) {//stop
myVal = setTimeout(function() { fnMNext(); }, 1);
}
}
function loadNewVid(vidID){
player.loadVideoById(vidID, "large");
player0.loadVideoById(vidID, "large");
}
// ===================
// 메인 비주얼
// ===================
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);
if( navigator.userAgent.toLowerCase().indexOf("msie") != -1 ){
} 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){
clearTimeout(myVal);
if( navigator.userAgent.toLowerCase().indexOf("msie") != -1 ){
} else {
if( player0 && player0.getPlayerState() != 1 ){
player0.playVideo();
}
}
}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);
}
if( navigator.userAgent.toLowerCase().indexOf("msie") != -1 ){
} else {
if( player && player.getPlayerState() == 1 ){
player.stopVideo().clearVideo();
}else if( player0 && player0.getPlayerState() == 1 ){
player0.stopVideo().clearVideo();
}
}
}
//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){
clearTimeout(myVal);
}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);
}
if(newIndex != 0) {
clearTimeout(myVal);
myVal = setTimeout(function() { fnMNext(); }, 5000);
}
}
});
function fnMNext() {
clearTimeout(myVal);
slider1.goToNextSlide();
}
function fnPlay() {
//console.log("플레이");
$('#player1').attr("src", "https://www.youtube.com/embed/t79HfnGBf1M?rel=0&controls=0&modestbranding=1&showinfo=0&wmode=opaque&enablejsapi=1&autoplay=1");
$('#player1')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
$('#player2').attr("src", "https://www.youtube.com/embed/DzgrOUxIrAI?rel=0&controls=0&modestbranding=1&showinfo=0&wmode=opaque&enablejsapi=1&autoplay=1");
$('#player2')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
}
function fnStop() {
//console.log("정지");
$('#player')[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
$('#player0')[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
}
</script>
답변 1
player0 = new YT.Player0('player0', {
위 소스를
player0 = new YT.Player('player0', {
위 처럼 해보셨나요?
아ㅜ 되는줄 알았는데, 그렇게 하니까 앞에 동영상이 뒤에걸로 나와요ㅠㅠ
답변을 작성하시기 전에 로그인 해주세요.
