onReady没有为嵌入式youtube iframe触发

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了onReady没有为嵌入式youtube iframe触发相关的知识,希望对你有一定的参考价值。

我有问题让youtube api正常工作。 API本身加载并调用onYouTubeIframeAPIReady()函数,但onReady不起作用。

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

function onYouTubeIframeAPIReady() {
  log('API')
  log(document.getElementById('yt-pilezspnvu'));
  var player = new YT.Player('yt-pilezspnvu', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
  log(event);
}
function onPlayerStateChange(event) {
  log(event);
}

上面的代码不包含在任何函数或任何东西中。下图中的错误只是我的adblock内容。我已经尝试添加origin=http://example.com,如在这个线程https://stackoverflow.com/a/20505337/736967指出,但仍然无法正常工作。

enter image description here

答案

我认为你需要一些缺少的额外位。 尝试将此添加到您的代码中。

  ytplayer = new YT.Player('ytplayer', {

      height: '385',
      width: '640',
      videoId: '[your-videoID]',
      playerVars: {'wmode': 'opaque', 'autohide': 1 , 'enablejsapi': 1 , 'origin': 'http://www.yousite.com', 'rel': 0},

        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange,
        }

qazxsw poi有许多部分你可以使用或不使用。但是你肯定需要在玩家身上加载一些东西。 VideoID或PlayList。否则什么都不会发生。

另一答案

我有一个类似的问题,点击叠加图像,即使所有其他事件发生,onReady事件似乎永远不会触发;通过每个控制台日志显而易见。

这个问题显然是一场比赛。单击叠加图像应删除图像并开始播放YouTube视频。我在同一页面上也有几个视频。播放视频的click事件应放在onReady事件中,而不是触发play事件的click事件。我尽可能地减少了这个,因为我们的DOM在视频容器中有几个元素,包括叠加图像,标题等。

这是我的解决方案:

playerVars

我希望这可以帮助其他任何可能正在搜索无错误的onReady事件的人看似不起作用。这篇 var player = new Array; window.onYouTubeIframeAPIReady = function() { // Loop through the existing video iframes designated with the inital string 'vidframe_' in the id jQuery('iframe[id^="vidframe_"]').each(function (i, val) { var $this = $(this); // iframe container var $vidWrapper = $this.closest('.video-wrapper'); // Make sure it is a YouTube video. This data attribute is set when the iframe is created by my code if( $vidWrapper.data("video-source") == "youtube" ) { // Initialize each YouTube video present player[i] = new YT.Player($this.attr('id'), { events: { onReady: function(event) { // Set the click event listener here $vidWrapper.on("click", function() { // Target the overlay image // 'this' is now the .video-wrapper image element var imgOver = $(this).find('figure'); // Remove image overlay if( imgOver ) imgOver.fadeOut(); // Target the right player player[i].playVideo(); }); } } }); } }); }; 文章真正给了我最好的线索。

以上是关于onReady没有为嵌入式youtube iframe触发的主要内容,如果未能解决你的问题,请参考以下文章

YouTube 直播嵌入代码不断变化

Youtube API onReady不起作用

YouTube iframe API - onReady 和 onStateChanged 事件未触发

有没有办法为嵌入式YouTube视频创建委派菜单(youtube autoplay chrome)

嵌入没有任何徽标或 youtube 链接的 youtube 视频

嵌入具有正确纵横比的 Youtube/Vimeo 视频