3

一个多月以来，我一直在使用 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 的尽头？

谢谢！

4

2 回答 2

1

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

于 2014-04-09T21:34:43.263 回答
0

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

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);
于 2015-01-01T17:38:51.070 回答