Youtube API 嵌入突然停止运行答案

【问题标题】：Youtube API embed suddenly stopped functioningYoutube API 嵌入突然停止运行
【发布时间】：2014-04-20 01:46:52
【问题描述】：

我已经使用 YouTube 的 IFrame API 一个多月了，因为我使用 NationBuilder 制作了一个网站。我需要它是因为我需要它的 onPlayerStateChange 来隐藏和显示我放置在视频本身之上的一些元素。

突然间，它停止工作了。我做了一些研究，发现 YouTube 本月将迁移到其 Data API 的第 3 版，所以我认为这可能是问题所在。不确定。

这是网站本身，视频是顶部的大视频，顶部有两个元素：http://www.beyondbars.org/

（注意：网站上的视频现在可以正常工作，因为我只是将常规 iframe 嵌入其中——您可以看到，一旦它开始，它上面的两个元素就不会像我想要的那样隐藏到）

我也在网上和 stackoverflow 上进行了研究，但似乎没有其他人遇到这个问题。

我什至甚至逐字复制并粘贴 YouTube 放置在其教程网站上的示例脚本：https://developers.google.com/youtube/iframe_api_reference#Requirements，但仍然无法正常工作。有趣的是，在这种情况下，我听到了视频中的声音，只是看不到实际的视频本身。

在生成的 iFrame 中，现在显示的是：

<div id="player-unavailable" class="ytp-error hid">
<div id="unavailable-submessage" class="ytp-error-content"></div>
</div>

在控制台中，我开始收到此消息，但不确定它是否与 YouTube 问题有关：

应用程序配置不允许给定 URL。: 一个或应用程序的设置不允许更多给定的 URL。它必须匹配网站 URL 或画布 URL，或者域必须是子域应用程序的域之一。 ping?client_id=126739610711965&domain=www.beyondbars.org&origin=1&redirect_uri=http%3A%2F%2Fstatic....:1

这是我真正需要的代码，并且之前可以使用：

<div id="player"></div>

<script>
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // create youtube player
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: '{{ youtubeid }}',
          playerVars: { 'wmode': 'opaque', 'controls': 0, 'showinfo': 0 },
          events: {
            'onStateChange': onPlayerStateChange
          }
        });
    }

    // when video starts, hide the headline wrap
    function onPlayerStateChange(event) {        
        if(event.data === 1) {            
            $('.headline-wrap').fadeOut('slow');
        }

        if(event.data === 0) {
            $('.headline-wrap').fadeIn('slow');
        }
    }

</script>

有人有想法吗？这是我做错了什么吗？或者这是在 YouTube 的尽头？

谢谢！

【问题讨论】：

虽然我没有完全相同的问题，但我也体验到最近我网站上的嵌入式播放列表突然停止工作。突然他们没有显示视频标题和播放列表图标。不确定它是否相关，但也许 Youtube 正在做出一些影响这些事情的改变。人们希望他们能更积极地提供支持。

标签： javascript api video youtube youtube-iframe-api

【解决方案1】：

我遇到了同样的问题，但我将它隔离到 Safari（OSX 和 iOS）。还影响了 Andriod 浏览器。它适用于 Chrome 和 Firefox。

【讨论】：

【解决方案2】：

我遇到了同样的问题。这个解决方案对我有用：

var videoQualities = [
    'small', // ~ 320 x 240
    'medium', // ~ 640 x 360
    'large', // ~ 853 x 480
    'hd720', // HD Ready
    'hd1080', // Full HD
    'highres' // ~ 4K
];
var time = player.getCurrentTime();

player.seekTo(time + 1, true);

var currentQuality = player.getPlaybackQuality();
var index = videoQualities.indexOf(currentQuality);
var newQuality = videoQualities[index - 1] || 'medium';

player.setPlaybackQuality(newQuality);

setTimeout(function() {
    player.setPlaybackQuality('default');
}, 1000);

【讨论】：