Vimeo的API - 控制檯錯誤

嗨我試圖使自定義視頻滑塊頁面只注意到每次它幻燈片5個錯誤出現在我的控制檯：Vimeo的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

這裏是我的代碼：

$(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它似乎是工作的罰款：https://codepen.io/nsmed/pen/oGNgxp

我猜測它是在我爲每個視頻插入src時滑動的方式。

來源

2017-10-09 nSmed

這是什麼都與StackOverflow的API做什麼？ – BenM

你的問題與Stack Overflow API無關，但你的標題是「Stack overflow API - Console errors」。這是一個錯誤嗎？如果是的話，請修改你的問題來解決它。 –

試試froogaloop庫的uncompressed version。

如果您不爲視頻播放器元素分配唯一的ID，則會出現一些問題。每個玩家都必須有其唯一的ID。

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

下面是一個例子：

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

Vimeo的API - 控制檯錯誤

回答

相關問題