Question

我使用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或Canvas URL，或域必须是子域 App的一个域名。平CLIENT_ID = 126739610711965＆安培;域= www.beyondbars.org＆安培;来源= 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的结尾？

谢谢！

Answer 1

我遇到了同样的问题，但我把它与Safari（OSX和iOS）分开了。也影响了Andriod浏览器。它适用于Chrome和Firefox。

Answer 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);

Youtube API嵌入突然停止运行

2 个答案: