Vimeo API - ошибки консоли

Question

Эй, ребята, я пытаюсь сделать собственный слайдер видео для страницы, которую только что заметил, каждый раз, когда она скользит, в моей консоли появляются 5 ошибок:

Ungaught TypeError: Невозможно прочитать свойство 'value' undefined at 1 (frogaloop2.min.js) Ungaught TypeError: Невозможно прочитать свойство 'value' undefined at 1 (frogaloop2.min.js) Ungaught TypeError: Невозможно прочитать свойство 'value' of undefined at 1 (frogaloop2.min.js) Ungaught TypeError: Невозможно прочитать свойство 'value' undefined at 1 (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 библиотека.

Есть некоторые проблемы, если вы не назначаете уникальный идентификатор для элемента видеопроигрывателя. Каждый игрок должен иметь свой уникальный идентификатор.

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