javascript - Vimeo API - 控制台错误

Question

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

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 = [
		"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

尝试uncompressed version froogaloop的图书馆。

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