bxslider 이용한 슬라이드에 동영상 여러개 추가

bxslider 이용한 슬라이드에 동영상 여러개 추가

QA

bxslider 이용한 슬라이드에 동영상 여러개 추가

답변 1

본문

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', {

위 처럼 해보셨나요?

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 95
© SIRSOFT
현재 페이지 제일 처음으로