Vimeo API - 控制台错误

Question

嘿伙计们，我正在尝试为页面制作一个自定义视频滑块，只是每次滑动时都会注意到我的控制台中出现5个错误：

  

Ungaught TypeError：无法读取未定义的属性'value'（1）（frogaloop2.min.js）   Ungaught TypeError：无法读取未定义的属性'value'（1）（frogaloop2.min.js）   Ungaught TypeError：无法读取未定义的属性'value'（1）（frogaloop2.min.js）   Ungaught TypeError：无法读取1的未定义属性'value'（frogaloop2.min.js）
  获取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 = [
		"https://player.vimeo.com/video/161138986?api=1",
		"https://player.vimeo.com/video/161901908?api=1",
		"https://player.vimeo.com/video/75736121?api=1",
		"https://player.vimeo.com/video/184564192?api=1"
    ];
    var headings = [
		"Introducing Mobile Answering",
		"Introducing Slide Two",
		"Introducing Slide Three",
		"Introducing Slide Four"
    ];
    var slideText = [
		"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.",
		"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.",
		"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.",
		"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)
				.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);
    });

    $(".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的方式有关。

Answer 1

尝试froogaloop库的uncompressed version。

如果您没有为视频播放器元素分配唯一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>