메오의 API - 콘솔 오류 - 우수한 라이브러리

내가 페이지에 대한 사용자 정의 비디오 슬라이더를 만들려고 노력하고있어 사람이 그냥 5 오류가 내 콘솔에 표시 슬라이드마다 눈치 야 :메오의 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

내 코드입니다 https://codepen.io/nsmed/pen/oGNgxp

: 그것은 잘 작동하는 것 같군 곳

$(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하기

내가 슬라이드 할 때 각 비디오의 src를 삽입하는 방식과 관련이 있다고 생각합니다.

출처

2017-10-09 nSmed

어떤이는 StackOverflow의 API를 할 필요가 않습니다 여기

<iframe id='vimeo-player' src='link-for-vimeo?api=1&player_id=vimeo-player'></iframe>

은 예입니다? – BenM

귀하의 질문은 스택 오버플로 API와 관련이 없지만 제목에 "스택 오버플로 API - 콘솔 오류"가 표시됩니다. 이것은 실수입니까? 예인 경우 질문을 수정하여 문제를 해결하십시오. –

froogaloop 라이브러리의 uncompressed version을 사용해보십시오.

동영상 플레이어 요소에 고유 한 ID를 할당하지 않으면 몇 가지 문제가 있습니다. 각 플레이어는 고유 ID를 가져야합니다.

$(function() { 
 
    var iframe = $('#player1')[0]; 
 
    var player = $f(iframe); 
 
    var status = $('.status'); 
 

 
    // When the player is ready, add listeners for pause, finish, and playProgress 
 
    player.addEvent('ready', function() { 
 
     status.text('ready'); 
 
     
 
     player.addEvent('pause', onPause); 
 
     player.addEvent('finish', onFinish); 
 
     player.addEvent('playProgress', onPlayProgress); 
 
    }); 
 

 
    // Call the API when a button is pressed 
 
    $('button').bind('click', function() { 
 
     player.api($(this).text().toLowerCase()); 
 
    }); 
 

 
    function onPause() { 
 
     status.text('paused'); 
 
    } 
 

 
    function onFinish() { 
 
     status.text('finished'); 
 
    } 
 

 
    function onPlayProgress(data) { 
 
     status.text(data.seconds + 's played'); 
 
    } 
 
});

div { 
 
    margin-top: 3px; 
 
    padding: 0 10px; 
 
} 
 

 
button { 
 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
    cursor: pointer; 
 
    font-weight: 700; 
 
    font-size: 13px; 
 
    padding: 8px 18px 10px; 
 
    line-height: 1; 
 
    color: #fff; 
 
    background: #345; 
 
    border: 0; 
 
    border-radius: 4px; 
 
    margin-left: 0.75em; 
 
} 
 

 
p { 
 
    display: inline-block; 
 
    margin-left: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script> 
 
<iframe id="player1" src="https://player.vimeo.com/video/76979871?api=1&player_id=player1" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
 

 
<div> 
 
    <button>Play</button> 
 
    <button>Pause</button> 
 
    <p>Status: <span class="status">&hellip;</span></p> 
 
</div>

출처

2017-10-09 09:39:03

메오의 API - 콘솔 오류

답변

관련 문제