Vimeo API - 控制台错误

Posted 2023-02-25

技术标签:

【中文标题】Vimeo API - 控制台错误【英文标题】：Vimeo API - Console errors 【发布时间】：2017-10-09 09:24:12 【问题描述】：

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

Ungaught TypeError: Cannot read property 'value' of undefined at 1 (frogaloop2.min.js) Ungaught TypeError：无法读取 1 处未定义的属性“值”（frogaloop2.min.js） Ungaught TypeError：无法读取 1 处未定义的属性“值”（frogaloop2.min.js） Ungaught TypeError：无法读取 1 处未定义的属性“值”(frogaloop2.min.js) GEThttps://vimeo.com/api/oembed.json?callback=vimeoCallback&url=https://vimeo/undefinednet::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 的方式有关。

【问题讨论】：

这与 *** API 有什么关系？您的问题与 Stack Overflow API 无关，但您的标题为“Stack Overflow API - 控制台错误”。这是一个错误吗？如果是，请通过编辑您的问题来解决它。 【参考方案1】：

试试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"   frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<div>
  <button>Play</button>
  <button>Pause</button>
  <p>Status: <span class="status">&hellip;</span></p>
</div>

【讨论】：

以上是关于Vimeo API - 控制台错误的主要内容，如果未能解决你的问题，请参考以下文章

Vimeo 内容安全策略错误 - 拒绝加载脚本

嵌入特定 Vimeo 网址时遇到问题

Vimeo - 通过 javascript api 发送密码

如何将函数添加到 api_addEventListener 到带有参数的 Vimeo 播放器

动态添加/控制 vimeo 嵌入

javascript Vimeo控制视频