1. ホーム
  2. 質問と答え
  3. VimeoのAPIを - コンソールエラー

VimeoのAPIを - コンソールエラー

2017-10-09 3 views
0

ねえ、私は、ページのカスタムビデオスライダーを作るしようとしている人はちょうどそれが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

+0

これはStackOverflowのAPIとの関係があるのでしょうか？ – BenM

+0

あなたの質問はStack Overflow APIとは関係ありませんが、タイトルには「Stack Overflow API - Console errors」と書かれています。これは間違いですか？はいの場合は、質問を編集して修正してください。 –

答えて

2

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

関連する問題

 関連する問題